Question

我正在尝试查找并突出显示引导表中的匹配文本。

这是小提琴手：https://jsfiddle.net/99x50s2s/74/

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;}

问题：

当前搜索区分大小写，我希望它不区分大小写。在上面的代码中，我试图搜索“UserName 2”但它缺少最后一行中的值（用户名2）。

我尝试使用包含但在这种情况下，我不确定如何突出显示文本。任何帮助表示赞赏。

期望

仅突出显示匹配的文字。应该工作，

var textToMatch = '2';
var textToMatch = 'User';
var textToMatch = 'user';

Answer 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]);
        }
    });
}

小提琴：https://jsfiddle.net/99x50s2s/87/

Answer 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>');
    });
}

你可以试试这个。 https://jsfiddle.net/99x50s2s/85/

Answer 3

您可以使用toLowerCase()功能。

此函数字符转换为小写。将此功能用于textToMatch和td

祝你好运

在引导表数据中不区分大小写的搜索

3 个答案: