Looking for html string jquery parser ( parse <a> links and <img>images)

Question

Hi,

I am Looking for html string jquery parser ( parse <a> links and <img> images) or for code that will parse all links and images from html string (Html string can be very big).

Example:

input:

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

output links: value+href (if value empty not return such link)

output images:src + alt

Its very important for me to find the most efficient way.

---

---

Edit:

the function should looks like that return multi dimensial array.

like: arr[links][href][value] arr[images][src][alt]

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

(or in other better way if you have)

Thanks

Answer 1

You can simply go thourgh them like this:

$('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...
   }
});

Answer 2

Assuming your string is valid HTML, you could do something like this:

Try it out: http://jsfiddle.net/WsDTL/2/ (updated from original to use .each() instead of .map() in order to avoid using .split() )

var string = "sdsds<div>sdd<a href='http://google.com/image1.gif'&gt;image1&lt;/a&gt;  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);​

---

EDIT:

If you meant that you don't want to process the <a> if it doesn't have an href attribute, then change the code to this:

$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]);
    }
});

---

EDIT:

For storage as in your comment, you would make results a javascript object, and store the arrays under the links and images keys.

var string = "sdsds<div>sdd<a href='http://google.com/image1.gif'&gt;image1&lt;/a&gt;  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);

You can do 2 separate loops if you prefer. Not sure which will perform better.​

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