JavaScript实现的搜索及高亮显示功能示例

下面是“JavaScript实现的搜索及高亮显示功能示例”的完整攻略：

总体思路

实现搜索及高亮显示的功能，需要利用JavaScript的字符串操作、DOM操作以及正则表达式。主要的思路如下：

获取搜索框中输入的关键词；
遍历页面中需要搜索的元素，将元素中匹配到的关键词进行高亮显示；
将搜索框中输入的关键词进行正则表达式转换，获取匹配规则。

代码实现

下面利用两个示例来演示搜索及高亮显示的功能。

示例一：搜索文章标题

在这个示例中，我们实现搜索文章标题的功能。具体的实现过程如下：

获取搜索框中输入的关键词。

const keyword = document.getElementById('search-input').value;

遍历页面中需要搜索的元素，将元素中匹配到的关键词进行高亮显示。这里需要找到所有的标题元素。

const titles = document.querySelectorAll('.article-title');

将元素中匹配到的关键词进行高亮显示。

titles.forEach((title) => {
  const reg = new RegExp('(' + keyword + ')', 'gi');
  const text = title.innerHTML.replace(reg, '<span class="highlighted">$1</span>');
  title.innerHTML = text;
});

在这段代码中，我们先利用正则表达式将匹配到的关键词转换成一个可以用于替换的字符串模式，然后将原始的字符串利用replace()函数进行替换。

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>搜索文章标题</title>
  <meta charset="utf-8">
  <style>
    .highlighted {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <input type="text" id="search-input">
  <ul>
    <li class="article">
      <h2 class="article-title">JavaScript实现的搜索及高亮显示功能示例</h2>
      <p class="article-content">这是一篇篇关于JavaScript实现搜索及高亮显示功能的示例文章。</p>
    </li>
    <li class="article">
      <h2 class="article-title">JavaScript数组的常用方法介绍</h2>
      <p class="article-content">本篇文章介绍了JavaScript数组的常用方法，包括push、pop、shift、unshift等。</p>
    </li>
  </ul>
  <script>
    const searchInput = document.getElementById('search-input');
    searchInput.addEventListener('input', function() {
      const keyword = searchInput.value;
      const titles = document.querySelectorAll('.article-title');
      titles.forEach((title) => {
        const reg = new RegExp('(' + keyword + ')', 'gi');
        const text = title.innerHTML.replace(reg, '<span class="highlighted">$1</span>');
        title.innerHTML = text;
      });
    });
  </script>
</body>
</html>

示例二：搜索列表项

在这个示例中，我们实现搜索列表项的功能。具体的实现过程如下：

获取搜索框中输入的关键词。

const keyword = document.getElementById('search-input').value;

遍历页面中需要搜索的元素，将元素中匹配到的关键词进行高亮显示。这里需要找到所有的列表项元素。

const listItems = document.querySelectorAll('.list-item');

将元素中匹配到的关键词进行高亮显示。

listItems.forEach((item) => {
  const reg = new RegExp('(' + keyword + ')', 'gi');
  const text = item.innerHTML.replace(reg, '<span class="highlighted">$1</span>');
  item.innerHTML = text;
});