RegEx to match string 'img' in URLs only (e.g. not tag names)

Question

I need to RegEx that I am using in to find strings to replace via a Grunt task.

I am wanting to swap out locally referenced image URLs with their external URLs. The file structure is the same both locally and externally.

I need to look for /img or img at the start of a URL (either in an img tag's src attribute, or CSS rules) and swap in the external URL.

Eg look for /img/some-photo.jpg or img/some-photo.jpg and replace /img or img with https://www.example.com/some-photo.jpg .

I can't just look for img alone as that would also match the string in the following HTML <img .../> turning the tag into <https://www.example.com .../> .

I can exclude the img tag like this:

/\\/img|(^|[^\\<])img/gim

But that also matches, for example:

(img 'img "img

etc.

I don't want to exclude the string img in these examples, I just don't also want to capture the preceding characters ( ( , ' , " , etc.)

You can see this in action here: https://regexr.com/3qbeq

Answer 1

It looks like you need to look at negative lookbehind, or if your code always encloses attribute in single or double quotes, include those.

A negative lookbehind solution would be something like (?<!\\<)img which should match any string img that doesn't have a < in front. A quick internet search for "negative lookbehind" will yield many examples. Lookaheads and lookbehinds are a "level-up" in regex mastery.

Or, just add in the quotes and a conditional for the slash. "\\/?img which will match attributes but not tags, because tags don't begin with a quote. Again, this only works if you enclose all your attributes with quotes. Perhaps not as elegant or failsafe as a lookbehind, but might do the job.

Answer 2

I was grossly overthinking the problem.

If the images were all in a directory img it therefore my be followed by a forward slash. Tags (and for that matter, CSS rules like img {} ) aren't followed by a forward slash and therefore I only have to look for match of img/ or /img /.

This can easily be achieved by /(\\/?img\\/)/gi .