问题描述
我正在尝试在引导表中查找并突出显示匹配的文本。
这是提琴手： :
的HTML
<table class='table table-bordered'>
<thead>
<tr><th>ID</th><th>Name</th></tr>
</thead>
<tbody id='UserInfoTableBody'>
<tr><td>1</td><td>UserName 1</td></tr>
<tr><td>2</td><td>UserName 2</td></tr>
<tr><td>3</td><td>UserName 1</td></tr>
<tr><td>4</td><td>UserName 3</td></tr>
<tr><td>5</td><td>UserName 2</td></tr>
<tr><td>6</td><td>UserName 2</td></tr>
<tr><td>7</td><td>UserName 1</td></tr>
<tr><td>8</td><td>UserName 1</td></tr>
<tr><td>9</td><td>username 2</td></tr>
</tbody>
</table>
JS
HighlightMatches();
function HighlightMatches(){
var textToMatch = 'UserName 2';
$('.match').replaceWith(function () {
return this.innerText;
});
$('#UserInfoTableBody td').each(function (i, tdContent) {
var $td = $(tdContent);
$td.html($td.html().
split(textToMatch).
join('<span class="match">' + textToMatch + '</span>'));
});
}
的CSS
.match{background-color:yellow;}
问题：
当前的搜索区分大小写，我希望它不区分大小写。 在上面的代码中，我正在尝试搜索“用户名2”，但它缺少最后一行（用户名2）中的值。
我尝试使用contains，但是在那种情况下，我不确定如何突出显示文本。 任何帮助表示赞赏。
期望
仅突出显示匹配的文本。 应该为
var textToMatch = '2';
var textToMatch = 'User';
var textToMatch = 'user';
1楼
您可以这样做：
HighlightMatches();
function HighlightMatches(){
var textToMatch = 'username';
$('.match').replaceWith(function () {
return this.innerText;
});
$('#UserInfoTableBody td:odd').each(function (i, tdContent) {
var $td = $(tdContent);
var pos = $td.html().toLowerCase().search(textToMatch);
var len = textToMatch.length;
if(pos != -1 ){
var match = $td.html().substring(pos, len+pos);
var splitted = $td.html().split(match);
$td.html(splitted[0] + '<span class="match">' + match + '</span>' + splitted[1]);
}
});
}
小提琴： :
2楼
$.extend($.expr[":"], {
"containsIN": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
HighlightMatches();
function HighlightMatches(){
var textToMatch = 'UserName 2';
$('.match').replaceWith(function () {
return this.innerText;
});
$('#UserInfoTableBody td').each(function (i, tdContent) {
$('td:containsIN("'+textToMatch+'")').html('<span class="match">' + textToMatch + '</span>');
});
}
你可以试试看
3楼
您可以使用函数toLowerCase() 。
此功能将字符转换为小写。
将此功能用于textToMatch和td
祝好运