在增量搜索JS中设置突出显示的文本样式

Question

第一个StackOverflow问题 - 喔!

关于这个Javascript样式的快速问题:

    //Search
$('#search').keydown(function(e) {
    setTimeout(function() {
        if ($('#search').val() == '') {
            $('#history h4').show();
            $('#history li li').show();
            return;
        }

        $('#history h4').hide();

        var search = $('#search').val().toLowerCase();

        $('#history li li').each(function() {
            var thisId = $(this).attr('id').substr(13);
            var item = $.grep(history, function(item) { return item.id == thisId; })[0];
            if (item.message.toLowerCase().indexOf(search) != -1 || item.link.toLowerCase().indexOf(search) != -1)
                $(this).show();
            else
                $(this).hide();
        });
    }, 1);
});
});

我在哪里将CSS样式放在javascript中以突出显示搜索结果中的字母？

<font class="highlight"></font>

这类似于在浏览器中使用Ctrl + F进行搜索.

任何帮助都会非常感激.谢谢!

J.P

Answer 1

在第二个if声明中，您可以添加以下内容：

\n\n

reg_expression = new RegExp("(" + search + ")","ig");\n$(this).html($(this).html().replace(reg_expression, \'<span class="highlight">\' + "$1" + \'</span>\'));\n

\n\n

请注意，I\xc2\xb4ve 使用span而不是用于font该类highlight。

\n\n

另请注意，我假设您li li只包含文本而不包含 html 标签，因为任何匹配的字符序列search都将被替换，因此如果您有例如值包含您的搜索词的<span>search</span>链接，则可能会导致麻烦。href

\n\n

顺便说一句，在添加新的之前，您需要删除所有的span\'或fonts\'。

\n