javascript - :contains case insensitive solution does not work when text is replaced for highlighting

Question

我正在使用此解决方案来制作不区分大小写的自定义 :contains

$.expr[":"].icontains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

查找和替换高亮字符串的代码

$(function() {
    $("#search").on("keyup", function(e) {
        var q = $(this).val();

        //hide all items
        $("ul#my_list").children("li").hide();
        //show matching
        $("ul#my_list").children('li:icontains("'+q+'")').show();
        $("ul#my_list").children('li').each(function(){
            $(this).html($(this).text());
        });
        $("ul#my_list").children('li:icontains("'+q+'")').each(function(){
            //var content = q;
            this.innerHTML = this.innerHTML.replace(q,"<span class='highlight_text'>"+q+"</span>")
        });
    });
});

我已经尝试了多种使包含不区分大小写的解决方案，您可以在 google 和 SO 上找到这些解决方案，但它们都不适合我

fiddle :http://jsfiddle.net/6r1q9rx2/5/

编辑:它似乎区分大小写 - 但在这种情况下不会突出显示匹配的文本

Answer 1

您的自定义函数工作正常。不起作用的是您的替换功能。 您的替换功能不区分大小写。

$(this).html(function(_, html){
    return html.replace(
        new RegExp("("+ q + ")", "ig"), // make a regex with capturing group
        "<span class='highlight_text'>$1</span>" // replace with the captured group
    );
});

标志 i 和 g 分别告诉引擎不区分大小写和多次匹配(如果可用)。

然后我们在组 1 中捕获它，我们将其用于将字符串替换为 $1

DEMO