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?

Answer 1

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);

Answer 2

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

Answer 3

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()...).

Answer 4

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

Answer 5

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>');