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进行搜索。

任何帮助都会非常感激。谢谢！

JP

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，然后再添加新的。{/ p>

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

1 个答案: