vue，大段落文本，里面特殊字符，特殊样式显示

效果图:

代码

<template>
  <div>
    <div v-html="showContentStyle(content)"></div>
  </div>
</template>

<script>
export default {
  components: {
    changeTab,
  },
  data() {
    return {
      searchWord: "浙江",
      searchWord1: "领导",
      searchWord3: ["领导", "浙江", "", "公司"],  
      content:
        "尊敬的领导你好，我反应的情况是中国水利水电工程十二局有限公司浙江公司，拖欠我的装载机租金和驾驶员工资。　我在四川甘孜州道孚县瓦日乡密瓦9标修建雅砻江电站修复建路，买了一台三陵装载机在密瓦9标拌合站上料拌混凝土，2019年欠我5万元钱，，　，每次找领导他们都说没有钱，都说总成包(四川勘察研究院有限公司)不给钱没有办法，我也是实在没有办法了才向浙江领导求助，到2020年11月底工地完工一共欠我15.075万元。到现在他们的领导都不知道在哪里，谢谢！希望领导能帮我解决一下困难，　四川省甘孜州道孚县瓦日乡(雅砻江电站复建路密瓦9标中国水利水电十二工程局)",
     
    };
  },
  computed: {
    showContentStyle() {
      let info = this;
      return (node) => {
        // 配置特殊文字的颜色
        function state(status,style) {
          let state = new Map([
            [info.searchWord, {color:'#ccc',size:'4'}], //  指定字段
            [info.searchWord1,{color:'red',size:'4'}],
            ["公司", {color:"#539C01",size:'4'}],
          ]);
          return state.get(status)[style];
        }
        // 循环获有样式的取字符串
        this.searchWord3.map((item, index) => {
        // 遇到 '' 直接返回
          if (item === "") return;
          node = node.replace(new RegExp(item, "g"), (obj) => {
            return `<font color="${state(item,'color')}" size="${state(item,'size')}">${obj}</font>`;
          });
        });
        return node;
      };
    },
    },
  },
  methods: {
    show() {},
  },
};
</script>

<style lang="less" scoped></style>