Add TM to text with jQuery?

I need a way to go through all开发者_JS百科 the text on my page, including links and other controls and find words that are in a certain list and add the html character entity ™ (™) to them. I need this to be fast too. The list is held in a javascript array. I've already got code using .each to find all Links on the page with text from that list, but it's noticeably slow and I don't like that.

Any better, more efficient ways to do this?

EDIT

People are suggesting other alternatives (server-side, css, etc.) We can't use those because these words are in URL's all over the site. We would mess up our URL's all over the site. We are using DotNetNuke to do this and the client just told us today that every time their products appear on the entire site (including links) they want them to be in all caps and have TM appended. If we change the products in the database, all the links suddenly have "trade" appended to the end of them. The nature of DNN says that we can't do this server-side. We could go through and manually change it in each page...but the site is 1,900+ pages...... SO! Client side is the route we want to go.

---

You could do something like that :

$body = jQuery("body");
var words= ["blah", "blog", "blig"];
for(var i=0; i< words.size; i++){
   $body.replace(words[i],words[i]+"&trade");
}

edit: using a "for" loop instead of foreach or .each will slightly increase the rendering time as explained in this google tech talk.

BUT I wouldn't do it and try a server side solution instead.

Browsing all the nodes to find a particular word is crazyly expensive in term of processing power. The loading time will also highly depend on the computer of the client.

---

Do it server side, always the fastest - and most reliable.

---

Do a regex search/replace. In theory, this should be faster than marcgg's method since you are touching DOM only once.

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

Caveat:

1. This will also nuke any scripts that may be inside the div since the script elements are not re-parsed.
2. Same applies to any html tag that matches your regex.

---

You could also use CSS, though you'd need to wrap each occurrence of the name in an HTML tag:

.tm:after {
  /* HTML entities don't work here but unicode entities like \u0123 do */
  content: "™"; 
}

Lorem ipsum <span class="tm">The Company</span> etc etc

The advantage being you can easily change styles, colours etc.

---

I don't know .NET but it must be possible to somehow do this on client side without having to tinker with the framework itself. A client side solution sounds really really bad to my ears.

In PHP, you can hold the output buffer and do operations on it before it is flushed. There must be something like that. A Regex or DOM operation that replaces all content outside tags (and, possibly, inside alt attributes as well) should work quickly and cleanly.

In addition to what has already been written two more downsides to the JS approach come to mind:

• Product names get indexed in search engines without TMs.
• The <title> tag would have to be changed as well