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

第一个 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);
});
});

我应该在 javascript 中的什么位置放置 CSS 样式以突出显示搜索结果中的字母？

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

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

任何帮助将不胜感激。谢谢！

JP

在你的第二个if声明你可以添加类似的内容：

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

请注意，我用过span代替font为了highlight class.

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

顺便一提，你需要删除所有span's or fonts在添加新的之前。