substring/regex to get a src value held in a string

Question

I have a string with the value:

var string = "<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>"

I'd like to take the URL held in the src attribute part of the string if possible.

How can I do this using JavaScript?

use variant of preg_match_all, http://regexr.com?324la – Logic Wreck Sep 12 '12 at 18:05 — Logic Wreck, Sep 12 '12 at 18:05

score 43 · Accepted Answer · edited May 26 '21 at 14:41

43

One way to do it is to use regular expressions.

var str = "<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>";

var regex = /<img.*?src='(.*?)'/;
var src = regex.exec(str)[1];

console.log(src);

edited May 26 '21 at 14:41

demo

6,038
19
75
149

answered Sep 12 '12 at 17:50

driangle

11,601
5
47
54

I think people in general disagree with the idea of using regular expressions to parse html. But this seems to be a simple case. – driangle Sep 12 '12 at 17:59
Yeah without much information as to what hes doing though its really hard to say what he should using. – Loktar Sep 12 '12 at 18:00
This regex is incomplete. What if `str = " – jscripter Jul 09 '15 at 02:08
3

minor addition (img src="url"), to accept double quotation for src: `var regex = / – arcol Nov 30 '15 at 12:51

score 7 · Answer 2 · answered Sep 12 '12 at 17:52

Alternative method if its always going to be html data.

var string ="<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>";

var elem= document.createElement("div");
elem.innerHTML = string;

var images = elem.getElementsByTagName("img");

for(var i=0; i < images.length; i++){
   console.log(images[i].src);   
}

Live Demo

David Thomas · Answer 3 · 2012-09-12T18:06:07.393

One approach, is the following:

var string = "<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>",
    srcWithQuotes = string.match(/src\=([^\s]*)\s/)[1],
    src = srcWithQuotes.substring(1,srcWithQuotes.length - 1);
console.log(src);

JS Fiddle demo.

This effectively matches a sequence of characters starting with src= (the = is escaped with a back-slash because, otherwise, it holds special meaning within regular expressions), followed by a sequence of non-white-space characters (^\s*) followed by a white-space character (\s).

This expression explicitly captures the quotes used to delimit the src attribute, the src is returned by taking a substring of the srcWithQuotes variable, starting at 1 (the first, the zeroeth, character should be the attribute delimiter) until the index before the last character (the final quote delimiting the attribute).

There is a slightly convoluted (but potentially more reliable) approach, using a document fragment:

var string = "<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>",
    temp = document.createElement('div'),
    frag = document.createDocumentFragment();

temp.innerHTML = string;
frag.appendChild(temp);
console.log(temp.getElementsByTagName('img')[0].src);

JS Fiddle demo.

Of course, in this example, you could use any approach you like to find the image within the temp node (getElementById(), getElementsByClassName()...).

What if there are no space after the quotes. i.e.: `/UID'/>`? — jscripter, Jul 09 '15 at 02:28
This is a great solution and worked well for me. Until the editors in the Wordpress blog that I am pulling the content via a JSON feed use apostrophes in their alt tag descriptions - that effectively breaks the string. I don't think it has anything to do with this code - it's the JSON feed. — Ryan Coolwebs, Jul 29 '16 at 03:57

score 5 · Answer 4 · answered Sep 12 '12 at 18:03

Native DOM (will result in GETs)

var str = "<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>",
d = document.createElement('div'),
srcs = [];
d.innerHTML = str;
srcs = Array.prototype.slice.call(d.querySelectorAll('[src]'),0);
while( srcs.length > 0 ) console.log( srcs[0].src ), srcs.shift();

or RegExp

var str = "<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>",
re = /\ssrc=(?:(?:'([^']*)')|(?:"([^"]*)")|([^\s]*))/i, // match src='a' OR src="a" OR src=a
res = str.match(re),
src = res[1]||res[2]||res[3]; // get the one that matched

src; // http://api.com/images/UID

Good approach but I had an error when was matching this string ``, `src` was `undefined||""||undefined = undefined` — jscripter, Jul 09 '15 at 11:13
I think that this should be the regex now`/\ssrc=(?:(?:'([^']+)')|(?:"([^"]+)")|([^'"\s][^\s\/>]*))/i`.I've made a [fiddle](http://jsfiddle.net/kbg9dp97/1/) to test it — jscripter, Jul 09 '15 at 12:19

score 2 · Answer 5 · answered Feb 10 '17 at 22:11

Assuming that you want to match specifically the src property in an <img> tag. You can use this Regex because it will match the tag, still preserve other properties it might have and also other content inside the src property:

var matches = string.match(/<img([^>]+)src="[/]?([^"]+)"([^>]*)>|<( *)img( *)[/>|>]/g);

it can be improved but works fine with some varieties of typing.

for example, if you want to match <img> or even <img src="/200px-Unofficial_JavaScript_logo_2.svg.png" alt="" width="100" height="172" /> to add something to the url, you can do the following replacement:

string.replace(/<img([^>]+)src="[/]?([^"]+)"([^>]*)>|<( *)img( *)[/>|>]/g, '<img $1src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/$2" $3>');

score 0 · Answer 6 · edited Oct 20 '16 at 06:57

0

You can use jQuery to do this, using the find method, get the src attribute of the image.

var str = '<img src="/uploads/thumbnail/79a23278ec18b2fc505b06ab799d5ec672094e79.jpg">';

var result = $(str).find('img').eq(0).attr('src');  //  get a image src

edited Oct 20 '16 at 06:57

rhgb

4,075
2
21
28

answered Oct 20 '16 at 06:44

steve ryu

1

score -2 · Answer 7 · answered Mar 25 '15 at 18:10

Faccy 2015: Using jQuery and CofeeScript via DOM

str = '<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>'

img = $(@.content).find('img').each ()->
  srcimg = $(@).attr('src')
  console.log srcimg

substring/regex to get a src value held in a string

7 Answers7

Linked