Question

I’m trying to parse and amend some html (as a string) using javascript and in this html, there are references (like img src or css backgrounds) to filenames which contain full stops/periods/dots/.

e.g.

<img src="../images/filename.01.png"> <img src="../images/filename.02.png">
<div style="background:url(../images/file.name.with.more.dots.gif)">

I’ve tried, struggled and failed to come up with a neat regex to allow me to parse this string and spit it back out without the dots in those filenames, e.g.

<img src="../images/filename01.png"/> <img src="../images/filename02.png"/>
<div style="background:url(../images/filenamewithmoredots.gif)">

I only want to affect the image filenames, and obviously I want to leave the filetype alone.

A regex like:

/(.*)(?=(.gif|.png|.jpg|.jpeg))

allows me to match the main part of the filename and the extension seperately, but it also matches across the whole of the string, not just within the one filename I want.

I have no control over the incoming html, I’m just consuming it.

Help me please overflowers, you’re my only hope!

Answer 1

I agree that this is not a problem suitable for regular expression, much less one neat expression.

But I trust that you are not here to hear that. So, in case you want to keep the input as string…

var src, result = '<img src="../images/filename.01.png"> <img src="../images/filename.02.png"><div style="background:url(../images/file.name.with.more.dots.gif)">';
do {
  src = result;  
  result = src.replace( /((?:url(\()|href=|src=)['"]?(?:[^'"\/]*\/)*[^'"\/]*)\.(?=[^\.'")]*\.(?:gif|png|jpe?g)['")>}\s])/g, '$1' );
} while (result != src)

Basically it keeps removing the second last dot of images url’s filenames until there are none. Here is a breakdown of the expression in case you need to modify it. Tread lightly:

• ( start main capturing group since js regx has no lookbehind.
  • (?:url(\()|href=|src=)['"]? Start of an url. it would be safer to force url() to be properly quoted so that we can use back reference, but unfortunately your given example is not.
  • (?:[^'"\/]*\/)* Folder part of the url.
  • [^'"\/]* Part of the file name that comes before second last dot.
• ) close main group.
• \. This is the second last dot we want to get rid of.
• (?= Look behind.
  • [^\.'")]* Part of the file name that goes between second last dot and last dot.
  • \.(?:gif|png|jpe?g) Make sure the url ends in image extension.
  • ['")>}\s] Closing the url, which can be a quote, ‘)’, ‘>’, ‘}’, or spaces. Should user back reference here if possible. (Was ['"]?\b when first answered)
• ) End of look behind.