javascript - 在增量搜索 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 进行搜索。

如有任何帮助，我们将不胜感激。谢谢!

日本

Answer 1

在你的第二个if您可以添加如下语句:

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

请注意，我使用了 span而不是 font对于 highlight类。

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

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