

function highlight( search) {
  // Get <b style="color: black; background-color: rgb(160, 255, 255);">search</b> string
  
    var searchString = getSearchString(search);
    // Starting node, parent to all nodes you want to <b style="color: black; background-color: rgb(160, 255, 255);">search</b>
    var textContainerNode = document.getElementById("mainPanel");

    // Informational message for <b style="color: black; background-color: rgb(160, 255, 255);">search</b>
    var searchInfo = '<b style="color: black; background-color: rgb(160, 255, 255);">Search</b> <b style="color: black; background-color: rgb(153, 255, 153);">Results</b> for: ';

    // Split <b style="color: black; background-color: rgb(160, 255, 255);">search</b> terms on '|' and iterate over resulting array
    var searchTerms = searchString.split('|');
    for (var i in searchTerms) 	{
      // The regex is the secret, it prevents text within tag declarations to be affected
      var regex = new RegExp(">([^<]*)?("+searchString+")([^>]*)?<","ig");
      highlightTextNodes(textContainerNode, regex, i);
      // Add to info-string
      searchInfo += ' <span class="searchHighlight">'+searchString+'</span> ';
    }

    
    // Insert as very first child in searched node
    
    
      // Informational message for <b style="color: black; background-color: rgb(160, 255, 255);">search</b>
  var searchInfo = '<b style="color: black; background-color: rgb(160, 255, 255);">Search</b> <b style="color: black; background-color: rgb(153, 255, 153);">Results</b> for: ';

  // Split <b style="color: black; background-color: rgb(160, 255, 255);">search</b> terms on '|' and iterate over resulting array
  var searchTerms = searchString.split('|');
  for (var i in searchTerms) 	{
    // The regex is the secret, it prevents text within tag declarations to be affected
    var regex = new RegExp(">([^<]*)?("+searchString+")([^>]*)?<","ig");
    highlightTextNodes(textContainerNode, regex, i);
    // Add to info-string
    searchInfo += ' <span class="searchHighlight">'+searchString+'</span> ';
  }

  // Create div describing the <b style="color: black; background-color: rgb(160, 255, 255);">search</b>
  var searchTermDiv = document.createElement("H2");
  searchTermDiv.className = 'searchterms';
  searchTermDiv.innerHTML = searchInfo;

  // Insert as very first child in searched node

    
  
}

// Pull the <b style="color: black; background-color: rgb(160, 255, 255);">search</b> string out of the URL
function getSearchString( string) {
  // Return sanitized <b style="color: black; background-color: rgb(160, 255, 255);">search</b> string if it exists
  var rawSearchString = string;
  // Replace '+' with '|' for regex
  // Also replace '%20' if your cms/blog uses this instead (credit to erlando for adding this)
  return rawSearchString.replace(/\%20|\+/g,"\|");
}

function highlightTextNodes(element, regex, termid) {
  var tempinnerHTML = element.innerHTML;
  // Do regex replace
  // Inject span with class of 'highlighted termX' for google style highlighting
  element.innerHTML = tempinnerHTML.replace(regex,'>$1<span class="searchHighlight">$2</span>$3<');
}

// Call this onload, I recommend using the function defined at: http://untruths.org/technology/javascript-windowonload/

