RegExp不区分大小写的多字高亮

Question

我正在努力突出关键字搜索工作正常.我遇到的几个问题.

1. 不区分大小写对第一个单词起作用,但希望用原始单词替换,而不是小写搜索单词.

即搜索趋势,它取代趋势与趋势,我知道为什么,但想弄清楚如何替换找到的单词,而不是搜索到的单词

2. 第二个词不匹配不区分大小写.

即搜索趋势微观不匹配趋势微观.

这是jsFiddle:http://jsfiddle.net/hh2zvjft/1/

if ($(".ProjectSearch").val().length > 0) {
    var searchedText = $(".ProjectSearch").val();
    var wordList = searchedText.split(" ");
    $.each(wordList, function (i, word) {
        $(".ProjectTaskGrid:contains('" + word + "')").each(function (i, element) {
            var rgxp = new RegExp(word, "gi");
            var repl = '<span class="search-found">' + word + '</span>';
            element.innerHTML = element.innerHTML.replace(rgxp, repl);
        });
    });
}

您能否帮助确定问题并提供改进？谢谢!

一些引用用于获得代码:

/sf/answers/8411301/

/sf/answers/700814761/

Answer 1

突出显示多个单词(忽略HTML标记)

以下是我将如何做到这一点:jsBin演示

var $input = $("#input");
var $text = $("#area");
var org = $text.html() || "";

$input.on("input", function(){
  
  var res,
      reg,
      words = [],
      val = $.trim(this.value.replace(/[^\w\s]/gi, '')); // remove Special Chars
  
  if(val.length > 0){
    words = val.split(" ");
    reg = new RegExp("(?![^<]+>)("+ words.join("|") +")", "ig");
    res = org.replace(reg, "<span class='highlight'>$1</span>");
  }
  
  $text.html(words.length > 0 ? res : org);

}).trigger("input");

.highlight {
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" type="text" value="tren pan com br" />

<div id="area">Renew Trend Worry-Free Business Security license that <a href="http://someweb.com">someweb.com</a> will expire in 60 days.<br>
  Activate BR like breakline trend and [ confirm <span>SOME <span>SPAN</span> IS HERE</span> upon electronic<br> delivery notification from Trend Micro</div>

相当简单和酷,因为代码不会混乱(匹配)HTML标记中的字符串.

突出显示和排序表行

在这里使用相同的原则是一个自动疼痛表行(热门标题行thead)的例子:

$("input[data-highlightsort]").each(function(){

  var dataTarget = $(this).data("highlightsort");
  var $tbody = $("table[data-highlightsort='"+dataTarget+"'] tbody");
  var org = $tbody.html() || "";

  $(this).on("input", function(){
    
    var res,
        reg,
        words,
        val = $.trim(this.value.replace(/[^\w\s]/gi, '')), // remove Special Chars
        hasVal=val.length>0;
    
    if(hasVal){
      words = val.split(" ");
      reg = new RegExp("(?![^<]+>)("+ words.join("|") +")", "ig");
      res = org.replace(reg, "<span class='highlight'>$1</span>");
    }

    // Highlight
    $tbody.html(hasVal ? res : org);

    // Show/hide
    if(hasVal) $tbody.find("tr").hide().has(".highlight").show();

  }).trigger("input");

});

.highlight{
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="searchSort" type="text" data-highlightsort="table1" value="co">


<table data-highlightsort="table1">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Nickname</th>
      <th>Profile</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Roko</td>
      <td>C. Buljan</td>
      <td>roXon</td>
      <td><a href="http://stackoverflow.com/users/383904/roko-c-buljan?tab=profile">roko-c-buljan</a></td>
      <td>2010</td>
    </tr>
    <tr>
      <td>2</td>
      <td>stack</td>
      <td>Overflow</td>
      <td>SO</td>
      <td><a href="http://stackoverflow.com">stackoverflow.com</a></td>
      <td>2008</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Community</td>
      <td></td>
      <td></td>
      <td><a href="http://stackoverflow.com/users/-1/community">community</a></td>
      <td>2008</td>
    </tr>
  </tbody>
</table>