突出显示相似单词字符串中的特定单词

Question

字符串中有一些相似的词，我只需要突出显示其中的一个词。我有这个特定单词的索引值。我正在为此使用 Mark JS。我需要在标记 JS 函数的过滤器部分执行此操作。但不确定如何在过滤时获取每个单词的索引值。

这是要测试的fiddle

代码 JS

$(function() {    
    $content = $(".content"),
    currentIndex = 0;        
    var indexVal = 40;
  $('#markBtn').on("click", function() {
    var searchVal = " ipsum ";
    $content.unmark({
      done: function() {
      console.log("unmark")
        $content.mark(searchVal, {          
            "element": "span",
            "className": "mark",
            "accuracy": "partially",
            "iframes": true,
            "ignoreJoiners": true,
            "acrossElements": true,
            "separateWordSearch": true,
            "diacritics": false,
            "filter": function (textNode, foundTerm, totalCounter, counter) {
                console.log("marks - filter  " + textNode+" "+foundTerm);
            //check indexVal with foundTerm and return true
            return true;
            },
            "each": function (node) {
            console.log("marks - each  " + node);
            },
            "done": function() {
                console.log("marks - done  ");            
          }
        });

      }
    });
  });
  });

HTML

<div class="header">
  Mark second word 'ipsum' in the text below.
  <button id="markBtn">Mark Text</button>
</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur ipsum adipiscing elit ipsum.</p>
</div>

Answer 1

参考此链接。

可能对你有帮助

http://jsfiddle.net/sadhique92/HfS7e/1231/

<script>
function highlightSearch() {
    var text = document.getElementById("query").value;
    var query = new RegExp("(\\b" + text + "\\b)", "gim");
    var e = document.getElementById("searchtext").innerHTML;
    var enew = e.replace(/(<span>|<\/span>)/igm, "");
    document.getElementById("searchtext").innerHTML = enew;
    var newe = enew.replace(query, "<span>$1</span>");
    document.getElementById("searchtext").innerHTML = newe;
}
</script>

<style>
#searchtext span{
    background-color:#FF9;
    color:#555;
}

div {
    padding: 10px; 
}

</style>

<div><h2>Find and highlight text in document</h2>
<form action="" method="" id="search" name="search">
<input name="query" id="query" type="text" size="30" maxlength="30">
<input name="searchit" type="button" value="Search" onClick="highlightSearch()">
</form></div>
<div id="searchtext">
<p>JavaScript is the programming language of the Web. The overwhelming majority of
modern websites use JavaScript, and all modern web browsers—on desktops, game
consoles, tablets, and smart phones—include JavaScript interpreters, making Java-
Script the most ubiquitous programming language in history. JavaScript is part of the
triad of technologies that all Web developers must learn: HTML to specify the content
of web pages, CSS to specify the presentation of web pages, and JavaScript to specify
the behavior of web pages. This book will help you master the language.</p>
<p>If you are already familiar with other programming languages, it may help you to know
that JavaScript is a high-level, dynamic, untyped interpreted programming language
that is well-suited to object-oriented and functional programming styles. JavaScript
derives its syntax from Java, its first-class functions from Scheme, and its prototypebased
inheritance from Self. But you do not need to know any of those languages, or
be familiar with those terms, to use this book and learn JavaScript.</p>
<p>The name "JavaScript" is actually somewhat misleading. <span>Except</span> for a superficial syntactic
resemblance, JavaScript is completely different from the Java programming language.
And JavaScript has long since outgrown its scripting-language roots to become
a robust and efficient general-purpose language. The latest version of the language (see
the sidebar) defines new features for serious large-scale software development.</p>
</div>

Answer 2

过滤器应该返回您要标记的当前索引：

"filter": function (textNode, foundTerm, totalCounter, counter) {

    console.log("marks - filter  " + textNode+" "+foundTerm);
   var result = totalCounter == currentIndex;
   return result;
},

所以如果你把 currentIndex = 0 它会选择第一个匹配等等......

Answer 3

你的问题：不知道过滤时如何获取每个单词的索引值？

Mark JS 文档如下：

过滤器函数：过滤或限制匹配的回调。每次匹配都会调用它并接收以下参数：

1. 包含匹配项的文本节点
2. 已找到的词条
3. 一个计数器，指示函数调用时所有标记的总数
4. 一个计数器，指示术语的标记数

如果应该停止标记，该函数必须返回 false，否则返回 true。

换句话说：for第四个参数是找到的每个单词的计数器（索引）。