如何在上下文中搜索和突出显示字符串的每次出现

Question

我想搜索并突出显示用户在上下文中搜索的查询字符串（如果有匹配的字符串），我不太适合使用Javascript，但我可以在php中实现相同的功能，但是我需要使用javascrip来完成。曾经说过我有一个查询字符串Hello world并且我有3个上下文，其中有匹配项说1. hello world it's new day today 2. welcome to my world 3. say hello to the new world在这3个上下文中2. welcome to my world 3. say hello to the new world当一个用户提交与hellow世界的查询我想强调hello world在第一方面， world第二上下文和hello第三方面，用php我这样做，它匹配预期

function highlight_word( $content, $words, $cssClassName) {
     $q = explode(" ", $words);
     for($i =0; $i < count($q); $i++){
      $word = $q[$i];       
      $replace = "<span class='".$cssClassName."'>" . $word . '</span>'; // create replacement 
      $content = str_ireplace( $word, $replace, $content ); // replace content
     }
     return $content; // return highlighted data
 }

现在，我尝试在javascript中使用相同的想法，但是我发现它不起作用。

This first code will only match a context that has exactly the search string in the case it will match context number 1 and will not match the other



  String.prototype.replaceAll = function(searchStr) {
    var content;
    var str = this;
    var replaceStr ;

       //replace any occurence of the str with an highligthed version of the same str
       replaceStr = "<span class='kwHighlight'>"+searchStr+"</span>";
       // escape regexp special characters in search string
    searchStr = searchStr.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    content = str.replace(new RegExp(searchStr, 'gi'), replaceStr);

    return content;
};

第二个代码将只匹配上下文中最后出现的字符串，这意味着世界将在所有出现的上下文中突出显示

 String.prototype.replaceAll = function(searchStr) {
    var content;
    var str = this;
    var replaceStr ;
    //split the searchStr into an array
    var searchStrArray = searchStr.split(" ");
    for(var i=0; i <searchStrArray.length; i++){
       var replaceQ = searchStrArray[i]; 
       //replace any occurence of the str with an highligthed version of the same str
       replaceStr = "<span class='kwHighlight'>"+replaceQ+"</span>";
       // escape regexp special characters in search string
    searchStr = searchStrArray[i].replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    content = str.replace(new RegExp(searchStr, 'gi'), replaceStr);
    }

    return content;
};

关于如何实现这一目标的任何帮助

Answer 1

如果您想用JavaScript而不是jQuery执行此操作，请尝试此操作

 function myFunction() { var contexts = document.getElementById('contexts').getElementsByTagName('p'); var query_string = document.getElementById('query_string').value; if (query_string) { for (let i = 0; i < contexts.length; i++) { contexts[i].innerHTML = contexts[i].textContent; let string = contexts[i].innerHTML; let regex = `${query_string}|${query_string.split(" ").join("|")}`; string = string.replace(new RegExp(`${regex}`, 'ig'), (t) => { return `<span class="highlight">${t}</span>`; }); contexts[i].innerHTML = string; } } } 

 .highlight { background: yellow; } 

 <input type="text" id="query_string"> <button type="button" onclick="myFunction()" id="submit">Submit</button> <div id="contexts"> <p>1. hello world it's new day today</p> <p>2. welcome to my world</p> <p>3. say hello to the new world</p> </div> 

Answer 2

请尝试在以下代码段中进行尝试，如果您不想匹配整个短语，请使用${keyword.split(" ").join("|")}而不是代码段中的正则表达式。

 function replace(str, keyword, className) { let regex = `${keyword}|${keyword.split(" ").join("|")}`; str = str.replace(new RegExp(`${regex}`, 'ig'), (w) => { return `<span class="${className}">${w}</span>`; }); return str; } console.log(replace("welcome to my hello world and this is my world of hello", "hello world", "MyClass"));