JavaScript文本突出显示

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript文本突出显示相关的知识,希望对你有一定的参考价值。

All credit goto author. Not me.
  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. }

以上是关于JavaScript文本突出显示的主要内容,如果未能解决你的问题,请参考以下文章

HTML 文本框,自动突出显示文本

使用 JavaScript/jQuery 根据突出显示的文本返回 CSS 选择器列表

使用javascript按下开始按钮时,我应该如何突出显示textarea中的文本?

javascript 突出显示文本#js

javascript 突出显示文本#js

JavaScript文本突出显示