javascript - 不连续突出显示单词的第一个字母

Question

Here是搜索工作正常但它没有突出显示名称列中文本的第一个字母并突出显示剩余匹配字母的 fiddle ......问题是什么......谁能解决它...... ..例如，如果我们在搜索栏中键入“v”，它会显示所有 v，但名称列中的“v”不会突出显示......除了名称列中文本的第一个字母外，每个匹配的元素都会突出显示

我们必须更改此代码......

$("#search").keyup(function(){
        _this = $(this);
        var searched_term = $(_this).val().toLowerCase();
		if(_this.val() == ""){
			$.each($("#ftz-table tbody tr td:nth-child(n+2)"), function() { 
			$(this).text($(this).text());	
		})
		return;
		}
        $.each($("#ftz-table tbody tr td:nth-child(n+2)"), function() {
			var original_text = $(this).text();       
			if(!($(this).text().toLowerCase().indexOf(searched_term) == -1)){
				$(this).html(original_text.replace(searched_term, "<mark>"+searched_term+"</mark>"));
			}	
			else{
				$(this).text($(this).text());	
			}
        });
    }); 

Answer 1

您的搜索不区分大小写，但 original_text.replace() 不区分大小写，因此 indexOf 找到 v 或 V 但 replace 仅替换与搜索输入大小写匹配的那个。

为了保留您需要捕获的案例:

var re = new RegExp("(" + searched_term + ")", "i");
$.each($("#ftz-table tbody tr td:nth-child(n+2)"), function() {
   $(this).html($(this).text().replace(re, "<mark>$1</mark>"));
});

https://jsfiddle.net/xr0hns13/1/

(searched_term 应针对任何 RegExp 保留字符进行转义)