JavaScript Text Highlighting


/ Published in: JavaScript
Save to your folder(s)

All credit goto author. Not me.


Copy this code and paste it in your HTML
  1. /*
  2.  * This is the function that actually highlights a text string by
  3.  * adding HTML tags before and after all occurrences of the search
  4.  * term. You can pass your own tags if you'd like, or if the
  5.  * highlightStartTag or highlightEndTag parameters are omitted or
  6.  * are empty strings then the default <font> tags will be used.
  7.  */
  8. function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag)
  9. {
  10. // the highlightStartTag and highlightEndTag parameters are optional
  11. if ((!highlightStartTag) || (!highlightEndTag)) {
  12. highlightStartTag = "<font style='color:blue; background-color:yellow;'>";
  13. highlightEndTag = "</font>";
  14. }
  15.  
  16. // find all occurences of the search term in the given text,
  17. // and add some "highlight" tags to them (we're not using a
  18. // regular expression search, because we want to filter out
  19. // matches that occur within HTML tags and script blocks, so
  20. // we have to do a little extra validation)
  21. var newText = "";
  22. var i = -1;
  23. var lcSearchTerm = searchTerm.toLowerCase();
  24. var lcBodyText = bodyText.toLowerCase();
  25.  
  26. while (bodyText.length > 0) {
  27. i = lcBodyText.indexOf(lcSearchTerm, i+1);
  28. if (i < 0) {
  29. newText += bodyText;
  30. bodyText = "";
  31. } else {
  32. // skip anything inside an HTML tag
  33. if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {
  34. // skip anything inside a <script> block
  35. if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) {
  36. newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;
  37. bodyText = bodyText.substr(i + searchTerm.length);
  38. lcBodyText = bodyText.toLowerCase();
  39. i = -1;
  40. }
  41. }
  42. }
  43. }
  44.  
  45. return newText;
  46. }
  47.  
  48.  
  49. /*
  50.  * This is sort of a wrapper function to the doHighlight function.
  51.  * It takes the searchText that you pass, optionally splits it into
  52.  * separate words, and transforms the text on the current web page.
  53.  * Only the "searchText" parameter is required; all other parameters
  54.  * are optional and can be omitted.
  55.  */
  56. function highlightSearchTerms(searchText, treatAsPhrase, warnOnFailure, highlightStartTag, highlightEndTag)
  57. {
  58. // if the treatAsPhrase parameter is true, then we should search for
  59. // the entire phrase that was entered; otherwise, we will split the
  60. // search string so that each word is searched for and highlighted
  61. // individually
  62. if (treatAsPhrase) {
  63. searchArray = [searchText];
  64. } else {
  65. searchArray = searchText.split(" ");
  66. }
  67.  
  68. if (!document.body || typeof(document.body.innerHTML) == "undefined") {
  69. if (warnOnFailure) {
  70. alert("Sorry, for some reason the text of this page is unavailable. Searching will not work.");
  71. }
  72. return false;
  73. }
  74.  
  75. var bodyText = document.body.innerHTML;
  76. for (var i = 0; i < searchArray.length; i++) {
  77. bodyText = doHighlight(bodyText, searchArray[i], highlightStartTag, highlightEndTag);
  78. }
  79.  
  80. document.body.innerHTML = bodyText;
  81. return true;
  82. }
  83.  
  84.  
  85. /*
  86.  * This displays a dialog box that allows a user to enter their own
  87.  * search terms to highlight on the page, and then passes the search
  88.  * text or phrase to the highlightSearchTerms function. All parameters
  89.  * are optional.
  90.  */
  91. function searchPrompt(defaultText, treatAsPhrase, textColor, bgColor)
  92. {
  93. // This function prompts the user for any words that should
  94. // be highlighted on this web page
  95. if (!defaultText) {
  96. defaultText = "";
  97. }
  98.  
  99. // we can optionally use our own highlight tag values
  100. if ((!textColor) || (!bgColor)) {
  101. highlightStartTag = "";
  102. highlightEndTag = "";
  103. } else {
  104. highlightStartTag = "<font style='color:" + textColor + "; background-color:" + bgColor + ";'>";
  105. highlightEndTag = "</font>";
  106. }
  107.  
  108. if (treatAsPhrase) {
  109. promptText = "Please enter the phrase you'd like to search for:";
  110. } else {
  111. promptText = "Please enter the words you'd like to search for, separated by spaces:";
  112. }
  113.  
  114. searchText = prompt(promptText, defaultText);
  115.  
  116. if (!searchText) {
  117. alert("No search terms were entered. Exiting function.");
  118. return false;
  119. }
  120.  
  121. return highlightSearchTerms(searchText, treatAsPhrase, true, highlightStartTag, highlightEndTag);
  122. }

URL: http://www.google.com/url?sa=t&source=web&cd=1&ved=0CBMQFjAA&url=http%3A%2F%2Fwww.nsftools.com%2Fmisc%2FSearchAndHighlight.htm&ei=5ubBTOG1DYS8sQOEvKyHDA&usg=AFQjCNFJzK-m7eM0Qm61GyVk7vTaNupCKQ&sig2=ExaxTjTs2VpXhRQ2ghjs2w

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.