extract image url using javascript from a HTML webpage

Question

i have the source of a html section saved as a string :

var str= '<div class="quizdisplay themestylename theme_db_primarykey">
        <h1>What Power Would Suit You Best</h1>
        <p class="inline_byline"">Created by <a class="url fn" href="/user/xQUANTUMNxNOVAx/profile">xQUANTUMNxNOVAx</a></p>

        <div class="metacrumb">

                  <dl>

                    <dt>Tagged:</dt>

                      <dd><a class="tag" rel="tag" href="/tags/dark" title="dark">dark</a></dd>, <dd><a class="tag" rel="tag"
 href="/tags/personality" title="personality">personality</a></dd>,
 <dd><a class="tag" rel="tag" href="/tags/air"
 title="air">air</a></dd>, <dd><a class="tag" rel="tag"
 href="/tags/power" title="power">power</a></dd>, <dd><a class="tag"
 rel="tag" href="/tags/fire" title="fire">fire</a></dd>, <dd><a
 class="tag" rel="tag" href="/tags/water" title="water">water</a></dd>,
 <dd><a class="tag" rel="tag" href="/tags/energy"
 title="energy">energy</a></dd>, <dd><a class="tag" rel="tag"
 href="/tags/earth" title="earth">earth</a></dd>, <dd><a class="tag"
 rel="tag" href="/tags/lightning" title="lightning">lightning</a></dd>,
 <dd><a class="tag" rel="tag" href="/tags/telekinesis"
 title="telekinesis">telekinesis</a></dd>

                   </dl>

                </div>

        <div id="itemresults" class="quidget">
            <p>
                5493 other people got this result!
                That's 34%
            </p>
                        <a class="button viewallresults">View all results</a>
                            <a href="/quizzes" class="button" style="line-height:23px;width:150px;">Take another quiz!</a>

        </div>

        <h3 class="aquestion">Water/Ice.</h3>

                <img src="/user_images/X/XQ/XQU/XQUANTUMNXNOVAX/1346304322_6798_full.jpeg"
 alt="result image" />

        <p>You go with the flow, following the motions of the world around you. You're calming and relaxing but have an aggressive side to
 you when necessary. You can be in tune with people easily, or can be
 completely cold hearted. People typically love you, and need you the
 most.</p>

 </div>';

how do i extract the image url from this string using javascript ?

please remove all the > from you code and format properly

Ibu
– Ibu

2012-09-05 00:58:02 +00:00
Commented Sep 5, 2012 at 0:58 — Ibu
– Ibu, Commented Sep 5, 2012 at 0:58
that's not a string, that's a syntax error

hackattack
– hackattack

2012-09-05 01:24:47 +00:00
Commented Sep 5, 2012 at 1:24 — hackattack
– hackattack, Commented Sep 5, 2012 at 1:24
i have saved the whole HTML as a string .

rajat
– rajat

2012-09-05 01:30:00 +00:00
Commented Sep 5, 2012 at 1:30 — rajat
– rajat, Commented Sep 5, 2012 at 1:30

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

jquery

var srcArray = [];
$(str).find('img').each(function(){
   src = $(this).attr('src');
   srcArray.push(src);
});

Or you can use Regex:

var regex = /(?<=<img src=").*?(?=")/gm;
src = regex.match(str);
alert(src);

examle on this link.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 5, 2012 at 1:31

Dariush Jafari

5,4538 gold badges45 silver badges74 bronze badges

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

1 Comment

rajat Over a year ago

i need a solution without any library .

Jonathon Ashworth · Accepted Answer · 2012-09-05 01:01:34Z

0

Since it's HTML. You could insert the whole lot into the DOM (hidden) and use jQuery to grab the image url out, it's a bit hacky, but probably the easiest way.

You could also use a regular expression to search for the image tag and grab the url out of it.

answered Sep 5, 2012 at 1:01

Jonathon Ashworth

1,11410 silver badges21 bronze badges

Collectives™ on Stack Overflow

extract image url using javascript from a HTML webpage

2 Answers 2

jquery

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

jquery

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related