如何使用 JavaScript 突出显示搜索到的字符串结果？-js教程-PHP中文网

首页

web前端

js教程

如何使用 JavaScript 突出显示搜索到的字符串结果？

PHPz

Sep 01, 2023 pm 12:49 PM

如何使用 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>

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

在highlightText()函数中，我们从输入字段中检索搜索字符串并修剪任何前导或尾随空格。如果搜索字符串不为空，我们将使用其内部 HTML 检索 contentElement 的内容。然后，我们使用 Replace() 方法和正则表达式将所有出现的搜索字符串（不区分大小写）替换为突出显示的版本。匹配的字符串 ($&) 包装在具有“highlight”类的元素中。

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

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

在此方法中，我们将利用 CSS 类来突出显示搜索到的字符串，而不是操作内部 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 设置为文本内容来恢复原始内容。

方法三：使用正则表达式

在此方法中，我们将利用正则表达式的强大功能来动态突出显示搜索到的字符串。正则表达式提供了一种灵活而强大的方法来匹配字符串中的模式。以下是我们如何使用正则表达式突出显示搜索到的字符串−

示例

<!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()函数内，我们检索搜索字符串，修剪它，并使用其内部HTML检索contentElement的内容。然后，我们对内容字符串使用 Replace() 方法，提供正则表达式和替换字符串，该替换字符串将匹配的搜索值包装在具有“highlight”类的元素中。

方法比较

现在，让我们比较一下我们所介绍的方法 -

方法 1：操作内部 HTML

性能− 此方法对于中小型文本非常有效，但由于字符串操作操作，对于较大文本可能会变慢。
易于实施− 使用 JavaScript 的内置字符串函数实现起来相对容易。
灵活性− 它在自定义突出显示样式和处理区分大小写方面提供了灵活性。
浏览器兼容性−此方法在现代浏览器中得到广泛支持。

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

性能− 与其他方法相比，此方法可能会更慢，尤其是在处理大文本或由于 DOM 操作开销而导致频繁搜索操作时。
易于实施− 它需要对 DOM 操作有很好的理解，并且可能涉及更复杂的代码。
灵活性− 它在自定义突出显示样式和处理区分大小写方面提供了灵活性。
浏览器兼容性−现代浏览器支持此方法，但不同实现的行为可能会略有不同。

方法三：使用正则表达式

性能− 正则表达式可以非常高效地搜索和突出显示文本，即使数据量很大也是如此。
易于实施− 实现正则表达式需要对其语法有深入的了解，这对于初学者来说可能更具挑战性。
灵活性−正则表达式提供强大的模式匹配功能，允许高级搜索和突出显示选项。
浏览器兼容性− 现代浏览器广泛支持正则表达式，但某些旧版本在正则表达式支持方面可能存在限制或变化。

结论

在本文中，我们探索了使用 JavaScript 突出显示搜索字符串的不同方法。每种方法都有自己的优点和考虑因素，因此根据性能、易于实现、灵活性和浏览器兼容性等因素对其进行评估至关重要。

通过了解这些方法，您可以增强 Web 应用程序的搜索功能并提供更直观的用户体验。

以上是如何使用 JavaScript 突出显示搜索到的字符串结果？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。