Highlight Search Words in Results

[Wormopolis]

Browser Tested: IE, Chrome and FF
placement: main footer


this code will remember the search words you entered on the search page and when the results come up, it will highlight them with whatever CSS you decide

code:

<style type="text/css">
.highlightresults{background-color:#FF0000;color:#FFFFFF}
</style>

<script type="text/javascript">
<!--
//  highlight search words in search results
//  by Wormopolis - www.wormocodes.com
//  v 1.52
//  do not repost - keep header intact

if (pb_action=='search') {
 function captureWords() {
   expTime=new Date();  expTime.setFullYear(expTime.setFullYear()+1);
   document.cookie='searchCapture='+escape(document.searchForm.search.value)+'; expires='+expTime;
 }
 if (document.addEventListener) {
   document.searchForm.addEventListener('submit',captureWords,true);
 } else {
   document.searchForm.attachEvent('onsubmit',captureWords);
 }
}
if (pb_action=='search2') {
 function checkChild(obj, rgxtxt) {
   if (obj.className && obj.className.match(/(code|highlightresults)/i)) return;
   if (obj.childNodes.length>1) {
     var ccn=obj.firstChild;
     while (ccn) {
       var nxtccn=ccn.nextSibling;
       checkChild(ccn, rgxtxt);
       ccn=nxtccn;
     }
   } else {
     if (obj.nodeName.match(/text/i)) {
       if (obj.nodeValue.match(rgxtxt)) {
         sp=document.createElement('span');
         //shoutout to Eton for the replace hint!
         sp.innerHTML=obj.nodeValue.replace(rgxtxt,function (str){return '<font class="highlightresults">'+str+'</font>';});
         obj.parentNode.replaceChild(sp, obj);
       }
     } else {
       if (obj.firstChild) checkChild(obj.firstChild, rgxtxt);
     }
   }
 }

 capturedWords=(document.cookie.match(/searchCapture=(.*?)($|;)/) ? RegExp.$1 : false);
 if (capturedWords) {
   capturedWords='('+(unescape(capturedWords)).split(/\s+?/).join('|')+')';
   rgxCapturedWords=new RegExp(capturedWords,'ig');
   expTime=new Date();  expTime.setFullYear(expTime.setFullYear()-1);
   document.cookie='searchCapture=null; expires='+expTime;
   for (tds=document.getElementsByTagName('td'), w=0; w<tds.length; w++) {
     if (tds[w].width=='80%') {
       for (fnt=tds[w].getElementsByTagName('font'), f=0; f<fnt.length; f++) {
         if (fnt[f].innerHTML.match(rgxCapturedWords)) {
           checkChild(fnt[f], rgxCapturedWords);
         }
       }
     }
   }
 }
}

// -->
</script>


Preview: using it on this site now

[Wormopolis]

version update 1.5: upgraded code to remove some loops and a new regexp method to make it faster.

[Wormopolis]

version update 1.51: fixed small bug caused by empty search string

[Streamstrider]

I tried using it on RS, but it's not working. . . . XD

[Wormopolis]

do you see it working on this forum?

as a guest, your entire search form is hidden for some reason.

[Streamstrider]

Yeah, it's working here on WormoCodes. Does the code already have a highlight color specified? (And I really don't know why it's not showing. I'll check it momentarily.

[Wormopolis]

th code just sets up a classname. what I use here on WC is

<style type="text/css">.highlightresults{background-color:#FF0000;color:#FFFFFF}</style>

added into global headers

[Streamstrider]

That fixed the issue. XD

[Wormopolis]

I should probably add that into the code. I guess I figured everyone would just know to do that already since CSS is so widely used.

[Streamstrider]

Yeah, but not everyone knows how to add the CSS into the headers or footers and make it work. The way you had it worded, it sounded to me like there was supposed to be a setting in the code for that. Then I could find one, and I got confused about how I was supposed to add a highlight color that specifically related to the code. xD Sometimes I make things a little too complicated. . . .

[Wormopolis]

I added in the default CSS to the top of the code. PPL can change it to how they want it to look for their forum.

[Streamstrider]

Awesomesauce. Thanks for all the help!

[Wormopolis]

version upgrade 1.52: made it work in chrome

[feeleash]

Hello!

I tried to put the script in main footer and the css in the global header but still nothing happens...

[Wormopolis]

does it work for you on THIS site? URL?