Question

Trying to replace certain words in HTML pages with the same word but as a URL linking to that resource.
For example, replace the word ‘MySQL’ with <a href="http://mysql.com">MySQL</a>

Using the JS replace function with regex, and it’s doing the replacing just fine.

BUT it’s also replacing words that are already part of URLs… which is the problem.

For the MySQL example, it’s replacing BOTH the “MySQL” text that’s already linked, AND the URL leading to mysql.com, so breaking the already existing link.

Is there a way to update the inline regex (in the .replace call) to NOT do replacing in existing links, i.e. elements?

Here’s the replace code:

var NewHTML = OriginalHTML
.replace(/\bJavaScript\b/gi, "<a href=\"http://js.com/\">$&</a>")
.replace(/\bMySQL\b/gi, "<a href=\"http://www.mysql.com/\">$&</a>")
;

Here’s the full sample code (tried to paste it inline but wasn’t looking right with the backticks):
http://pastie.org/private/v4l2s2c42aqduqlopurpw

Went through the JS regexp reference (here), and tried various other permutations in the regex matching, like the following, but all that does it make it not match ANY words on the page…
.replace(/\b(\<a\>*!\>)JavaScript\b/i,xxxxx

The following regex DOES prevent the match from happening wherever the word is literally touching a slash or a dash… but that’s not the solution (and it does not fix the mysql example above):

.replace(/\b(?!\>)(?!\-)(?!\/)MySQL\b(?!\-)(?!\/)/gi, "<a href=\"http://www.mysql.com/\">$&</a>")`

I’ve read through the related threads on stackoverflow and elsewhere, but can’t seem to find this particular scenario, not in JavaScript anyway.

Any help would be greatly appreciated. 🙂

Thanks!

Answer 1

You could change your regex to exclude keywords that precede the end anchor tag, </a>:

.replace(/\bMySQL\b(?![^<]*?<\/a>)/gi, "<a href=\"http://www.mysql.com/\">$&</a>")

See jsfiddle for example.