手把手带你从零实现搜索并高亮文字

在前端开发中，我们经常会遇到搜索并高亮文字的需求。比如，在搜索引擎中，当用户输入关键词后，搜索结果中的相关文字会被高亮显示。这种功能不仅可以帮助用户快速定位相关内容，还能提升用户体验。

实现搜索并高亮文字的方法有很多，其中最常见的两种是插入标签和贴标签。这两种方式各有优缺点，适合不同的场景。本文将详细介绍这两种实现方式，并提供具体的操作步骤。

一、插入标签

插入标签的方式相对简单，只需要在搜索结果中找到要高亮的文字，然后用<mark>标签将其包裹起来即可。<mark>标签是一个HTML元素，用于标记重要或需要强调的文字。当浏览器解析<mark>标签时，会自动将标签内的文字高亮显示。

<p>这是一段文字，其中包含要高亮的文字。</p>

<script>
  // 获取要高亮的文字
  const text = '要高亮的文字';

  // 找到包含要高亮的文字的元素
  const element = document.querySelector('p');

  // 在要高亮的文字周围插入`<mark>`标签
  element.innerHTML = element.innerHTML.replace(text, `<mark>${text}</mark>`);
</script>

上面的代码片段演示了如何使用插入标签的方式来高亮文字。首先，我们获取要高亮的文字。然后，我们找到包含要高亮的文字的元素。最后，我们用<mark>标签将要高亮的文字包裹起来。

二、贴标签

贴标签的方式与插入标签的方式相似，但它使用的是<span>标签。<span>标签是一个HTML元素，用于为一段文字添加样式。当浏览器解析<span>标签时，会将标签内的文字应用指定的样式。

<p>这是一段文字，其中包含要高亮的文字。</p>

<script>
  // 获取要高亮的文字
  const text = '要高亮的文字';

  // 找到包含要高亮的文字的元素
  const element = document.querySelector('p');

  // 在要高亮的文字周围插入`<span>`标签
  element.innerHTML = element.innerHTML.replace(text, `<span class="highlight">${text}</span>`);
</script>

<style>
  .highlight {
    background-color: yellow;
  }
</style>

上面的代码片段演示了如何使用贴标签的方式来高亮文字。首先，我们获取要高亮的文字。然后，我们找到包含要高亮的文字的元素。最后，我们用<span>标签将要高亮的文字包裹起来，并为<span>标签添加一个名为“highlight”的类。然后，我们在<style>标签中定义“highlight”类的样式，将背景色设置为黄色。

三、优缺点对比

插入标签和贴标签两种方式各有优缺点，适合不同的场景。

插入标签

• 优点：
  • 简单易用，只需要在要高亮的文字周围插入<mark>标签即可。
  • 不需要添加额外的样式。
• 缺点：
  • 破坏原有的HTML结构，可能会导致布局混乱。
  • <mark>标签不支持自定义样式。

贴标签

• 优点：
  • 不破坏原有的HTML结构，保持布局的完整性。
  • 支持自定义样式，可以根据需要调整高亮的样式。
• 缺点：
  • 需要添加额外的样式。
  • 实现起来可能比插入标签的方式复杂一些。

四、适用场景

插入标签 适用于以下场景：

• 需要快速实现搜索并高亮文字的功能。
• 不需要自定义高亮的样式。

贴标签 适用于以下场景：

• 需要保持原有的HTML结构，避免布局混乱。
• 需要自定义高亮的样式。

五、总结

搜索并高亮文字是一种常见的前端需求，可以提高用户体验，并帮助用户快速定位相关内容。本文介绍了两种实现搜索并高亮文字的方法：插入标签和贴标签。这两种方式各有优缺点，适合不同的场景。开发者可以根据自己的需求选择合适的方式来实现。