-4

How do I extract the image src from this string by pattern matching?

var str = "<img src=\"http://l.yimg.com/a/i/us/we/52/20.gif\"/><br />\n<b>
    Current Conditions:</b><br />\nFog, 16 C<BR />\n<BR /><b>";

?

Ajey
  • 7,924
  • 12
  • 62
  • 86

4 Answers4

4

Since you are in JavaScript, you have a DOM parser readily available. Use it.

var tmp = document.createElement('div');
tmp.innerHTML = str;
var img = tmp.getElementsByTagName('img')[0];
var src = img.src;

Done ^_^

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • 1
    Not enough jQuery or regex. – nnnnnn Jan 03 '15 at 13:18
  • @nnnnnn I know, right? I totally suck at this. – Niet the Dark Absol Jan 03 '15 at 13:19
  • In reality I actually like and use jQuery core (I prefer to implement my own plugins so that I'm in control of their behaviour), but as per my other comments I wouldn't introduce jQuery to a site just for this. I like regex, too, but don't use it on html. – nnnnnn Jan 03 '15 at 13:28
  • Best to use `DOMParser` instead. `innerHTML` creates an element and permits execution of arbitrary code if the input string is untrustworthy – CertainPerformance Oct 01 '19 at 04:08
1

A working example to use regular expressions:

<script>
    var str = "<img src=\"http://l.yimg.com/a/i/us/we/52/20.gif\"/><br />\n<b>";
    var regex = /(http|ftp|https):\/\/([\w\-_]+(?:(?:\.[\w\-_]+)+))([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/
    var url = str.match(regex)[0];
    alert(url);
</script>

Used the regex string from here: Regular expression to find URLs within a string

Community
  • 1
  • 1
Tyr
  • 2,810
  • 1
  • 12
  • 21
  • The pony he comes... HE COMES... The center cannot hold it is too late he comes... – Niet the Dark Absol Jan 03 '15 at 13:19
  • 1
    I still think it is not fair to downvote a working answer just because it's regex. Refusing to upvote would be enough... – Marcel Gwerder Jan 03 '15 at 13:26
  • Isn't that regex overcomplicated for this problem? OP wants whatever is in the src, so no need to match a URL specifically: just match any non-quote characters through to the closing quote. – nnnnnn Jan 03 '15 at 13:34
  • Sure, it's a nuke cannon for that issue. You can also use the simple way for matching: /src=\"(.*)\"/ which gives two returns. First with the src tag embraced, the second one is the raw url. – Tyr Jan 03 '15 at 13:40
-1

It has to be by pattern matching? With jquery:

var src = $('img').attr('src');
jeremyb
  • 470
  • 4
  • 12
-2

You should consider using jquery for that. If you have you html on a string, then just do

$('<div>' + myHtml + '</div>').find('img').attr('src');

To parse it. If you are not using jquery, you could try something like:

new DOMParser().parseFromString(myHtml, "text/html");

With plain js to get the dom.

Luan Nico
  • 5,376
  • 2
  • 30
  • 60
  • 2
    Because, of course, you couldn't *possibly* do that with plain JavaScript. – Niet the Dark Absol Jan 03 '15 at 13:08
  • Normally every website already loads jquery, so you are able to use a cleaner and more powerful syntax. But of course you could do it natively as well. – Luan Nico Jan 03 '15 at 13:10
  • *Every* website? Um...no. jQuery doesn't give you a cleaner syntax, because it's still just Javascript using Javascript syntax. – nnnnnn Jan 03 '15 at 13:11
  • "*Every website already loads jquery*" Only if the developer decides to... – Marcel Gwerder Jan 03 '15 at 13:11
  • My website will not touch jQuery with a fifty foot pole. That way, when my code breaks, I can't blame it on jQuery. Anyone tried submitting a form with `` with jQuery validation? – Niet the Dark Absol Jan 03 '15 at 13:12
  • I only mentioned because op could not know it was possible to parse html strings with jquery. I myself didn't know when I started using it - therefore he wouldn't tag as jquery, because he would think it is irrelevant. And I said 'normally every website uses jquery', of course it is not all of them, and there are several reasons not to, but it is still the majority of them :) – Luan Nico Jan 03 '15 at 13:21