javascript - RegExp 不区分大小写的多词突出显示

Question

我正在尝试突出显示关键字搜索是否正常工作。我遇到了几个问题。

1. 不区分大小写适用于第一个单词，但希望它替换为原始单词，而不是小写的搜索单词。

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

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

即搜索 trend Micro 与 trend 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 标签)

const regEscape = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const EL_input = document.querySelector("#input");
const EL_area = document.querySelector("#area");
const org = EL_area.innerHTML; // Store the current HTML state

const highlight = () => {
  const val = EL_input.value;
  
  if (!val) return EL_area.innerHTML = org;
    
  const pts = regEscape(val.trim()).split(/ +/);
  const reg = new RegExp("(?![^<]+>)(" + pts.join("|") + ")", "ig");
  const res = org.replace(reg, '<span class="highlight">$1</span>');
  
  EL_area.innerHTML = res;
};

EL_input.addEventListener("input", highlight);
highlight();

div {
  padding: 5px;
  border: solid 1px #CCC;
}

.highlight {
  background: gold;
}

<input id="input" autocomplete=off 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>