我试图突出显示关键字搜索的正常工作。我遇到了几个问题。
- 不区分大小写适用于第一个单词,但希望它替换为原始大小写单词,而不是小写搜索单词。
即搜索趋势,它用趋势替换趋势,我知道为什么,但想弄清楚如何替换回找到的单词,而不是搜索到的单词
- 第二个单词不匹配,不区分大小写。
即搜索趋势微与趋势微不匹配。
这是 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
突出显示多个单词(忽略 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)