js页面搜索定位功能实现

JavaScript 页面搜索定位功能的实现通常涉及以下几个基础概念：

基础概念

DOM 操作：Document Object Model，用于表示和操作 HTML 和 XML 文档的结构。
事件监听：监听用户的输入事件，如键盘输入或按钮点击。
正则表达式：用于匹配字符串中的特定模式。
高亮显示：通过改变文本的样式来突出显示匹配的部分。

实现步骤

获取输入值：监听搜索框的输入事件，获取用户输入的关键词。
遍历文档元素：遍历页面中的所有可能包含关键词的元素。
匹配关键词：使用正则表达式或其他方法检查元素的文本内容是否包含关键词。
高亮显示：如果找到匹配项，将匹配的部分用特定的样式标记出来。
滚动定位：将页面滚动到第一个匹配项的位置。

示例代码

以下是一个简单的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Search and Highlight</title>
<style>
  .highlight {
    background-color: yellow;
  }
</style>
</head>
<body>

<input type="text" id="searchInput" placeholder="Search...">
<button onclick="searchAndHighlight()">Search</button>

<div id="content">
  <p>This is a sample text to demonstrate the search and highlight functionality.</p>
  <p>Another paragraph with more text for testing purposes.</p>
  <!-- More content here -->
</div>

<script>
function searchAndHighlight() {
  const searchText = document.getElementById('searchInput').value;
  const regex = new RegExp(searchText, 'gi');
  const content = document.getElementById('content');

  // Remove previous highlights
  const highlightedElements = document.querySelectorAll('.highlight');
  highlightedElements.forEach(el => el.classList.remove('highlight'));

  if (searchText === '') return;

  // Search and highlight
  const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT, null, false);
  let node;
  while (node = walker.nextNode()) {
    if (node.textContent.includes(searchText)) {
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = node.textContent.replace(regex, match => `<span class="highlight">${match}</span>`);
      while (tempDiv.firstChild) {
        node.parentNode.insertBefore(tempDiv.firstChild, node);
      }
      node.parentNode.removeChild(node);
    }
  }

  // Scroll to the first match
  const firstMatch = document.querySelector('.highlight');
  if (firstMatch) {
    firstMatch.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}
</script>

</body>
</html>