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

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

这是小提琴手：

HTML

问题:

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

我尝试使用contains，但在这种情况下，我不确定如何突出显示文本。感谢您的帮助

期望值

仅高亮显示匹配的文本。 应该为,

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

---

您可以这样做：

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

小提琴：

你可以试试这个。

您可以使用函数toLowerCase

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

---

祝你好运

但我想知道你在这行做什么：$'.match'.replacement…@sylvain1264，它在这里可能没有用。。。但实际的功能是，textToMatch的值是动态的，我想在执行新搜索之前删除以前的突出显示。@downvoter，我可以知道原因吗？谢谢你的建议。但是，如果替换var textToMatch='username'，上述逻辑将失败。td的部分搜索text@sylvain1264，感谢您更新您的解决方案。但是，我只需要突出显示匹配的文本。。不是td中的全部文本。如果您查看我的fiddler，请替换var textToMatch='2'，它将只突出显示匹配的文本。您需要明确说明您试图在问题中实现的功能。在你的评论中不断添加新的请求会使你成为一个“帮助吸血鬼”。@sylvain1264，现在似乎正在工作+我耐心地回答：欢迎你，你也可以在选择器中添加：奇数，以防止突出显示排名。对不起，这不是我要找的。我只需要突出显示匹配的文本。。不是td中的全部文本。如果您查看我的fiddler，替换var textToMatch='2'，它将只突出显示匹配的文本。如果我使用var textToMatch='2'，td中的其他文本将消失…：我只想突出显示匹配的文本。

.match{background-color:yellow;}

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

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

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