高亮显示相似单词字符串中的特定单词

Question

There are some similar words in a string and I need to highlight only one word out of it. I have index value of this specific word. I'm using Mark JS for this. I need to do this in filter part of mark JS function. But not sure how will I get index value of each word while filtering.

Here is the fiddle to test

Code 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

The filter should return the current index that you want to mark:

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

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

so if you put currentIndex = 0 it will select the first matching and so on ...

Answer 2

Refer this Link.

it may help u

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

Your question: not sure how will I get index value of each word while filtering?

The Mark JS documentation read as follows:

A callback to filter or limit matches. It will be called for each match and receives the following parameters:

1. The text node which includes the match
2. The term that has been found
3. A counter indicating the total number of all marks at the time of the function call
4. A counter indicating the number of marks for the term

The function must return false if the mark should be stopped, otherwise true.

In order words: the for forth parameter is the counter(index) of each word found.