使用jQuery.contains()方法：搜索关键字

jQuery是一种基于JavaScript语言的优秀开源框架，深受开发人员的喜爱。jQuery除了提供了丰富的API，还提供了许多实用的方法，包括.contains()方法。本文将重点介绍一下如何使用jQuery.contains()方法来进行关键词搜索。

一、什么是.contains()方法

jQuery.contains()方法是一个查找DOM节点的方法。它的作用是判断一个节点是否包含另一个节点。如果包含，返回true，否则返回false。.contains()方法的语法如下：

jQuery.contains(container, contained)

其中container为包含节点的元素，contained为被包含的节点。例如：

<div id="container">
    <span id="target">我是被包含的节点</span>
</div>

var container = document.getElementById("container");
var target = document.getElementById("target");
jQuery.contains(container, target);  // 返回true

二、使用.contains()方法进行关键词搜索

结合.contains()方法的功能，我们可以很方便地实现关键词搜索。具体实现步骤如下：

1、获取所有需要进行搜索的节点元素。例如：

var elements = $("body").find("*"); // 获取下的所有节点元素，注意这里是*，表示所有节点

2、遍历每一个节点，判断是否包含关键词。如果包含，则将该节点保存到一个数组中，方便后续操作。例如：

var keyword = "jQuery.contains()方法";
var result = [];
elements.each(function() {   // 遍历每一个节点
    if (jQuery.contains(this, $(this).text())) {  // 判断是否包含关键词
        result.push(this);  // 保存节点元素
    }
});

3、对搜索结果进行处理，例如高亮显示。这里以红色高亮显示为例：

$.each(result, function() {   // 遍历搜索结果
    $(this).html($(this).html()
        .replace(new RegExp(keyword,"gm"), ""+keyword+"")
    );  // 对节点元素进行处理，将关键词高亮显示
});

最终效果如下图所示：

三、注意事项

1、.contains()方法只能用于判断一个节点是否包含另一个节点，不能用于判断一个节点内部是否包含某个关键词。因此，在实现搜索时，需要将每个节点内的纯文本内容取出，再进行比对。

2、使用.contains()方法进行关键词搜索虽然简单，但对于大型网页来说，搜索速度可能会比较慢。因此，在实际开发中，可以考虑使用专门的搜索框架，例如Elasticsearch等。

以上就是使用jQuery.contains()方法进行关键词搜索的介绍，希望对大家有所帮助。