Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Highlight Keywords

Status
Not open for further replies.

dymadarlin

Programmer
Jun 26, 2003
41
0
0
CA
Many of the websites are using Vibrant Media IntelliTxt, this product highlights and underlines some keywords on the page and when the user moves his mouse over it, it will show some stuff, I think Tek-Tips is using that too, seee => Programmer <=, I'm looking for a similar thing that could highlight some keywords of my own and make them hyperlinks to the directions that I specify.

Does anyone know such a thing?
 
None around that I know of... but here's a quick and dirty example of one way of doing it that you can kick around:
Code:
<html>
<head>
<title>Keyword Highlight Demo</title>
<script>
//List of keywords to make into links
var keywordList = new Array("yahoo", "google", "tek-tips");
//List of URLs to redirect to
//Make sure they line up with your keywords
var URLList = new Array("[URL unfurl="true"]http://www.yahoo.com",[/URL]
                        "[URL unfurl="true"]http://www.google.com",[/URL]
                        "[URL unfurl="true"]http://www.tek-tips.com");[/URL]
//List of target Elements to search for text
var targetList = new Array("docBody1", "docBody3");

//Main search & replace function
function keywordHighlight(){
 //Loop through the list of target objects
 for(var i = 0; i < targetList.length; i++){
  var currTarget = document.getElementById(targetList[i]);
  if(currTarget != null){
   // get their current HTML
   var currHTML = currTarget.innerHTML;
   //loop throught the keywords
   for(var j = 0; j < keywordList.length; j++){
    //create a regular expression for the keyword
    var regex = new RegExp(keywordList[j],"gi");
	//create an anchor link to replace the keyword with
	var linkText = "<a href=\"" + 
                       URLList[j] + "\">" + 
                       keywordList[j] + "</a>";
	//do the replace
	currHTML = currHTML.replace(regex, linkText);
   }
   // put the replaced HTML back into the object
   currTarget.innerHTML = currHTML;
  }
 }
}
</script>
</head>
<body onload="keywordHighlight()">
<div id="docBody1">
The yahoo text google here tek-tips should yahoo be google replaced.
</div>
<div id="docBody2">
The yahoo text google here tek-tips should yahoo be google left tek-tips alone.
</div>
<div id="docBody3">
The yahoo text google here tek-tips should yahoo also google be tek-tips replaced.
</div>
</body>
</html>

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
[/sub]
 
<after digging for some time...>

Try this, function highlightSearchTerms(): thread216-840446.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top