vue replace()实现关键词高亮(多组关键词)全局匹配不区分大小写

直接上代码

<template>
  <div>
    <span v-html="str">  </span>
  </div>
</template>
<script>
export default {
  name: "APP",
  data() {
    return {
      strKeyWord: ["complete", "successful", "error", "failed"],
      str: "complete Comlete successful Successful error Error Failed failed",
    };
  },
  methods: {
    replaceArr(strKeyWord) {
      //关键词高亮方法
      for (var i = 0; i < strKeyWord.length; i++) {
        let str = this.str; //确保每一次循环都把被替换的str赋予到值中
        var oRegExp = new RegExp("(" + strKeyWord[i] + ")", "gi");
        this.str = str.replace(
          oRegExp,
          `<span style='color: red;'>$1</span>`
        );
      }
    },
  },
  created() {
    this.replaceArr(this.strKeyWord);
  },
};
</script>
<style lang="scss" scoped>
</style>

这里有非常关键的一个地方

let str = this.str; //确保每一次循环都把被替换的str赋予到值中

我们来看一下不写这段代码的结果

不写会造成只匹配到最后一个关键词高亮，那么是什么原因造成的呢？我们用debugger和console.log(）来查询原因。

问题的原因就显而易见了，for循环执行了四次替换，而前三次替换的值并没有赋予到data中。是因为for循环的时候拿到的是初始的str，所以我们只要在循环体中加入let str = this.str;就可以在每一次循环的过程中不停的刷新str的值，最后得到的结果就是所有高亮匹配的结果。

顺便提一下“g”是全局匹配“i”是不区分大小写