js拼接页面元素，v-html多个指定位置文本高亮，为v-html拼接的字符串绑定onclick事件

1.根据后端返参，在拿到高亮文字的起始位置与结束位置后，将第一段文本中多个指定位置的文本高亮

举个例子：

文本内容：阳光城在2012年发布的股票涨势很好。渤海汽车发布公告称，其与太平洋保险股份有限公司的合作将继续，持续共赢。

效果展示：

后端返参(多个字段分别有起始index与结束index)：

 实现思想：

1.1.将输入的文本使用字符串split方法分割为数组

1.2.遍历每一项返参，为数组中起始位置与终止位置对应的值添加标签与类名

str[item.index_begin] = `${str[item.index_begin]}`;

str[item.index_end - 1] = `${str[item.index_end - 1]}`;

分割后数组
[`阳`, '光', '城', '在', '2', '0', '1', '2', '年', '发', '布', '的', '股', '票', '涨', '势', '很', '好', '。', `渤`, '海', '汽', '车', '发', '布', '公', '告', '称', '，', '其', '与', `太`, '平', '洋', '保', '险', '股', '份', '有', '限', '公', '司', '的', '合', '作', '将', '继', '续', '，', '持', '续', '共', '赢', '。']

1.3.将修改后的数组通过join拼接为字符串后显示到页面上

代码展示：

let str = result.value.text.split("");
result.value.result.forEach((item, index) => {
     str[item.index_begin] = `${index},'link')">${str[item.index_begin]}`;
     str[item.index_end - 1] = `${str[item.index_end - 1]}`;
   });
result.value.text = str.join("");

2.js拼接元素并绑定onclick事件

1.3的代码中在使用js拼接页面元素的同时，在标签内绑定了onclik事件，我的项目用的是vue3，但是直接绑定setup中的函数后运行的话会报错：

Uncaught ReferenceError: checkedBtn is not defined
    at HTMLSpanElement.onclick (nel:1:1)

 解决这个问题只需要在页面dom挂载完成后使用将onclik绑定的setup函数挂载到window上即可

onMounted(() => {
  window.checkedBtn = checkedBtn;
});