js实现ctrl f的效果

在JavaScript中实现类似Ctrl+F（查找）的效果，通常涉及到在网页上创建一个搜索框，允许用户输入关键词，并高亮显示页面中匹配该关键词的所有实例。以下是一个简单的实现示例：

基础概念

DOM操作：文档对象模型（DOM）是HTML和XML文档的编程接口。通过DOM，开发者可以更改文档的结构、样式和内容。
正则表达式：用于匹配字符串中字符组合的模式。
事件监听：用于响应用户操作，如点击、输入等。

实现步骤

创建一个搜索框和一个按钮。
监听按钮的点击事件或搜索框的回车键事件。
获取用户输入的关键词。
使用正则表达式在页面文本中查找所有匹配项。
高亮显示找到的匹配项。

示例代码

<!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="Enter text to search...">
<button onclick="highlight()">Search</button>

<div id="content">
  <!-- Your content goes here -->
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<script>
function highlight() {
  const searchText = document.getElementById('searchInput').value;
  const regex = new RegExp(searchText, 'gi'); // 'g' for global, 'i' for case-insensitive
  const content = document.getElementById('content');
  
  // Remove previous highlights
  const highlightedElements = document.getElementsByClassName('highlight');
  while (highlightedElements.length > 0) {
    highlightedElements[0].parentNode.replaceChild(highlightedElements[0].firstChild, highlightedElements[0]);
  }
  
  // Highlight new matches
  let match;
  while ((match = regex.exec(content.innerHTML)) !== null) {
    const span = document.createElement('span');
    span.className = 'highlight';
    const before = content.innerHTML.slice(0, match.index);
    const after = content.innerHTML.slice(regex.lastIndex);
    content.innerHTML = before + span.outerHTML + match[0] + span.outerHTML + after;
    regex.lastIndex += span.outerHTML.length - match[0].length;
  }
}
</script>

</body>
</html>