Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Regular expression in JavaScript - Replace Image src attribute

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' />
like image 395
redsquare Avatar asked Aug 19 '09 08:08

redsquare


2 Answers

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");
like image 129
gnarf Avatar answered Sep 18 '22 11:09

gnarf


Try this:

str.replace(/src='(?:[^'\/]*\/)*([^']+)'/g, "src='newPath/$1'");
like image 22
Gumbo Avatar answered Sep 22 '22 11:09

Gumbo