How to exctract all image urls and href value from html string using javascript?

Question

I have an HTML string that holds sets of list items. I want to extract the image url and the correspondent href value from <li></li> sets and use these values as variables for later.

    <img src="./season/123434mango.jpg" width="180" height="148"
         alt="mango season" class="png">
    <a href="/mango/"  class="corners">&nbsp;</a>

example of <li></li> set:

 <li>
            <img src="./season/123434mango.jpg" width="180" height="148"
                 alt="mango season" class="png">
            <a href="/mango/"  class="corners">&nbsp;</a>


                <div class="thumbnail_label">ok</div>


          <div class="details">
            <div class="title">
              <a  href=
              "/mango/"> mango</a>
              <span class="season">2</span>
            </div>
            <ul class="subject">
              <li>read</li>
            </ul>
            <ul class="sub-info">
              <li class="location">Europe</li>
              <li class="price">2</li>
            </ul>
          </div>
        </li>

are you using jquery? or pure javascript? also, what have you tried so far? — Th0rndike
– Th0rndike, Commented Jul 24, 2013 at 15:53

Chris Kdon · Accepted Answer · 2013-07-24 18:06:20Z

1

If you're using jQuery then you can do:

var data = [];

$($.parseHTML(siteContents)).each(function() {
    $(this).find("img").each(function() {
        var parent = $(this).parent();

        data.push({
                     SRC: $(this).attr("src"),
                     HREF: parent.find("a").attr("href"),
                     LOCATION: parent.find(".location").text(),
                     PRICE: parent.find(".price").text(),
                     SUBJECT: parent.find(".subject li").text()
        });
    });
});

You can then use the array "data" that contains objects. Each of which has a "SRC", and "HREF" attribute associated with it.

See this jsFiddle for an example of it in use.

UPDATED BASED ON COMMENTS

See this jsFiddle example. The key change is instead of looking for "li" you pass it $.parseHTML(siteContents);

edited Jul 24, 2013 at 18:06

answered Jul 24, 2013 at 15:59

Chris Kdon

9161 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1788736 Over a year ago

thanks for replies. chris my html source is called code that comes from getjson . could you tell me how i can use your code with my own code variable ? $.getJSON('anyorigin.com/get?url=http://someremotesite.com/page/…?', function(data){ var siteContents = data.contents; //writes to textarea document.myform.outputtext.value = siteContents ; var start = siteContents.indexOf('<ul class="list">'); var end = siteContents.indexOf('<ul class="paging">', start); var code = siteContents.substring(start, end);

Chris Kdon Over a year ago

Updated the answer to meet your needs.

user1788736 Over a year ago

many many thanks chris it solved my problem. could you tell me how i can get location price and subject values too ?

user1788736 Over a year ago

thanks chris but your last jsfiddle doesnt include the update for location anbd price. could you please add them .thanks

Rafael Gomes · Accepted Answer · 2013-07-24 16:46:03Z

1

If you are using jQuery this will do the trick and will be organized. I updated with a parseHTML.

//Instead of using each, always think about use for, will be faster.

    var imagesSourceAndLinkHref = {sources: [], hrefs: []},
    i = 0,
    code = $.parseHTML('<div><li><img src="./season/123434mango.jpg" width="180" height="148" alt="mango season" class="png " /></li></div>'),
    list = $(code).find('li'),
    images = list.find('img'),
    links = list.find('a');

for(i; i < images.length; i++) {
    imagesSourceAndLinkHref.sources.push(images.attr('src'));
}

for(i = 0; i < links.length; i++) {
    imagesSourceAndLinkHref.hrefs.push(links.attr('href'));
}

console.log(imagesSourceAndLinkHref);

See this jsFiddle

Cheers!

edited Jul 24, 2013 at 16:46

answered Jul 24, 2013 at 16:11

Rafael Gomes

1121 silver badge9 bronze badges

1 Comment

user1788736 Over a year ago

rafaed thanks but how to feed my variable called code to yours ? my html source is inside variable called code !

Collectives™ on Stack Overflow

How to exctract all image urls and href value from html string using javascript?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related