VUE如何使用V-HTML实现搜索关键字高亮？解决方案来了！

在开发过程中，我们经常会遇到这样的需求：搜索某个关键词，后端返回给我们一个字符串，我们需要把这个字符串中的关键词部分加上高亮效果（类似于百度搜索关键词高亮的效果）。那么，在VUE中，我们该如何实现这个效果呢？

解决办法

有两种方法可以实现VUE中关键词高亮：

第一种方法：使用正则表达式

我们可以使用正则表达式来匹配字符串中的关键词，然后用mark标签将匹配到的关键词包裹起来。具体代码如下：

const input = '这是一个包含关键词的字符串';
const keyword = '关键词';
const regex = new RegExp(keyword, 'gi');
const output = input.replace(regex, `<mark>${keyword}</mark>`);

console.log(output);

输出结果：

<p>这是一个包含<mark>关键词</mark>的字符串</p>

第二种方法：使用V-HTML指令

VUE中的v-html指令可以将一段字符串当作HTML代码来解析。因此，我们可以使用v-html指令来将搜索的关键词用HTML标签包裹起来，从而实现关键词高亮的效果。具体代码如下：

<template>
  <div>
    <p v-html="highlightedString"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '这是一个包含关键词的字符串',
      keyword: '关键词',
      highlightedString: '',
    };
  },
  created() {
    this.highlightKeyword();
  },
  methods: {
    highlightKeyword() {
      const regex = new RegExp(this.keyword, 'gi');
      this.highlightedString = this.input.replace(regex, `<mark>${this.keyword}</mark>`);
    },
  },
};
</script>

输出结果与第一种方法相同：

<p>这是一个包含<mark>关键词</mark>的字符串</p>

总结

以上就是如何在VUE中使用V-HTML实现搜索关键词高亮的两种方法。第一种方法使用正则表达式，第二种方法使用V-HTML指令。这两种方法都可以实现关键词高亮的效果，但第二种方法更加简单和直观。