(vue)将文本和关键字做对比类似词性标注

(vue)将文本和关键字做对比类似词性标注

最终效果：

html:

<div class="content-main" v-html="changeCompare(value7, text)"></div>
<div class="content-type"> 
  <h3>实体类型图示：</h3>
  <ul>
    <li
      class="content-type-label"
      v-for="(item, index) in textList"
      :key="index"
      :style="`background: ${item.color}`" //每个类型标签匹配对应颜色
    >
      {{ item.label }}
    </li>
  </ul>
</div>

js：

data() {
	retuen {
		 value7: "",
         text: "",
         contentTest: [], //各类型文本
      	 color: "", //各类型颜色
      	 //测试数据
      	 textList: [
	        {
	          label: "模型",
	          content: ["模型1", "模型2", "模型3"],
	          color: "red",
	        },
	        {
	          label: "相关性",
	          content: ["相关性1", "相关性2", "相关性3"],
	          color: "green",
	        },
	        {
	          label: "螺蛳粉",
	          content: ["螺蛳粉1", "螺蛳粉2", "螺蛳粉3"],
	          color: "blue",
	        },
      ],
	}
}

methods: {
    //识别后的文本展示
    changeCompare(val, keyword) {
      val = "测试文本1: 模型1,模型2,模型3; 测试文本2: 相关性1,相关性2,相关性3; 测试文本3: 螺蛳粉1,螺蛳粉2,螺蛳粉3。";
      //遍历数据
      if (this.textList.length < 1) {
        return val;
      } else {
        this.textList.forEach((item1) => {
          this.color = item1.color;
          this.contentTest = item1.content;          
          this.contentTest.forEach((item) => {
            keyword = item;
            val = val + "";
            if (val.indexOf(item) !== -1 && item !== "") {
              val = val.replace(
                new RegExp(item, "g"),
                `<font color='#000' style="background-color: ${this.color};border-radius: 5px;padding: 4px 6px;">${item}</font>`
              );
            }
          });
        });
        return val;
      }
}