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

Question

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

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

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

1. 第二个单词不匹配不区分大小写。

即。搜索趋势微观不匹配趋势Micro。

这是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);
        });
    });
}

您能帮助确定问题并提供改进吗？谢谢！

一些参考资料用于获得代码：

https://stackoverflow.com/a/120161/2727155

https://stackoverflow.com/a/10011639/2727155

Answer 1

突出显示多个单词（忽略HTML标记）

我会这样做： jsBin demo

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>

Answer 2

你很亲密！将第7行更改为：

var repl = '<span class="search-found">$&</span>';

注意那里的$&。它是对匹配单词的引用并保留了这种情况。

http://jsfiddle.net/hh2zvjft/2/

正如Roko在下面的评论中所指出的，如果你继续点击Find，你将会得到任意一方3px的持续填充增加。要解决此问题，我建议removing the padding from the CSS，或者如果单词已经突出显示，则禁用Find按钮。