JavaScript replace src attribute if path has value

Question

I have some markup that includes images with the following src attribute:

https://url.com/image/img.jpg

I want to replace any image (or href) that contains /image/ in its path. So the result would be:

https://newurl.com/img.jpg

I've tried using:

/src="(?:[^'\/]*\/)*([^']+)"/g

but not sure how to get it to only match /image/ paths, also when I change src to href it doesn't seem to allow me to replace both.

To clarify, I'm parsing plain text that happens to contain html strings. Also, I need to be able to maintain the file name, but replace the host address.

Update: Here's a jsfiddle of what I have so far. Although it works for the src, it's not taking into account the /image/ in the path, also it removes the href.

Don't be complicated unless you find you need to be - src.replace('/image/','/') — Adam Jenkins
– Adam Jenkins, Commented Jan 30, 2017 at 19:38
Btw can u please post the whole statement instead of regex only? Proggys can be silly at times lol. I do it everyday heh :D — Gogol
– Gogol, Commented Jan 30, 2017 at 19:44

Community · Accepted Answer · 2017-05-23 10:29:25Z

2

Obligatory don't use regex to parse HTML...

Since you are already using JavaScript, you could use the native DOM API to iterate over all of the img elements and update the src attributes:

Array.prototype.map.call(document.querySelectorAll('img'), function(img) {
  img.src = img.src.replace(/\/image\//, '/');
});

But since you clarified that you have a string that contains HTML, you could create a temporary element, insert the string as HTML, replace the src attributes, and then retrieve the updated innerHTML property value.

For example:

var content = `string of content containing random text, some elements, <p>and paragraphs</p> and more text.. <img src="https://url.com/image/img.jpg" /><img src="https://url.com/image/img.jpg" />`;

// Create the temporary DOM element
var temporaryElement = document.createElement('div');
temporaryElement.innerHTML = content;

// Replace the `src` attributes
Array.from(temporaryElement.querySelectorAll('img')).forEach((img) => {
  img.src = img.src.replace(/\/image\//, '/');
});

// Retrieve the updated `innerHTML` property
var updatedContent = temporaryElement.innerHTML;
console.log(updatedContent);

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Jan 30, 2017 at 19:39

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

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

4 Comments

dzm Over a year ago

Sorry I should have clarified, I'm not parsing dom, this is just plain text content that happens to have html elements.

Adam Jenkins Over a year ago

This one fails if the URL happens to end in image like https://newurl.com/somepath/image.jpg - check for the presence of the trailing slash. Then again, the OP didn't explicitly say that wasn't the desired behaviour....nevermind.

Josh Crozier Over a year ago

@dzm - Like this? I just updated the fiddle you posted.. jsfiddle.net/3mgo3u8L

dzm Over a year ago

@JoshCrozier Thanks, it looks like this could work, although I'd really prefer to use regex. I'm doing this server side and while I could put it into dom, it'd be much cleaner/faster I think to use regex.

Eduardo Lynch Araya · Accepted Answer · 2017-01-30 19:53:27Z

0

This Should Work.

REGEXP:

(?:^(?:https:\/{2})(?:\w*\.*|\d*\.*)(?:\w*|\d*)*(?:\/image\/))(.+)$

INPUT:

https://url.com/image/img.jpg
https://url.com/image/asdasdasd.jpg

REPLACE with: https://newurl.com/

https://newurl.com/$1

RESULT:

https://newurl.com/img.jpg
https://newurl.com/asdasdasd.jpg

JAVASCRIPT CODE:

const regex = /(?:^(?:https:\/{2})(?:\w*\.*|\d*\.*)(?:\w*|\d*)*(?:\/image\/))(.+)$/gm;
const str = `https://url.com/image/img.jpg
https://url.com/image/asdasdasd.jpg
`;
const subst = `https://newurl.com/\$1`;

// The substituted value will be contained in the result variable
const result = str.replace(regex, subst);

console.log('Substitution result: ', result);

See: https://regex101.com/r/I4hHV7/2

answered Jan 30, 2017 at 19:53

Eduardo Lynch Araya

8247 silver badges16 bronze badges

1 Comment

dzm Over a year ago

This is close, but if there's any other text in str, it doesn't seem to replace.

Collectives™ on Stack Overflow

JavaScript replace src attribute if path has value

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related