Question

我想搜索并突出显示用户在上下文中搜索的查询字符串，如果该字符串匹配，我使用Java脚本不太好，我可以在php中实现相同的功能，但是我需要用javascrip 假设我说我有一个查询字符串Hello world，并且我有3个上下文，其中在这个3个上下文中有匹配的说1. hello world it's new day today 2. welcome to my world 3. say hello to the new world，我想要的是用户提交时使用hellow world的查询，我想在第一个上下文中突出显示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"));

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

2 个答案: