Demo

Question

我需要通过选择字符串突出显示特定div中字符串的所有出现次数，一旦我选择一个单词并单击一个按钮，就需要在div中突出显示它的所有内容，

例如 - 如果我选择

板球是比赛

它应该突出所有板球比赛的发生一些可能是这样的板球是游戏或板球 是游戏

enter image description here

Answer 1

您可以让浏览器使用IE中的TextRange和其他浏览器中的window.find()为您完成繁重的工作。

This answer显示了如何做到这一点。它将匹配跨越元素边界的文本，并使用document.execCommand()为您突出显示。

另外，James Padolsey最近发布了一个我没有使用的脚本，但看起来它可以提供帮助：http://james.padolsey.com/javascript/replacing-text-in-the-dom-solved/

Answer 2

mark.js似乎相当不错。这是我的3行小提琴，可以使用html＆＃39;字符串＆＃39;并突出显示搜索字符串。

$(document).ready(function() {
    var html_string = "<b>Major Tom to groundcontrol.</b> Earth is blue <span> and there's something </span> i can do";

    var with_highlight = $("<div/>").html(html_string).mark("can");

    $("#msg").html(with_highlight);
})

Link to jsfiddle

Answer 3

您可以试用此脚本

Demo

在highlightSearchTerms这个脚本var bodyText = document.body.innerHTML;的函数中，你的divid会替换它，而不是为你做任务。

/*
 * 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);
}

Answer 4

这应该让你开始：http://jsfiddle.net/wDN5M/

function getSelText() {
  var txt = '';
  if (window.getSelection) {
    txt = window.getSelection();
  } else if (document.getSelection) {
        txt = document.getSelection();
  } else if (document.selection) {
    txt = document.selection.createRange().text;
  }
  document.getElementById('mydiv').innerHTML = document.getElementById('mydiv').innerHTML.split(txt).join('<span class="highlight">' + txt + '</span>');
}

请参阅：Get selected text on the page (not in a textarea) with jQuery

如果您希望它跨元素边界工作，那么您的代码需要更多地参与其中。在进行必要的DOM遍历和操作时，jQuery将使您的生活更轻松。

Answer 5

我会使用jQuery迭代div中的所有元素（不知道div中是否有其他元素）然后使用正则表达式并执行贪婪匹配以查找文本中所有出现的选定字符串（s）元素。

Answer 6

首先，您需要在所需文本中找到所需的子字符串，并使用＆lt; span class =“search-highlight”＆gt;进行包装。每次你需要突出显示另一个字符串时，你只需获得所有.search-highlight跨度并将其outerHtml转换为innerHtml。所以代码将接近：

function highLight(substring, block) {
   $(block).find(".search-highlight").each(function () {
      $(this).outerHtml($(this).html());
   });
   // now the block is free from previous highlights

   $(block).html($(block).html().replace(/substring/g, '<span class="search-highlight">' + substring + '</span>'));
}

Answer 7

<form id=f1 name="f1" action="" 
onSubmit="if(this.t1.value!=null && this.t1.value!='')
findString(this.t1.value);return false"
>
<input type="text" id=t1 name=t1size=20>
<input type="submit" name=b1 value="Find">
</form>
<script>
var TRange=null;

function findString (str) {
 if (parseInt(navigator.appVersion)<4) return;
 var strFound;
 if (window.find) {

  // CODE FOR BROWSERS THAT SUPPORT window.find

  strFound=self.find(str);
  if (!strFound) {
   strFound=self.find(str,0,1);
   while (self.find(str,0,1)) continue;
  }
 }
 else if (navigator.appName.indexOf("Microsoft")!=-1) {

  // EXPLORER-SPECIFIC CODE

  if (TRange!=null) {
   TRange.collapse(false);
   strFound=TRange.findText(str);
   if (strFound) TRange.select();
  }
  if (TRange==null || strFound==0) {
   TRange=self.document.body.createTextRange();
   strFound=TRange.findText(str);
   if (strFound) TRange.select();
  }
 }
 else if (navigator.appName=="Opera") {
  alert ("Opera browsers not supported, sorry...")
  return;
 }
 if (!strFound) alert ("String '"+str+"' not found!")
 return;
}
</script>

Answer 8

最好使用JavaScript str.replace（）函数，然后使用window.find（）来查找所有出现的过滤器值。遍历整个页面可能有点复杂，但是如果要在父div或表str.replace（）中进行搜索，则更加简单。

在您的示例中，您只有一个DIV，这甚至更简单。这就是我要做的（将您的DIV设置为ID：myDIV）：

        //Searching for "District Court"
        var filter = "District Court";  

        //Here we create the highlight with html tag: <mark> around filter
        var span = '<mark>' + filter + '</mark>';

        //take the content of the DIV you want to highlight
        var searchInthisDiv =   document.getElementById("MyDiv");
        var textInDiv       =   searchInthisDiv.innerHTML;

        //needed this var for replace function, do the replace (the highlighting)
        var highlighted     =   textInDiv.replace(filter,span); 
        textInDiv.innerHTML =   highlighted;

诀窍是将搜索字符串替换为在标签中包含过滤器的范围。 str.replace替换了所有出现的搜索字符串，因此无需理会循环。循环可用于循环遍历DIV或其他DOM元素。

如何使用java脚本突出显示div中特定字符串的所有出现？

8 个答案:

Demo