2

我有一页搜索结果。给定一个结果列表，我需要能够突出显示输入中的给定文本字符串。给定以下代码，我可以突出显示该术语，但我正在尝试使用结果列表来突出显示该术语。预期结果是突出显示返回结果列表中搜索字符串的每个实例。

HTML

<input type="text" id="searchfor" />
<p id="all_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

CSS

#all_text span {
    text-decoration:underline;
    background-color:yellow;
}

JavaScript

$('#searchfor').keyup(function () {

    var page = $('#all_text');
    var pageText = page.text().replace("<span>", "");
    var searchedText = $('#searchfor').val();
    var theRegEx = new RegExp("(" + searchedText + ")", "igm");
    var newHtml = pageText.replace(theRegEx, "<span>$1</span>");
    page.html(newHtml);
});
4

1 回答 1

2

您可以使用 jQuery Highlight 插件

http://bartaz.github.com/sandbox.js/jquery.highlight.html

它在突出显示搜索结果方面做得很好。有一个选项可以传入数组术语以突出显示，而不仅仅是单个术语。这在文档中并不明显，但它在代码顶部的注释中指出。

更新

一次传递多个搜索词（来自源代码顶部的注释）：

// search for and highlight more terms at once
// so you can save some time on traversing DOM
$('#content').highlight(['lorem', 'ipsum']);
于 2013-04-03T15:25:30.353 回答