RegExp不区分大小写的多字高亮 [英] RegExp case insensitive multi word highlight

问题描述

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

I am trying to get highlighting on keyword searching working right. A couple issues I am having.

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

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

i.e. search trend, it replaces Trend with trend, I know why, but would like to figure out how to replace back the found word, not the searched word

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

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

i.e. search trend micro is not matching trend Micro.

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

Here is 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);
        });
    });
}

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

Can you please help identify the issues, and offer improvements? Thanks!

用于获取代码的一些参考：

Some refererences used to arrive at code:

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

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

推荐答案

突出显示多个单词（忽略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标记内的字符串。

Quite simple and cool cause the code will not mess (match) strings within HTML tags.

在这里使用相同的原则是一个自动疼痛表行的例子（热点 thead 的标题行）：

Usign the same principle here's an example that will automatically sore table rows (hot the title rows of 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>

这篇关于RegExp不区分大小写的多字高亮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！