HTML 如何实现网页内搜索功能

最简单的实现方式是使用 HTML 的 input 元素。我们可以将 input 元素的 type 属性设置为 search,并通过 JavaScript 监听 input 元素的 keyup 事件,实时获取用户输入的关键词,使用 JavaScript 对网页内容进行匹配和高亮显示。以下是一个简单的示例代码:

<input type="search" id="searchInput" placeholder="请输入关键词搜索">
<div id="searchResults"></div>

<script>
  const searchInput = document.getElementById('searchInput');
  const searchResults = document.getElementById('searchResults');

  searchInput.addEventListener('keyup', function() {
    const keyword = this.value.toLowerCase();
    const content = document.body.innerText.toLowerCase();
    const regex = new RegExp(keyword, 'g');
    const highlightedContent = content.replace(regex, '<span class="highlight">$&</span>');
    searchResults.innerHTML = highlightedContent;
  });
</script>

另一种实现方式是使用 HTML 的 datalist 元素。datalist 元素可以为 input 元素提供预定义的选项,用户可以在输入时获得智能提示。我们可以将预定义的搜索关键词放入 datalist 元素中,并通过 JavaScript 监听 input 元素的 input 事件,实时过滤和展示匹配的结果。以下是一个示例代码:

<input type="text" id="searchInput" list="searchOptions" placeholder="请输入关键词搜索">
<datalist id="searchOptions">
  <option value="HTML">HTML</option>
  <option value="CSS">CSS</option>
  <option value="JavaScript">JavaScript</option>
  <option value="React">React</option>
  <option value="Vue.js">Vue.js</option>
</datalist>
<div id="searchResults"></div>

<script>
  const searchInput = document.getElementById('searchInput');
  const searchResults = document.getElementById('searchResults');

  searchInput.addEventListener('input', function() {
    const keyword = this.value.toLowerCase();
    const options = document.querySelectorAll('#searchOptions option');
    const matchedOptions = Array.from(options).filter(option => option.value.toLowerCase().includes(keyword));
    searchResults.innerHTML = matchedOptions.map(option => `<div>${option.value}</div>`).join('');
  });
</script>

除上述两种方式,我们还可以使用 HTML 的 form 元素和 submit 事件来实现网页内搜索功能。在这种方式中,我们将 form 元素与 input 元素结合使用,并通过监听 form 元素的 submit 事件来获取用户输入的关键词,使用 JavaScript 对网页内容进行搜索和高亮显示。以下是一个示例代码:

<form id="searchForm">
  <input type="text" id="searchInput" placeholder="请输入关键词搜索">
  <button type="submit">搜索</button>
</form>
<div id="searchResults"></div>

<script>
  const searchForm = document.getElementById('searchForm');
  const searchInput = document.getElementById('searchInput');
  const searchResults = document.getElementById('searchResults');

  searchForm.addEventListener('submit', function(event) {
    event.preventDefault();
    const keyword = searchInput.value.toLowerCase();
    const content = document.body.innerText.toLowerCase();
    const regex = new RegExp(keyword, 'g');
    const highlightedContent = content.replace(regex, '<span class="highlight">$&</span>');
    searchResults.innerHTML = highlightedContent;
  });
</script>

以上三种方式都可以实现网页内搜索功能,每种方式都有自己的特点和适用场景。开发者可以根据具体需求选择合适的方式进行实现。