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, regexr.com?324la

Logic Wreck
– Logic Wreck

2012-09-12 18:05:09 +00:00
Commented Sep 12, 2012 at 18:05 — Logic Wreck
– Logic Wreck, Commented Sep 12, 2012 at 18:05

demo · Accepted Answer · 2021-05-26 14:41:59Z

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, 2021 at 14:41

demo

6,29519 gold badges84 silver badges162 bronze badges

answered Sep 12, 2012 at 17:50

driangle

11.8k6 gold badges50 silver badges56 bronze badges

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

4 Comments

driangle Over a year ago

I think people in general disagree with the idea of using regular expressions to parse html. But this seems to be a simple case.

Loktar Over a year ago

Yeah without much information as to what hes doing though its really hard to say what he should using.

jscripter Over a year ago

This regex is incomplete. What if str = "<img></img><script src='url'>"?

arcol Over a year ago

minor addition (img src="url"), to accept double quotation for src: var regex = /<img.*?src=['"](.*?)['"]/;

Loktar · Accepted Answer · 2012-09-12 17:52:36Z

7

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

answered Sep 12, 2012 at 17:52

Loktar

35.3k7 gold badges96 silver badges106 bronze badges

Comments

David Thomas · Accepted Answer · 2012-09-12 18:06:07Z

7

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

edited Sep 12, 2012 at 18:06

answered Sep 12, 2012 at 18:00

David Thomas

254k53 gold badges382 silver badges421 bronze badges

2 Comments

jscripter Over a year ago

What if there are no space after the quotes. i.e.: /UID'/>?

Ryan Coolwebs Over a year ago

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.

Paul S. · Accepted Answer · 2012-09-12 18:03:14Z

5

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

answered Sep 12, 2012 at 18:03

Paul S.

66.6k9 gold badges130 silver badges143 bronze badges

2 Comments

jscripter Over a year ago

Good approach but I had an error when was matching this string <img class="avatar-48" src="" />, src was undefined||""||undefined = undefined

jscripter Over a year ago

I think that this should be the regex now/\ssrc=(?:(?:'([^']+)')|(?:"([^"]+)")|([^'"\s][^\s\/>]*))/i.I've made a fiddle to test it

Arthur Padilha · Accepted Answer · 2017-02-10 22:11:13Z

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

rhgb · Accepted Answer · 2016-10-20 06:57:40Z

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, 2016 at 6:57

rhgb

4,2352 gold badges23 silver badges28 bronze badges

answered Oct 20, 2016 at 6:44

steve ryu

1

Comments

biojazzard · Accepted Answer · 2015-03-25 18:10:37Z

-2

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

answered Mar 25, 2015 at 18:10

biojazzard

5934 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

4 Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related