jQuery实现搜索页面关键字的功能

要实现搜索页面关键字的功能，可以使用jQuery库中的一些方法和函数，以下是实现的步骤：

1. 获取搜索框输入的关键字

通过jQuery获取输入框中的文本可以使用 val() 方法。例如：

var keyword = $('input#search').val();

这里的 input#search 是指 HTML 页面中 id 为 search 的输入框，通过 val() 方法获取该输入框的内容，赋给 keyword 变量。

2. 搜索页面内容

搜索页面内容可以使用 jQuery 中的 :contains 选择器来实现，例如：

$('div.content:contains("' + keyword + '")').addClass('highlight');

这里的 div.content 选择器表示找到页面中所有 div 元素中带有 class 为 content 的元素，然后通过 :contains 选择器将带有关键字的文本高亮显示，使用 addClass() 方法为该元素添加一个 highlight 类。

3. 取消之前的高亮显示

在每次输入新的关键词之前，我们需要清除之前的高亮显示，可以使用 removeClass() 方法来移除所有的 highlight 类，例如：

$('div.content').removeClass('highlight');

这里的 div.content 选择器找到所有带有 class 为 content 的 div 元素，并通过 removeClass() 方法将其中的 highlight 类移除。

示例1：高亮显示匹配的单词

下面是一个实现搜索页面内容并高亮显示匹配单词的示例代码：

$('button#search-btn').click(function() {
  var keyword = $('input#search').val();
  $('div.content').removeClass('highlight');
  $('div.content:contains("' + keyword + '")').each(function() {
    var html = $(this).html();
    var highlighted = html.replace(new RegExp(keyword,'gi'), '<span class="highlight">' + keyword + '</span>');
    $(this).html(highlighted);
  });
});

这个示例代码中，我们先通过 click 事件监听按钮的点击，获取输入框中的关键字 keyword，然后通过 removeClass 方法清除之前的高亮显示。

接下来，在带有关键词的页面元素中遍历，使用 replace 方法将匹配到的关键词替换为带有 highlight 类的 span 标签，最后赋值给原来的 html 内容。

示例2：仅高亮显示关键词

下面是一个仅高亮显示关键词而不是整个单词的示例代码：

$('button#search-btn').click(function() {
  var keyword = $('input#search').val();
  $('div.content').removeClass('highlight');
  $('div.content').html(function(_, html) {
    var regex = new RegExp(keyword, 'gi');
    return html.replace(regex, '<span class="highlight">$&</span>');
  });
});

这个示例代码中，我们同样使用 click 事件监听按钮点击，获取输入框中的关键词 keyword，然后通过 removeClass 方法清除之前的高亮显示。

接下来，我们使用 html 方法遍历页面上所有带有 content 类的 div 元素，使用 replace 方法将输入框中的关键词替换为带有 highlight 类的 span 标签，其中 $& 表示使用正则表达式匹配到的关键词。

最后，我们返回新的 html 内容，将其赋值给原来的 div.content 元素。