PDA

Click to See Complete Forum and Search --> : How to highlite text?

britinusa
10-30-2004, 10:20 AM
I'm (relatively) new to JS and would like to know how to make hilites in a given HTML document.

Example, including a URL parm like ?hilite=and,again

I then want to comb the page for the words "and" and "again" and replace them with <span style...>and</span>

It's probably SO easy and most reading this are ... "is he that new?"

Thanks for your help!
Vladdy
10-30-2004, 10:41 AM
Proper place for this functionality is on the server side.
Charles
10-30-2004, 10:44 AM
Originally posted by Vladdy
Proper place for this functionality is on the server side. And by far the easier and more certain.
britinusa
10-30-2004, 10:58 AM
Actually, that's what I AM doing right now. But it's a kludge. Sooner implement something like a Google bar so you can toggle the highlighting feature?
Code is ColdFusion and it's then (obviously) going through IIS.
Probably use a COM object?

Robert
Charles
10-30-2004, 11:49 AM
Keep the server side script but use it to mark text with an EM element instead.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">
<!--
body {
background-color:Menu;
color:MenuText;
}

em.highlight {
background-color:InfoBackground;
color:InfoText;
}
-->
</style>
</head>
<body>

<script type="text/javascript">
<!--
document.write ('<button id="highlight">Highlighting on</button>');
document.getElementById ('highlight').onclick = function () {
var e, i = 0;
while (e = document.getElementsByTagName('EM')[i++]) {e.className = /off/i.test (this.firstChild.data) ? '' : 'highlight'};
this.firstChild.data = /off/i.test (this.firstChild.data) ? 'Highlighting on' : 'Highlighting off';
}
// -->
</script>

<p>O, say can <em>you</em> see by the dawn's early light?</p>
</body>
</html>
britinusa
10-30-2004, 12:33 PM
Don't think I made myself clear.

I do need to get away from the server side cause ...
the hilighting comes as a result of a search page. DOH! ... and we have various links that make up our site based on content type (Members, Locations, Departments, COmpanies, etc.), each of which template needs to build the relevant hilite, etc. Sooner just do it once in JS using onLoad. Cannot beleive it would be THAT slow?

Robert
Charles
10-30-2004, 12:48 PM
Changing the document tree once it is built is way too hard and way inaccessible. The way to go is to properly mark up your page. Perhaps you want to give the members of each category a class name. I'd need to better understand how you information is organized to tell you. Once you have that then it is way easy to just step through the tree and change the presentation. If you're talking about inserting elements then you are talking about changing the tree. The DOM level 1 way would be to toggle class names between, say, "members" and "members-highlighted". I've given you an example above and you'll note that it allows you to easily impliment an audio version.