RegExp不区分大小写的多字高亮 [英] RegExp case insensitive multi word highlight
问题描述
我正在努力突出关键字搜索工作正常。我遇到的几个问题。
I am trying to get highlighting on keyword searching working right. A couple issues I am having.
- 不区分大小写对第一个单词起作用,但希望用原始单词替换,而不是小写搜索字。
即搜索趋势,它取代趋势与趋势,我知道为什么,但想弄清楚如何替换找到的单词,而不是搜索到的单词
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
- 第二个单词不匹配不区分大小写。
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屋!