[英]How to highlight all matching strings
页面包含搜索输入字段和表格。
如何在表格中突出显示与输入字段中的文本匹配的所有子字符串?
我已经尝试过了,但是它改变了td元素的背景。
$(".projects-list > tbody > tr > td:contains('"+$(this).val()+"')").css("background", "#6a5acd");
如何仅突出显示匹配的文本部分?
这是html,
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
</tr>
</table>
这是Jquery,
$(document).ready(function(){
$("td:contains('cell 1')").css("color","#6a5acd");//color highlighting
})
和参考链接,
尝试
if (!RegExp.escape) {
RegExp.escape = function (s) {
return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
};
}
然后
$(".projects-list > tbody > tr > td .highlighted").contents().unwrap();
var search = RegExp.escape(this.value);
$(".projects-list > tbody > tr > td").html(function (i, text) {
return text.replace(new RegExp('(' + search + ')', 'gi'), '<span class="highlighted">$1</span>')
})
演示: 小提琴
注意:如果单元格中包含未在此处处理的html内容
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.