html页面文字搜索功能流程及代码实现

实现 HTML 页面文字搜索功能可以通过 JavaScript 来实现。以下是一个简单的示例：

在 HTML 页面中添加搜索框和搜索按钮

<!-- 搜索框 -->
<input type="text" id="search-input" placeholder="请输入关键词">

<!-- 搜索按钮 -->
<button type="button" id="search-button">搜索</button>

编写 JavaScript 代码来实现搜索功能

// 获取搜索框和搜索按钮
var searchInput = document.getElementById("search-input");
var searchButton = document.getElementById("search-button");

// 给搜索按钮添加点击事件监听器
searchButton.addEventListener("click", function() {
  // 获取搜索关键词
  var keyword = searchInput.value.trim().toLowerCase();

  // 获取页面上所有的文本节点
  var textNodes = document.evaluate(
    "//text()[normalize-space(.)!='']", document.body, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

  // 遍历所有的文本节点，查找关键词并高亮显示
  for (var i = 0; i < textNodes.snapshotLength; i++) {
    var textNode = textNodes.snapshotItem(i);
    var parentElement = textNode.parentElement;

    // 如果当前文本节点包含关键词，则高亮显示
    if (textNode.nodeValue.toLowerCase().indexOf(keyword) !== -1) {
      var span = document.createElement("span");
      span.style.backgroundColor = "yellow";
      span.textContent = textNode.nodeValue;
      parentElement.replaceChild(span, textNode);
    }
  }
});

在上面的代码中，首先获取搜索框和搜索按钮的 DOM 元素，并给搜索按钮添加点击事件监听器。当用户点击搜索按钮时，获取搜索关键词，然后使用 XPath 表达式获取页面上所有的文本节点，并遍历所有文本节点，查找包含关键词的文本节点，并将其高亮显示。具体实现方式是创建一个新的 span 元素，将包含关键词的文本节点替换为这个 span 元素，并设置 span 元素的背景颜色为黄色。

需要注意的是，这个实现方式只能查找和高亮显示页面中的文本内容，而无法搜索和匹配 HTML 标签中的属性值和标签名等内容。如果需要实现更复杂的搜索功能，可以考虑使用第三方的 JavaScript 搜索库，例如 Lunr.js 或 Elasticlunr.js。

猜你喜欢：php页面查询功能实现流程及代码示例