第一个 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 进行搜索。
如有任何帮助,我们将不胜感激。谢谢!
日本
最佳答案
在你的第二个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
在添加新的之前。
关于javascript - 在增量搜索 JS 中设置突出显示的文本样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3615351/