使用 JavaScript Bootstrap 在页面中搜索

Question

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

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

我怎样才能做到这一点？谢谢。

Answer 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");
        }
    });
});

请记住，这不会查找单词，而是查找字符（因此，当您开始输入 say 时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