jquery 输入框查找关键字并提亮颜色的实例代码

首先，我们需要引入jQuery库，因为我们将使用jQuery库的一些方法。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

然后，我们需要在HTML中定义一个输入框和一个展示搜索结果的容器：

<input type="text" id="search-input">
<div id="search-result">
<!-- 这里是搜索结果展示的容器 -->
</div>

接下来，我们需要监听输入框的“input”事件，每当输入框的值改变时，就触发一个函数来处理搜索并展示结果。

$('#search-input').on('input', function() {
  var keyword = $(this).val(); // 获取输入框中的值
  var resultHtml = searchAndHighlight(keyword); // 对关键字进行搜索和高亮，并返回搜索结果的HTML代码
  $('#search-result').html(resultHtml); // 将搜索结果展示到容器中
});

我们需要定义一个searchAndHighlight函数，该函数接收一个关键字作为参数，搜索整个网页中包含该关键字的内容，并对其进行高亮。

function searchAndHighlight(keyword) {
  var resultHtml = ''; // 存储搜索结果的HTML代码
  if (keyword) {
    // 如果输入框中有内容
    $('body *').each(function() {
      var text = $(this).text(); // 获取元素的文本内容
      var index = text.indexOf(keyword); // 判断文本内容中是否包含关键字
      if (index >= 0) {
        // 如果包含，则对关键字进行高亮处理
        var start = index; // 获取关键字在文本中的起始位置
        var end = index + keyword.length - 1; // 获取关键字在文本中的结束位置
        var before = text.substring(0, start); // 截取关键字前面的部分
        var middle = text.substring(start, end + 1); // 截取包含关键字的部分
        var after = text.substring(end + 1); // 截取关键字后面的部分
        resultHtml += before + '<span class="highlight">' + middle + '</span>' + after; // 将三部分拼接起来，中间部分用span标签高亮处理
      } else {
        // 如果不包含，则直接将元素的文本内容展示到搜索结果中
        resultHtml += text;
      }
    });
  }
  return resultHtml;
}

最后，我们需要定义一个CSS样式，来为高亮的部分增加样式：

.highlight {
  background-color: yellow;
}

示例一：

如果用户输入的关键字为“JavaScript”，则搜索结果将会展示整个页面中包含“JavaScript”的内容，并对其中的关键字进行高亮处理。

示例二：

如果用户输入的关键字为“HTML”，则搜索结果将会展示整个页面中包含“HTML”的内容，并对其中的关键字进行高亮处理。