如何使用Vue3实现文章内容中多个”关键词”标记高亮显示

使用Vue3实现文章内容中多个"关键词"标记高亮显示，一般可以通过以下步骤实现：

1. 获取文章内容和关键词列表：首先需要在Vue组件中获取文章内容和关键词列表。可以从父组件传递文章信息和关键词信息给子组件，或者使用Vue的数据绑定机制来获取数据。

2. 对文章内容进行高亮处理：遍历关键词列表，对每个关键词在文章内容中进行替换，替换后的内容使用高亮样式展示。

下面我们来具体实现这个功能：

1. 获取文章内容和关键词列表

我们假设文章信息包含title和content两个字段，关键词列表是一个字符串数组keywords。

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <div v-html="highlightedContent"></div>
  </div>
</template>

<script>
export default {
  props: {
    article: {
      type: Object,
      required: true
    },
    keywords: {
      type: Array,
      required: true
    }
  },
  computed: {
    highlightedContent() {
      let content = this.article.content;
      for (const keyword of this.keywords) {
        content = content.replace(
          new RegExp(keyword, "gi"),
          match => `<span class="highlight">${match}</span>`
        );
      }
      return content;
    }
  }
};
</script>

1. 对文章内容进行高亮处理

我们使用正则表达式在文章内容中查找关键词，并用<span>标签将它们包裹，并添加类名highlight。

在上述代码中，我们定义了一个计算属性highlightedContent，用于替换文章内容中的关键词并添加高亮样式，最终将这个计算属性展示在页面中。

示例1: 在文章列表页面中展示文章

在一个文章列表页面中，可能需要对每篇文章的标题和预览内容都进行关键词高亮处理。可以通过一个组件来实现这个功能。

<template>
  <div>
    <h2>Articles</h2>
    <ul>
      <li v-for="article in articles" :key="article.id">
        <h3>{{ highlight(article.title) }}</h3>
        <p v-html="highlight(article.preview)"></p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    articles: {
      type: Array,
      required: true
    },
    keywords: {
      type: Array,
      required: true
    }
  },
  methods: {
    highlight(text) {
      for (const keyword of this.keywords) {
        text = text.replace(
          new RegExp(keyword, "gi"),
          match => `<span class="highlight">${match}</span>`
        );
      }
      return text;
    }
  }
};
</script>

在这个组件中，我们使用v-for指令遍历所有文章，并在每个文章标题和内容中使用highlight方法进行关键词高亮处理。

示例2: 在评论中展示用户搜索到的关键词和上下文

在一个评论页面中，可能需要对用户搜索到的关键词在评论中进行高亮处理，并展示关键词的上下文。可以通过以下代码实现这个功能。

<template>
  <div>
    <h2>Search Results for "{{ query }}"</h2>
    <ul>
      <li v-for="result in results" :key="result.id">
        <h3>{{ result.title }}</h3>
        <p>{{ highlight(result.content, result.match) }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    query: {
      type: String,
      required: true
    },
    results: {
      type: Array,
      required: true
    }
  },
  methods: {
    highlight(text, match) {
      const regexp = new RegExp(match, "gi");
      const startIndex = text.search(regexp);
      const endIndex = startIndex + match.length;
      const context =
        text.substr(startIndex - 50, 50) +
        "<span class='highlight'>" +
        text.substr(startIndex, match.length) +
        "</span>" +
        text.substr(endIndex, 50);
      return context;
    }
  }
};
</script>

在这个组件中，我们假设用户搜索的关键词是query，并且搜索结果是一个数组，每个结果包含title、content以及match字段。match字段是该结果中匹配到的关键词。

在highlight方法中，我们使用RegExp对象在评论内容中查找匹配的关键词，然后根据关键词的位置生成上下文，用<span>标签高亮显示关键词。

这样就可以实现对多个关键词的标记高亮显示了。