使用 JavaScript Bootstrap 在页面中搜索答案

【问题标题】：Search in page with JavaScript Bootstrap使用 JavaScript Bootstrap 在页面中搜索
【发布时间】：2013-05-23 15:24:42
【问题描述】：

我将使用 Bootstrap 构建一个页面，并使用导航栏搜索表单在同一页面中查找搜索到的文本。我应该使用什么 JS 脚本来做到这一点？我希望对于页面中的每个找到的文本，脚本都会像这样将类“lead”添加到 p 标签中

    <p class="lead">...</p>

我该怎么做？谢谢。

【问题讨论】：

你能澄清一下这个问题吗？您希望用户在导航栏搜索表单中键入内容，并且希望 JS 脚本将“lead”类添加到每个包含搜索字符串匹配项的 <p> 元素？
是的，对于此页面上找到的每个元素，我都会将类引导添加到
标记

标签： javascript html twitter-bootstrap

【解决方案1】：

由于 Bootstrap 的插件需要 jQuery 才能工作，我将使用它作为您的解决方案：

如果你的navbar-search 是一个类：

$(".navbar-search").on("keyup", function () {
    var v = $(this).val();
    $(".lead").removeClass("lead");
    $("p").each(function () {
        if (v != "" && $(this).text().search(v) != -1) {
            $(this).addClass("lead");
        }
    });
});

请记住，这不会查找单词，而是查找字符（因此，当您开始输入 a 时，它将立即选择两个段落，因为它们都包含“a”）。如果你想搜索单词，你需要相应地修改你的代码。

此解决方案区分大小写。

JSFiddle

因此，如果您想搜索整个单词，请执行以下操作：

$(".navbar-search").on("keyup", function () {
    var v = $(this).val();
    $(".lead").removeClass("lead");
    var re = new RegExp("\\b" + v + "\\b","g")
    $("p").each(function () {
        if (v != "" && $(this).text().search(re) != -1) {
            $(this).addClass("lead");
        }
    });
});

请记住，如果您希望人们搜索一些愚蠢的东西，您可能希望在将其插入到正则表达式之前转义您的 v。

JSFiddle

【讨论】：

+1，很好的解决方案。但是，您不必期望人们搜索“愚蠢”的东西来逃避您的正则表达式子字符串。如果有人搜索“美国”或 "[1" 或 "$4" 或可能是 "(a"，它们可能会得到错误或错误结果。请参阅 stackoverflow.com/a/5664273/423105 了解如何转义字符串。
@LarsH：谢谢，我同意无论如何都应该转义字符串，但我不想使示例复杂化。