SearchHi

JavaScriptSource Staff May 10, 2006

Automatically highlight words on a page when that page was reached by a search engine. If you search, for example, Google for some words, and then follow a link from the search results to a searchhi enabled page, the words you searched for will be highlighted on that page.

The JavaScript Source: Miscellaneous : SearchHi

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

.searchword {
  background-color: #FFF79F;
}

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Stuart Langridge :: http://www.kryogenix.org/ */

// Licenced under the MIT licence

function highlightWord(node,word) {
  // Iterate into this nodes childNodes
  if (node.hasChildNodes) {
    var hi_cn;
    for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) {
      highlightWord(node.childNodes[hi_cn],word);
    }
  }

// And do this node itself
  if (node.nodeType == 3) { // text node
    tempNodeVal = node.nodeValue.toLowerCase();
    tempWordVal = word.toLowerCase();
    if (tempNodeVal.indexOf(tempWordVal) != -1) {
      pn = node.parentNode;
      if (pn.className != "searchword") {
        // word has not already been highlighted!
        nv = node.nodeValue;
        ni = tempNodeVal.indexOf(tempWordVal);
        // Create a load of replacement nodes
        before = document.createTextNode(nv.substr(0,ni));
        docWordVal = nv.substr(ni,word.length);
        after = document.createTextNode(nv.substr(ni+word.length));
        hiwordtext = document.createTextNode(docWordVal);
        hiword = document.createElement("span");
        hiword.className = "searchword";
        hiword.appendChild(hiwordtext);
        pn.insertBefore(before,node);
        pn.insertBefore(hiword,node);
        pn.insertBefore(after,node);
        pn.removeChild(node);
      }
    }
  }
}

window.onload = googleSearchHighlight;

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

SearchHi

Leave a Response

Attention JavaScript Coders

Go Deeper