Userscripts.org

My script highlights selected words on a page. Unfortunately, it also finds similar words in various tags, and that breaks the page to a small degree. Since the best I can do is airlift JS code, I need you experts to make it work right. Here is the code...

var word = [
["term1"],
["term2"],
];

var body = document.body.innerHTML, i=0;
for (i = 0; i < (word.length); i++)
body = body.replace(new RegExp( word[i], "gi" ), "<font>"+ word[i] + "</font>")
document.body.innerHTML = body

I look forward to a working solution!

You shouldn't replace the innerHTML of the body, because you may invalidate the structure of document. It may also clear all the event handlers and other JS dynamic stuff.

Instead you need to search through text nodes and only modify parent's innerHTML

function highlightWord(w) {
	textNodes = document.evaluate("//text()[contains(., '" + w + "')]", document, null, 7, null);
	for (t=0; t<textNodes.snapshotLength; t++) {
		tn = textNodes.snapshotItem(t);
		tn.parentNode.innerHTML = tn.parentNode.innerHTML.replace(new RegExp(w, "gi"), "<font>"+ w +"</font>");
	}
}

var word = [
	["term1"],
	["term2"]
];

for (i=0; i<word.length; i++) {
	highlightWord(word[i]);
}

If you go to the Scripts tab on this site and search for highlight text, you will find several scripts that use different techniques for this. Some of them require (@require) another script to create their UI to enter the words to highlight; if you have your own UI, you can ignore that part.

AmpliDude, what you say sounds great but the script provided doesn't work. Am I missing something?

Jefferson, I'm wanting something where I just list my words. What I've found seems to be overly complicated.

Sorry i kinda copied what you have wrote in 1st post

The array should look like this

var word = [
	"term1",
	"term2"
];

Hmmm. Still not working for me. Did it work for you?

Yes it worked. Most probably the problem is with XPath - it's case sensitive. If you define "term1" as word, it won't find "Term1" or "TERM1".
You may try this solution:

function highlightWord(w) {
	textNodes = document.evaluate("//text()[contains(translate(.,'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), translate('" + w + "', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'))]", document, null, 7, null);
	for (t=0; t<textNodes.snapshotLength; t++) {
		tn = textNodes.snapshotItem(t);
		tn.parentNode.innerHTML = tn.parentNode.innerHTML.replace(new RegExp(w, "gi"), "<font>"+ w +"</font>");
	}
}

No wonder I didn't see it. My style in the <font> didn't come through. My bad. I have

function highlightWord(w) {
	textNodes = document.evaluate("//text()[contains(translate(.,'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), translate('" + w + "', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'))]", document, null, 7, null);
	for (t=0; t<textNodes.snapshotLength; t++) {
		tn = textNodes.snapshotItem(t);
		tn.parentNode.innerHTML = tn.parentNode.innerHTML.replace(new RegExp(w, "gi"), "<font style='background:#ffff00;color:#000000;'>"+ w +"</font>");
	}
}

Works MUCH better. Use your script with the term "highlight" on this page and see what happens the title tag presentation (in Firefox's titlebar). I have also seen some alt tags being affected. If you know the way around that, I'd think it would be complete.

Thank you so much for making this case insensitive!</font>

I also just found the

<font></font>