Regular expression in JavaScript - Replace Image src attribute

Question

In JavaScript I have a string containing a DOM fragment. How would I find and replace the src attribute of an image?

I would like to replace the path of all images with a new path but keeping the image name. Not all the paths are the same and can come from various locations. My regular expression skills are poor at best.

For example:

Change

   <img src='path/to/image/name.jpg' />

into 

   <img src='newPath/name.jpg' />

score 12 · Answer 1 · answered Aug 21 '09 at 08:27

Took gumbo's answer and added a few more things to improve it:

If the input string contains something other than <img> tags that may have a src attribute - this will no longer matches/replace them.
The src attribute may be using single or double quotes.
The test being case insensitive.

Resulting in:

string.replace(/<img([^>]*)\ssrc=(['"])(?:[^\2\/]*\/)*([^\2]+)\2/gi, "<img$1 src=$2newPath/$3$2");

Gumbo · Accepted Answer · 2009-08-19T09:00:08.807

7

Try this:

str.replace(/src='(?:[^'\/]*\/)*([^']+)'/g, "src='newPath/$1'");

edited Aug 19 '09 at 09:00

answered Aug 19 '09 at 08:39

Gumbo

643,351
109
780
844

doesnt seem to work. changes 'http://blog.internetnews.com/skerner/smk/testpilot.png' into 'http://newPath/blog.internetnews.com/skerner/smk/testpilot.png' – redsquare Aug 19 '09 at 08:50
It will do. You need to use "src='newPath/$2'" as the replacement – Xetius Aug 19 '09 at 08:51
Editted the answer to fix this – Xetius Aug 19 '09 at 08:57
Ah, this works for one image but will not match all images. Is this possible – redsquare Aug 19 '09 at 08:58
@redsquare: Just forgot a quantifier and the global flag. And the `$1` *is* correct. – Gumbo Aug 19 '09 at 09:04

score 4 · Answer 3 · answered Dec 29 '12 at 21:42

4

If using raw (non-DOM) data such as HTML in string form, above doesn't match double quote chars. This code may prove useful, too:

root     = serviceURL("file") + "&src=" + encodeURIComponent(root);
// html itself
html     = html.replace(/src=['"](?:[^"'\/]*\/)*([^'"]+)['"]/g, "src='" + root + "/$1'");

answered Dec 29 '12 at 21:42

Tim Beres

181
3

1

Much better solution – Ben Taliadoros Nov 01 '17 at 16:40

score 1 · Answer 4 · answered Aug 19 '09 at 08:43

1

replace(/(.*)\/(.*)/, "newPath/$2");

answered Aug 19 '09 at 08:43

Xetius

44,755
24
88
123

that's odd. It worked when I tried it in this: http://www.regular-expressions.info/javascriptexample.html – Xetius Aug 19 '09 at 08:56

score 1 · Answer 5 · answered Feb 24 '17 at 04:22

The above solutions doesn't work well in my case, where i had to replace all relative path to absolute path before storing it in DB. But here's my solution in case mine work for anyone else. Cheers.

replace(/<img([^>]*)\ssrc=(['"])(\/[^\2*([^\2\s<]+)\2/gi, "<img$1 src=$2" + BaseURL + "$3$2");

score 0 · Answer 6 · answered Jun 16 '17 at 20:29

I used these expression in my project, worked like charm, handling all cases like, quote, double quote, multiple image tags in text etc. In Javascript

text.replace(/\<img([^>]*)\ssrc=('|")([^>]*)\2\s([^>]*)\/\>/gi, "<img$1 src=$2newPath/$3$2 $4/>");

In PHP

preg_replace('/\<img([^>]*)\ssrc=(\'|\")([^>]*)\2\s([^>]*)\/\>/', "<img$1 src=$2newPath/$3$2 $4/>",$text);

Regular expression in JavaScript - Replace Image src attribute

6 Answers6

Linked