removeNode() for a dynamic div doesn't work in firefox

[Tim Mackey]

hi,
i have a javascript function to highlight google search keywords in the
page. it works well on IE and mozilla browsers. for the page OnLoad, i
call the Highlight() method, and that highlights the words in the page, and
inserts a div element with the message: "your search terms have been
highlighted..." and a link to remove the highlighting, which has
href='javascript:removeHighlight(..)', but that only works in IE, not
firefox 1.0.

am i using an IE-only javascript feature? the code from the javascript file
is below, and if you'd like to see it in action, go to
http://www.google.ie/search?num=100&hl=en&q=adaptive+software+iserc and
click the first link (at time of writing it is www.iserc.ie/diary/2004/
november5isercworkshopadaptivesoftware/) . you need to go through google to
get the referrer. you should see the message at the top when the page
loads, and clicking the link should remove the highlighting and message.

i've done as much debugging as i can, and the RemoveHighlight function is
executing, and it does return the HighlightMsg div with the getElementByID
function correctly. it's just that RemoveNode does nothing to it for
firefox, but it works in IE.

thanks for any help
tim mackey. code below.

function Highlight(element)
{
...
//Replace search words
var msg = "<div id='HighlightMsg'>Your search terms have been highlighted:
";
var color = 0;
var max = 5;
for(j=0; j<aWords.length; j++)
{
regexp= new RegExp ("(" + aWords[j] + ")", "gi");
vStrippedHTML = vStrippedHTML.replace(regexp,'<span class="hl' + color+
'">$1</span>');
// build up message notifying user of highlighting
msg = msg + "<span class='hl" + color+ "'>" + aWords[j] + "</span> ";
color++;
}
//Reinsert HTML
for(i=0;vStrippedHTML.indexOf("$!$") > -1;i++)
vStrippedHTML = vStrippedHTML.replace("$!$", vHTMLArray);
msg = msg + " - <a
href='javascript:RemoveHighlight(document.getElementById(\"HTML\"))'>Remove
Highlighting</a></div>";
element.innerHTML = msg + vStrippedHTML;
}

function RemoveHighlight(element)
{
document.getElementById("HighlightMsg").removeNode(true);
regexp=/(<span class\=hl\d>)([^<>]*)(<\/span>)/ig;
element.innerHTML = element.innerHTML.replace(regexp, "$2");
}
window.onload=function(){Highlight(document.getElementById("HTML"));};




\\ email: tim at mackey dot ie //
\\ blog: http://tim.mackey.ie //
67d0ebfec70e8db3

 

[Martin Honnen]

Tim Mackey wrote:

a link to remove the highlighting, which has
href='javascript:removeHighlight(..)', but that only works in IE, not
firefox 1.0.

function RemoveHighlight(element)
{
document.getElementById("HighlightMsg").removeNode(true);

Mozilla doesn't know a removeNode method, you probably want
var el = document.getElementById("HighlightMsg");
el.parentNode.removeChild(el);

regexp=/(<span class\=hl\d>)([^<>]*)(<\/span>)/ig;
element.innerHTML = element.innerHTML.replace(regexp, "$2");

I haven't looked at that deeply but innerHTML manipulation is a gamble,
it seems your regular expression expects the class attribute value to
not be quoted, IE might give innerHTML that way, but Mozilla might have
the value quoted so you need to write a regular expression catering to
both ways.

 

[Martin Honnen]

Martin Honnen wrote:

it seems your regular expression expects the class attribute value to
not be quoted, IE might give innerHTML that way, but Mozilla might have
the value quoted so you need to write a regular expression catering to
both ways.

The following regular expression might do that:
var regExp = /<span class=("?)h1\d+\1>([^<>]*)<\/span>/gi;
but I haven't tried to intergrate it in your innerHTML manipulation code.

 

[Tim Mackey]

martin you are a genius. i implemented both your suggestions and it works
perfectly now. thanks!

for anyone who wants to use the code, (it works quite nicely because there
is no server side processing), i have included the updated version below.
just save it into a .js file, and include it in any pages that you want to
support keyword highlighting.

function Highlight(element)
{
var aWords;
var ref = document.referrer;
if(ref == null || ref == "")
return;
var sets = ref.split('&');
for(i=0; i<sets.length; i++)
if(sets.indexOf("q=") > -1)
aWords = sets.split('=')[1].split('+');
if(aWords == null || aWords.length == 0)
return;
//Extract HTML Tags
regexp=/<[^<>]*>/ig;
vHTMLArray = element.innerHTML.match(regexp);
//Replace HTML tags
vStrippedHTML = element.innerHTML.replace(regexp,"$!$");

//Replace search words
var msg = "<div id='HighlightMsg'>Your search terms have been highlighted:
";
var color = 0;
var max = 5;
for(j=0; j<aWords.length; j++)
{
regexp= new RegExp ("(" + aWords[j] + ")", "gi");
vStrippedHTML = vStrippedHTML.replace(regexp,'<span class="hl' + color+
'">$1</span>');
// build up message notifying user of highlighting
msg = msg + "<span class='hl" + color+ "'>" + aWords[j] + "</span> ";
color++;
}
//Reinsert HTML
for(i=0;vStrippedHTML.indexOf("$!$") > -1;i++)
vStrippedHTML = vStrippedHTML.replace("$!$", vHTMLArray);
msg = msg + " - <a
href='javascript:RemoveHighlight(document.getElementById(\"HTML\"))'>Remove
Highlighting</a></div>";
element.innerHTML = msg + vStrippedHTML;
}

function RemoveHighlight(element)
{
var msgDiv = document.getElementById("HighlightMsg");
msgDiv.parentNode.removeChild(msgDiv);
regexp=/(<span class\="?hl\d"?>)([^<>]*)(<\/span>)/ig;
element.innerHTML = element.innerHTML.replace(regexp, "$2");
}
window.onload=function(){Highlight(document.getElementById("HTML"));};