JavaScript 如何高亮显示搜索字符串的结果

在Web应用程序中，搜索大量文本中的特定内容是一项常见任务。然而，如果仅仅显示搜索结果而没有任何视觉指示，用户将很难识别并集中注意力于相关信息。这就是高亮显示搜索字符串的需求产生的地方。通过动态高亮显示文本中匹配的部分，我们可以改善用户体验，并使用户更容易定位所需内容。

在本篇博客文章中，我们将探讨使用JavaScript高亮显示搜索字符串的不同方法。我们将涵盖各种技术，从操作HTML内容到使用正则表达式和CSS样式。无论您是为网站构建搜索功能，还是在开发基于文本的应用程序，这些方法将让您能够增强搜索结果的可见性，并提供更直观的用户界面。

方法1 – 操作内部HTML

一种简单直接的高亮显示搜索字符串的方法是通过操作包含文本的元素的内部HTML。该方法涉及到在文本中找到搜索字符串的出现，并使用HTML标签或应用内联样式将它们高亮显示。

要实现此方法，请按照以下步骤操作：

检索进行搜索的目标元素的内容。
使用replace()方法或正则表达式查找和替换搜索字符串为高亮版本。
使用HTML标签将匹配的字符串包装起来，或者应用内联样式将其高亮显示。
将修改后的内容设置回目标元素的内部HTML。

让我们以一个示例来说明。假设我们有一个具有类名”content”的HTML元素，我们想要高亮显示其中的搜索字符串的出现。我们可以使用以下JavaScript代码：

// Get the target element
const contentElement = document.querySelector('.content');

// Retrieve the content
const content = contentElement.innerHTML;

// Replace the search string with the highlighted version
const highlightedContent = content.replace(/search-string/gi, '$&');

// Set the modified content back to the element
contentElement.innerHTML = highlightedContent;

在上面的代码中，我们使用replace()方法和正则表达式来查找和替换所有出现的搜索字符串为高亮版本。替换字符串中的$&表示匹配到的字符串本身。我们把它包裹在一个元素中，并应用”highlight”类来设置样式。

示例

以下是这个示例的效果−

<!DOCTYPE html>
<html>
<head>
   <style>
      .highlight {
         background-color: yellow;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Aliquam cursus maximus eros, non consequat nulla vulputate id. 
      Sed porttitor quam a felis viverra lacinia. 
      Vestibulum vestibulum massa at orci ultrices, in maximus tellus aliquam.
   </div>
   <form>
      <input type="text" id="searchInput" placeholder="Search...">
      <button type="button" onclick="highlightText()">Search</button>
   </form>
   <script>
      function highlightText() {
         const searchInput = document.getElementById('searchInput');
         const searchValue = searchInput.value.trim();
         const contentElement = document.querySelector('.content');

         if (searchValue !== '') {
         const content = contentElement.innerHTML;
         const highlightedContent = content.replace(
            new RegExp(searchValue, 'gi'),
            '<span class="highlight">$&</span>'
         );
         contentElement.innerHTML = highlightedContent;
         } else {
            contentElement.innerHTML = contentElement.textContent;
         }
      }
   </script>
</body>
</html>

在这个示例中，我们有一个包含一些示例文本的内容div的HTML文档。我们还有一个用于用户输入搜索字符串的输入字段和一个搜索按钮。当用户点击搜索按钮时，将触发highlightText()函数。

在highlightText()函数中，我们从输入字段中获取搜索字符串并修剪任何前导或尾随的空格。如果搜索字符串不为空，我们使用它的innerHTML属性检索contentElement的内容。然后，我们使用replace()方法和正则表达式将所有出现的搜索字符串（不区分大小写）替换为带有“highlight”类的高亮版本。匹配的字符串（$&）被包装在一个p元素中。

如果搜索字符串为空，我们通过将contentElement的inner HTML设置为其文本内容来恢复原始内容。

方法2：使用CSS类进行高亮

在这种方法中，我们将利用CSS类来突出显示搜索的字符串，而不是操纵inner HTML。以下是如何做到这一点。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .highlight {
         background-color: yellow;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Aliquam cursus maximus eros, non consequat nulla vulputate id. 
      Sed porttitor quam a felis viverra lacinia. 
      Vestibulum vestibulum massa at orci ultrices, in maximus tellus aliquam.
   </div>

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

   <script>
      function highlightText() {
         const searchInput = document.getElementById('searchInput');
         const searchValue = searchInput.value.trim();
         const contentElement = document.querySelector('.content');

         if (searchValue !== '') {
            const content = contentElement.textContent;
            const regex = new RegExp(searchValue, 'gi');
            const highlightedContent = content.replace(
               regex,
               (match) => `<span class="highlight">${match}</span>`
            );
            contentElement.innerHTML = highlightedContent;
          } else {
             contentElement.innerHTML = contentElement.textContent;
          }
       }
   </script>
</body>
</html>

在这个示例中，我们定义了一个名为”highlight”的CSS类，应用所需的高亮文本样式。在highlightText()函数中，我们获取搜索字符串，修剪它，并使用其文本内容检索contentElement的内容。然后，我们使用搜索字符串和标志’gi’（全局和不区分大小写）创建一个正则表达式。接下来，我们使用replace()方法在内容字符串上替换所有出现的搜索字符串为高亮版本。我们不使用字符串替换，而是使用一个回调函数，将匹配的字符串包装在一个带有”highlight”类的元素中。最后，我们将contentElement的内部HTML设置为高亮内容。如果搜索字符串为空，我们通过将内部HTML设置为文本内容来恢复原始内容。方法3：使用正则表达式在这种方法中，我们将利用正则表达式的强大功能来动态高亮搜索字符串。正则表达式提供了一种灵活和强大的方式来匹配字符串中的模式。下面是我们如何使用正则表达式来高亮搜索字符串的方法。

<!DOCTYPE html>
<html>
<head>
   <style>
      .highlight {
         background-color: yellow;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Aliquam cursus maximus eros, non consequat nulla vulputate id. 
      Sed porttitor quam a felis viverra lacinia. 
      Vestibulum vestibulum massa at orci ultrices, in maximus tellus aliquam.
   </div>   
   <form>
      <input type="text" id="searchInput" placeholder="Search...">
      <button type="button" onclick="highlightText()">Search</button>
   </form>   
   <script>
      function highlightText() {
         const searchInput = document.getElementById('searchInput');
         const searchValue = searchInput.value.trim();
         const contentElement = document.getElementById('content');

         if (searchValue !== '') {
         const content = contentElement.innerHTML;
         const regex = new RegExp(`( ${searchValue})`, 'gi'); const highlightedContent = content.replace( regex, '<span class="highlight">$ 1</span>'
         );
         contentElement.innerHTML = highlightedContent;
         } else {
            contentElement.innerHTML = contentElement.textContent;
         }
      }
   </script>
</body>
</html>

在这个示例中，我们使用RegExp构造函数定义一个正则表达式，传递搜索值和标志’gi’（全局且不区分大小写）。我们将搜索值用括号括起来，以将其捕获为一个组。

在highlightText()函数内部，我们获取搜索字符串，对其进行修整，并获取contentElement的内部HTML内容。然后，我们在content字符串上使用replace()方法，提供正则表达式和一个替换字符串，该替换字符串将匹配的搜索值包装在一个带有“highlight”类的元素中。