JavaScript文本突出显示
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript文本突出显示相关的知识,希望对你有一定的参考价值。
All credit goto author. Not me.
/* * This is the function that actually highlights a text string by * adding html tags before and after all occurrences of the search * term. You can pass your own tags if you'd like, or if the * highlightStartTag or highlightEndTag parameters are omitted or * are empty strings then the default <font> tags will be used. */ function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag) { // the highlightStartTag and highlightEndTag parameters are optional if ((!highlightStartTag) || (!highlightEndTag)) { highlightStartTag = "<font style='color:blue; background-color:yellow;'>"; highlightEndTag = "</font>"; } // find all occurences of the search term in the given text, // and add some "highlight" tags to them (we're not using a // regular expression search, because we want to filter out // matches that occur within HTML tags and script blocks, so // we have to do a little extra validation) var newText = ""; var i = -1; var lcSearchTerm = searchTerm.toLowerCase(); var lcBodyText = bodyText.toLowerCase(); while (bodyText.length > 0) { i = lcBodyText.indexOf(lcSearchTerm, i+1); if (i < 0) { newText += bodyText; bodyText = ""; } else { // skip anything inside an HTML tag if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) { // skip anything inside a <script> block if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) { newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag; bodyText = bodyText.substr(i + searchTerm.length); lcBodyText = bodyText.toLowerCase(); i = -1; } } } } return newText; } /* * This is sort of a wrapper function to the doHighlight function. * It takes the searchText that you pass, optionally splits it into * separate words, and transforms the text on the current web page. * Only the "searchText" parameter is required; all other parameters * are optional and can be omitted. */ function highlightSearchTerms(searchText, treatAsPhrase, warnOnFailure, highlightStartTag, highlightEndTag) { // if the treatAsPhrase parameter is true, then we should search for // the entire phrase that was entered; otherwise, we will split the // search string so that each word is searched for and highlighted // individually if (treatAsPhrase) { searchArray = [searchText]; } else { searchArray = searchText.split(" "); } if (!document.body || typeof(document.body.innerHTML) == "undefined") { if (warnOnFailure) { alert("Sorry, for some reason the text of this page is unavailable. Searching will not work."); } return false; } var bodyText = document.body.innerHTML; for (var i = 0; i < searchArray.length; i++) { bodyText = doHighlight(bodyText, searchArray[i], highlightStartTag, highlightEndTag); } document.body.innerHTML = bodyText; return true; } /* * This displays a dialog box that allows a user to enter their own * search terms to highlight on the page, and then passes the search * text or phrase to the highlightSearchTerms function. All parameters * are optional. */ function searchPrompt(defaultText, treatAsPhrase, textColor, bgColor) { // This function prompts the user for any words that should // be highlighted on this web page if (!defaultText) { defaultText = ""; } // we can optionally use our own highlight tag values if ((!textColor) || (!bgColor)) { highlightStartTag = ""; highlightEndTag = ""; } else { highlightStartTag = "<font style='color:" + textColor + "; background-color:" + bgColor + ";'>"; highlightEndTag = "</font>"; } if (treatAsPhrase) { promptText = "Please enter the phrase you'd like to search for:"; } else { promptText = "Please enter the words you'd like to search for, separated by spaces:"; } searchText = prompt(promptText, defaultText); if (!searchText) { alert("No search terms were entered. Exiting function."); return false; } return highlightSearchTerms(searchText, treatAsPhrase, true, highlightStartTag, highlightEndTag); }
以上是关于JavaScript文本突出显示的主要内容,如果未能解决你的问题,请参考以下文章
使用 JavaScript/jQuery 根据突出显示的文本返回 CSS 选择器列表