Vue3怎么实现文章内容中多个关键词标记高亮显示

在Web开发中，我们经常需要处理文本内容，并且有时需要对文本中的某些关键词进行高亮显示。例如，在搜索引擎结果页面中，用户输入的关键词会被高亮显示在搜索结果中。在Vue3中，我们可以通过多种方式实现这一功能。本文将详细介绍如何在Vue3中实现文章内容中多个关键词的标记高亮显示。

1. 需求分析

在实现关键词高亮显示之前，我们需要明确需求：

1. 关键词高亮：用户输入多个关键词，这些关键词在文章内容中需要被高亮显示。
2. 动态更新：当用户输入新的关键词时，高亮显示的内容需要实时更新。
3. 区分大小写：高亮显示是否区分大小写。
4. 样式自定义：高亮显示的样式可以自定义，例如背景颜色、字体颜色等。

2. 实现思路

为了实现上述需求，我们可以采用以下步骤：

1. 获取文章内容和关键词：从用户输入或API获取文章内容和关键词列表。
2. 关键词匹配：使用正则表达式匹配文章内容中的关键词。
3. 高亮显示：将匹配到的关键词用HTML标签包裹，并应用自定义样式。
4. 动态更新：监听关键词的变化，实时更新高亮显示的内容。

3. 实现步骤

3.1 创建Vue3项目

首先，我们需要创建一个Vue3项目。如果你还没有安装Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

然后，创建一个新的Vue3项目：

vue create vue-highlight-keywords

进入项目目录并启动开发服务器：

cd vue-highlight-keywords
npm run serve

3.2 创建组件

在src/components目录下创建一个新的组件HighlightKeywords.vue：

<template>
  <div>
    <textarea v-model="content" placeholder="请输入文章内容"></textarea>
    <input v-model="keywordsInput" placeholder="请输入关键词，用逗号分隔" />
    <div v-html="highlightedContent"></div>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';

export default {
  name: 'HighlightKeywords',
  setup() {
    const content = ref('');
    const keywordsInput = ref('');
    const keywords = ref([]);

    // 监听关键词输入的变化
    watch(keywordsInput, (newVal) => {
      keywords.value = newVal.split(',').map(keyword => keyword.trim());
    });

    // 计算属性：高亮显示的内容
    const highlightedContent = computed(() => {
      if (!keywords.value.length) return content.value;

      let highlightedText = content.value;
      keywords.value.forEach(keyword => {
        const regex = new RegExp(`(${keyword})`, 'gi');
        highlightedText = highlightedText.replace(regex, '<span class="highlight">$1</span>');
      });

      return highlightedText;
    });

    return {
      content,
      keywordsInput,
      highlightedContent,
    };
  },
};
</script>

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

3.3 使用组件

在src/App.vue中使用刚刚创建的HighlightKeywords组件：

<template>
  <div id="app">
    <HighlightKeywords />
  </div>
</template>

<script>
import HighlightKeywords from './components/HighlightKeywords.vue';

export default {
  name: 'App',
  components: {
    HighlightKeywords,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3.4 运行项目

现在，你可以运行项目并查看效果。在文本框中输入文章内容，并在关键词输入框中输入关键词（用逗号分隔），文章内容中的关键词将会被高亮显示。

4. 代码解析

4.1 数据绑定

在HighlightKeywords.vue组件中，我们使用了v-model指令来实现双向数据绑定：

• content：绑定到textarea，用于获取用户输入的文章内容。
• keywordsInput：绑定到input，用于获取用户输入的关键词。

4.2 监听关键词变化

我们使用watch函数来监听keywordsInput的变化。当用户输入新的关键词时，keywordsInput的值会发生变化，watch函数会自动执行，将输入的关键词字符串分割成数组，并存储在keywords中。

watch(keywordsInput, (newVal) => {
  keywords.value = newVal.split(',').map(keyword => keyword.trim());
});

4.3 高亮显示

在highlightedContent计算属性中，我们遍历keywords数组，使用正则表达式匹配文章内容中的关键词，并将其用<span>标签包裹，并应用highlight类。

const highlightedContent = computed(() => {
  if (!keywords.value.length) return content.value;

  let highlightedText = content.value;
  keywords.value.forEach(keyword => {
    const regex = new RegExp(`(${keyword})`, 'gi');
    highlightedText = highlightedText.replace(regex, '<span class="highlight">$1</span>');
  });

  return highlightedText;
});

4.4 样式自定义

在<style>标签中，我们定义了highlight类的样式，用于高亮显示关键词：

.highlight {
  background-color: yellow;
  font-weight: bold;
}

你可以根据需要自定义高亮显示的样式。

5. 优化与扩展

5.1 区分大小写

默认情况下，正则表达式是区分大小写的。如果你希望高亮显示不区分大小写，可以在正则表达式中添加i标志：

const regex = new RegExp(`(${keyword})`, 'gi');

5.2 关键词去重

如果用户输入了重复的关键词，可能会导致重复高亮显示。我们可以在watch函数中对关键词进行去重：

watch(keywordsInput, (newVal) => {
  keywords.value = [...new Set(newVal.split(',').map(keyword => keyword.trim()))];
});

5.3 性能优化

如果文章内容非常长，或者关键词非常多，高亮显示可能会导致性能问题。为了优化性能，可以考虑以下方法：

• 节流：使用lodash的throttle函数来限制高亮显示的频率。
• 虚拟滚动：对于非常长的文章内容，可以使用虚拟滚动技术，只渲染可见部分的内容。

5.4 支持HTML标签

如果文章内容中包含HTML标签，直接使用v-html可能会导致XSS攻击。为了安全起见，可以使用DOMPurify等库对HTML内容进行净化。

npm install dompurify

然后在组件中使用：

import DOMPurify from 'dompurify';

const highlightedContent = computed(() => {
  if (!keywords.value.length) return DOMPurify.sanitize(content.value);

  let highlightedText = content.value;
  keywords.value.forEach(keyword => {
    const regex = new RegExp(`(${keyword})`, 'gi');
    highlightedText = highlightedText.replace(regex, '<span class="highlight">$1</span>');
  });

  return DOMPurify.sanitize(highlightedText);
});

6. 总结

通过本文的介绍，我们学习了如何在Vue3中实现文章内容中多个关键词的标记高亮显示。我们使用了Vue3的响应式系统、计算属性、监听器等特性，结合正则表达式和HTML标签，实现了这一功能。此外，我们还探讨了如何优化性能、支持HTML标签等扩展功能。

希望本文对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言。