javascript - jQuery 过滤器和高亮表
问题描述
我的代码有问题。在搜索时,我试图查找字母或单词并突出显示它,但有一些问题,例如当我搜索单词“Aram”时,它返回给我“ArAm”。当在一个单词中我有更多相同的字母并且第一个是大写时,所有其他字母都替换为大写字母。你能检查我的代码并说出我做错了什么吗?
example 'Aram' -> 'ArAm(<mark>A</mark>r<mark>A</mark>m)' but shuld be 'Aram(<mark>A</mark>r<mark>a</mark>m)'
JavaScript:
$("input").on("keyup", function () {
var valThis = this.value;
$('table').find('tr td').each(function () {
if($(this).attr('data-search') !== 'false') {
console.log('');
var text = $(this).text();
var textL = text.toLowerCase();
var position = textL.indexOf(valThis.toLowerCase());
if (position !== -1) {
var matches = text.substring(position, ( valThis.length + position ));
var regex = new RegExp(matches, 'ig');
var highlighted = text.replace(regex, `<mark>${matches}</mark>`);
console.log(highlighted);
$(this).html(highlighted);
setTimeout(function () {
if($(this).parent().find('mark').is(':empty')) {
$('mark').remove();
}
}.bind(this),0);
} else {
console.log('sadasdasd');
$(this).text(text);
}
}
if($(this).parent().find('mark').length > 0) {
$(this).parent().show();
}else {
$(this).parent().hide();
}
});
});
这是我的jsFiddle
谢谢你的帮助
解决方案
尝试这个:
var regex = new RegExp(valThis, 'ig');
text = text.replace(regex, (match, $1) => {
// Return the replacement
return '<mark>' + match + '</mark>';
});
$(this).html(text);
推荐阅读
- webpack - 如何部署动态 webpack javascript 块文件
- jquery - 根据类向 daterangepicker 单元格添加标题
- html - 全高页面出现问题,底部页面有白条
- jquery - 如何使用 jQuery 更新数据表中的所有多行?
- python - 关于scrapy的产量?
- c# - 如何解决Entity Framework:已经有一个打开的DataReader,多个上下文
- amazon-web-services - 在 AWS 市场上发布我们的产品
- r - R 等效于 PRINCOMP 过程中的 SAS“BY”语句
- jquery - 动态数据属性的jQuery排序功能
- c - sa_sigaction 是线程安全的吗?