fix my "Highlight selected words" script

in Script development
Subscribe to fix my "Highlight selected words" script 9 posts, 3 voices



m) User
FirefoxWindows

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!

 
AmpliDude Scriptwright
FirefoxWindows

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]);
}

 
Jefferson Scher Scriptwright
FirefoxWindows

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.

 
m) User
FirefoxWindows

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.

 
AmpliDude Scriptwright
FirefoxWindows

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

The array should look like this

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

 
m) User
FirefoxWindows

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

 
AmpliDude Scriptwright
FirefoxWindows

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>");
	}
}

 
m) User
FirefoxWindows

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>

 
m) User
FirefoxWindows

I also just found the

<font></font>
in a text box field. :/