Regex to find word on page including inside tags.

Question

Thanks to Chetan Sastry I have this Regex code to parse my page for a list of words and add the TM to them.

var wordList = ["jQuery UI", "jQuery", "is"];
var regExp = new RegExp("\\b" + wordList.join("\\b|\\b") + "\\b", "g");
var $elem = $("#divWithText");
$elem.html($elem.html().replace(regExp, "$&™"));

This Regex is almost what I need. However, with a link that looks like:

<a href="/0/products/jQuery">jQuery</a>

It ends up appending the TM to the jQuery inside of the href and NOT the one between the tags.

Can anyone help out with this?

The list of words that I'll be looking for is very specific product names, and the only place they might appear inside of a tag is inside of a link like this.

Answer 1

The only reliable way to accomplish this is to step through each child descendant and, if it's a text node, then run the replacement.

Implementations:

• http://benalman.com/projects/jquery-replacetext-plugin/
• http://james.padolsey.com/javascript/find-and-replace-text-with-javascript/

Doing it your way, not only do you run the risk of inadvertently replacing actual HTML, but you also wipe any DOM elements within the targeted element, and any corresponding event handlers.

Answer 2

what about adding "jQuery</a>" and "jQuery UI</a>" to your list of search terms? (You'll need to escape the special characters for RegEx to work properly but it might be an easier (if less elegant) solution.)

Answer 3

If you are only trying to replace words within a link then the following should work:

var wordList = ["jQuery UI", "jQuery", "is"];
var regExp = new RegExp("\\b" + wordList.join("\\b|\\b") + "\\b", "g");
var $elem = $("#divWithText a");
$elem.html($elem.html().replace(regExp, "$&™"));

Answer 4

J-P linked to some good utilities for the job.

With straight jQuery:

$elem
  .contents()
  .filter(function() {
    return this.nodeType == Node.TEXT_NODE;
  })
  .each(function(){
    $(this).text($(this).text().replace(regExp, "$&™"));
  });

(SEE http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery/298758#298758)