How to prepend a domain to all images

Question

  let bar = "<img src=\"/assets/img/screenshot-scripts.png\" alt=\"scripts screenshot\" class=\"half center\" /><img src=\"/assets/img/screenshot-scripts-sed.png\" alt=\"scripts sed screenshot\" />";
bar = bar.replaceAll(/src=\\"(.*)\\"/gi, 'src="https://blog.jonesrussell.xyz/$1"');

This does not produce the desired results of https://blog.jonesrussell42.xyz being prepended to all image src's.

Answer 1

Not sure why you'd use RegExp for this (generally speaking, it's not the right tool to do any HTML parsing/maipulation with so many edge cases out there). You could use DOMParser.parseFromString() and do the manipulation properly:

let domain = "https://blog.jonesrussell.xyz";
let bar = "<img src=\"/assets/img/screenshot-scripts.png\" alt=\"scripts screenshot\" class=\"half center\" /><img src=\"/assets/img/screenshot-scripts-sed.png\" alt=\"scripts sed screenshot\" />";
var htmlDoc = new DOMParser().parseFromString(bar, 'text/html');

for (image of [...htmlDoc.querySelectorAll('img')]) {
  image.src = domain + image.getAttribute('src'); // use getAttribute() to ensure the parser doesn't try to automatically evaluate the `src` property to the current domain before being able to prepend our own domain value
  console.log(image);
}

Answer 2

Using regex to manipulate HTML is not reliable. As @esqew pointed out, it is safer to use an HTML parser.

If you are Ok not supporting corner cases you can use this regex:

let bar = "<img src=\"/assets/img/screenshot-scripts.png\" alt=\"scripts screenshot\" class=\"half center\" /><img src=\"/assets/img/screenshot-scripts-sed.png\" alt=\"scripts sed screenshot\" />";
bar = bar.replace(/\b(src=["']?)/gi, '$1https://blog.jonesrussell.xyz');
console.log(bar);

Output: <img src="https://blog.jonesrussell.xyz/assets/img/screenshot-scripts.png" alt="scripts screenshot" class="half center" /><img src="https://blog.jonesrussell.xyz/assets/img/screenshot-scripts-sed.png" alt="scripts sed screenshot" />

Explanation:

• \b - word boundary to reduce the chance of false positives
• (src=["']?) - expect and capture src=", src=', or a src= without quotes
• in the replacement, use the captured group $1, and add the domain

You could use a positive lookbehind to avoid the capture group with $1, but Safari does not yet support that.