javascript中的文本搜索？答案

【问题标题】：text search in javascript?javascript中的文本搜索？
【发布时间】：2010-07-18 04:21:33
【问题描述】：

我有一个包含 200 多个使用这种格式的链接的页面。

<h1>
  <a href="somelink">Somelink</a>
  some text that explain the meaning of the link. 
</h1>

现在，为了便于通过此链接进行搜索，我放置了一个搜索框。

我的要求是搜索所有这些标签并找到与搜索框并隐藏链接的其余部分。

如何在 javascript 中做到这一点？（我知道基本的 javascript/jquery 东西，但如何进行全文搜索？）我不需要根据相关排序，只需过滤并显示隐藏就足够了。

【问题讨论】：

都是偶然出现在h1标签里的吗？
h1标签有多个，200个到最后。出于速度原因，我不想要服务器端搜索，所有 200 个链接的总大小几乎不会超过 10 kb。

标签： javascript full-text-search

【解决方案1】：

您可以枚举所有 h1 标签获取内部 html 并执行 indexOf ，或者您可以使用 jQuery 它具有自定义的 contains 功能，它返回具有给定文本的元素。

这是从 jQuery 文档复制的示例

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div>John Resig</div>

<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>


<script>
$("div:contains('John')").css("text-decoration", "underline");
    </script>
</body>
</html>

【讨论】：

哇，太好了，我不知道！
因此，我正在研究一种解决方案，该解决方案涉及构建一个数组，然后在该数组中搜索文本，这使我的解决方案看起来臃肿且迟钝。 +1 为简单起见。
如何处理多个单词？（它会分解它们并搜索或搜索整个字符串吗？）
@iamgopal ，这将搜索整个字符串，您可以拆分搜索字符串并搜索多次。

【解决方案2】：

希望你觉得这很有用。它可能不是优雅或最有效的，但它可以让您输入多个搜索词并提供部分匹配（可能需要也可能不需要）。当您单击搜索按钮时，我所做的方式将隐藏所有其他元素，除了与您的搜索词匹配的元素，但您可以修改它以对结果数组中的元素执行任何您想要的操作。我不建议完全使用它，但希望它能给您一个参考点，让您了解如何实现自己的（如果您选择使用除快速搜索之外的解决方案）。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript' language='javascript' >
$(document).ready(function() {
    var links = new Array();
    $("h1").each(function(index, element) {         
        links.push({
            text: $(this).text(),
            element: element
        });
    });

    $("#searchButton").click(function() {
        var query = $("#searchBox").val();
        var queryTerms = query.split(' ');

        var results = new Array();
        for(var i = 0; i < queryTerms.length; i++) {
            for(var j = 0; j < links.length; j++) {
                if (links[j].text.indexOf(queryTerms[i]) > -1) {
                    results.push(links[j].element);                     
                    }
            }
        }

        $("h1").each(function(index, element) {
            this.style.display = 'none';
        });
        for(var i = 0; i < results.length; i++) {
            results[i].style.display = 'block';
        }

    });     

});
</script>

</head>
<body>
<p>
<input id="searchBox" type="text" />
<input type="button" id="searchButton" value="Search" />
</p>

<h1>
  <a href="somelink">Somelink1</a>
  asdf
</h1>
<h1>
  <a href="somelink">Somelink2</a>
  ssss
</h1>
<h1>
  <a href="somelink">Somelink3</a>
  3333
</h1>
<h1>
  <a href="somelink">Somelink4</a>
  232323
</h1>
<h1>
  <a href="somelink">Somelink5</a>
  fffff
</h1>

 </body>
 </html>

【讨论】：

【解决方案3】：

我找到了一个。

http://github.com/riklomas/quicksearch

使用正则表达式进行搜索。

【讨论】：