突出显示来自类似单词的特定单词字符串

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

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

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

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

所以如果你把CURRENTINDEX = 0将选择第一个匹配等等...

Answer 2

请参阅此链接。

它可以帮助ü

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 3

你的问题：不知道我将如何获得，而滤波过程中每个字的索引值？

马克JS文件的内容如下：

滤波器功能：的回调以过滤或限制相匹配。它将被称为用于每个匹配并接收下列参数：

1. 其包括该文本节点的匹配
2. 已发现
3. 计数器指示在函数调用的时间的所有标记的总数的术语
4. 指示术语标记数的计数器

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

按顺序排列：for第四个参数是找到的每个单词的计数器（索引）。