原生js实现html查找,JS实现前端页面的搜索功能

要实现前端页面的搜索功能，可以使用以下步骤：

1. 获取页面上的所有需要搜索的内容，可以是文本、链接、图片等等。

2. 创建一个搜索框，用于用户输入搜索关键词。

3. 监听搜索框的输入事件，获取用户输入的关键词。

4. 遍历页面的所有需要搜索的内容，使用JavaScript的正则表达式匹配用户输入的关键词。

5. 如果找到匹配的内容，则将其高亮显示，或者在一个结果列表中显示。

下面是一个简单的示例代码：

HTML部分：

<input type="text" id="searchBox" placeholder="请输入搜索关键词">
<div id="searchResult"></div>
<div>
  <p>这是一段要搜索的文本</p>
  <a href="#">这是一个链接</a>
  <img src="image.jpg" alt="这是一张图片">
</div>

JavaScript部分：

// 获取需要搜索的内容
const content = document.querySelectorAll('p, a, img');

// 监听搜索框的输入事件
const searchBox = document.getElementById('searchBox');
searchBox.addEventListener('input', () => {
  // 获取用户输入的关键词
  const keyword = searchBox.value;
  
  // 遍历所有需要搜索的内容
  content.forEach(item => {
    // 使用正则表达式匹配关键词
    const regex = new RegExp(keyword, 'gi');
    const match = item.textContent.match(regex);
    
    // 如果找到匹配的内容，则高亮显示
    if (match) {
      const highlighted = item.textContent.replace(regex, '<span class="highlight">$&</span>');
      item.innerHTML = highlighted;
    }
  });
  
  // 在结果列表中显示匹配的内容
  const searchResult = document.getElementById('searchResult');
  searchResult.innerHTML = '';
  content.forEach(item => {
    if (item.textContent.includes(keyword)) {
      const resultItem = document.createElement('div');
      resultItem.textContent = item.textContent;
      searchResult.appendChild(resultItem);
    }
  });
});

CSS部分：

.highlight {
  background-color: yellow;
}

当用户输入关键词时，JavaScript会遍历页面上的所有需要搜索的内容，匹配关键词并高亮显示匹配的内容。同时，还会在结果列表中显示匹配的内容。