Поиск html строки jquery parser (парсинг <a>ссылок и <img>изображений) - PullRequest
Новая
       7

Поиск html строки jquery parser (парсинг <a>ссылок и <img>изображений)

1 голос
/ 17 июля 2010

Я ищу html-строку jquery-анализатора (парсинг <a> ссылок и <img> изображений) или код, который будет анализировать все ссылки и изображения из html-строки (Html-строка может быть очень большой).

Пример:

ввод 

sdsds<div>sdd<a href='http://google.com/image1.gif'image1</a>  sd</div>
sdsdsdssssssssssssssssssssssssssssssssssss <p> sdsdsdsds  </p>
sdsds<div>sdd<img src='http://google.com/image1.gif'image1 alt="car for family">  sd</div>

выходные ссылки : значение + href (если значение пустое, такая ссылка не возвращается)

вывод изображений : src + alt

Для меня очень важно найти наиболее эффективный способ.

Edit:

функция должна выглядеть так, чтобы возвращать многомерный массив.

как: arr [ссылки] [href] [значение] arr [изображения] [src] [alt] 

function parseLinksAndImages(htmlString){
.........................
........................
return linksAndImagesArrMultiDimensial;
}

(или другим лучшим способом, если у вас есть)

Спасибо

Ответы [ 2 ]

3 голосов
/ 17 июля 2010

Предполагая, что ваша строка является допустимым HTML, вы можете сделать что-то вроде этого:

Попробуйте: http://jsfiddle.net/WsDTL/2/ (обновлено с оригинала для использования .each() вместо .map() во избежание использования .split()) 

var string = "sdsds<div>sdd<a href='http://google.com/image1.gif'>image1</a>  sd</div>sdsdsdssssssssssssssssssssssssssssssssssss <p> <a href='some/href'></a> sdsdsdsds  </p>sdsds<div>sdd<img src='http://google.com/image1.gif' alt='car for family' />  sd</div>";

var $container = $('<div/>').html(string);

var result = [];

$container.find('a,img').each(function() {
    if(this.tagName.toUpperCase() == 'A') {
        if($.trim( this.innerHTML ) != '') {
            result.push([this.tagName,this.innerHTML,this.href]);
        }
    } else {
        result.push([this.tagName,this.src,this.alt]);
    }
});

alert(result);​

РЕДАКТИРОВАТЬ:

Если вы имели в виду, что вы нене хотите обрабатывать <a>, если у него нет атрибута href, затем измените код на следующий: 

$container.find('a[href],img').each(function() {
    if(this.tagName.toUpperCase() == 'A') {
        result.push([this.tagName,this.innerHTML,this.href]);
    } else {
        result.push([this.tagName,this.src,this.alt]);
    }
});

РЕДАКТИРОВАТЬ:

Для хранения, как в вашем комментарии, вы должны сделать results объектом javascript и хранить массивы под клавишами links и images. 

var string = "sdsds<div>sdd<a href='http://google.com/image1.gif'>image1</a>  sd</div>sdsdsdssssssssssssssssssssssssssssssssssss <p> <a href='some/href'></a> sdsdsdsds  </p>sdsds<div>sdd<img src='http://google.com/image1.gif' alt='car for family' />  sd</div>";

var $container = $('<div/>').html(string);

   // store results in a javascript object
var result = {
     links:[],
     images:[]
}; 

$container.find('a[href],img').each(function() {
    if(this.tagName.toUpperCase() == 'A') {
        result.links.push([this.tagName,this.innerHTML,this.href]);
    } else {
        result.images.push([this.tagName,this.src,this.alt]);
    }
});

alert(result.links);
alert(result.images);

Вы можете сделать 2 отдельныхпетли, если вы предпочитаете.Не уверен, что будет лучше.

http://jsfiddle.net/WsDTL/3/

2 голосов
/ 17 июля 2010

Вы можете просто пройти их так: 

$('a').each(function(){
   if ($(this).attr('href') && $(this).text()) { // get only links with href set
      // your code...
   }
});

$('img').each(function(){
   if ($(this).attr('src') && $(this).attr('alt')) { //get images with src and alt set
     // your code...
   }
});
...