contenteditable联合v-html实现数据双向绑定的，v-html多个指定位置文本高亮，可修改加校验，给v-html中的标签添加输入事件，截取字符串标签中的内容

想要的效果

最优解
<div
   :data-pindex="i"
   :data-index="j"
    @input="addComment($event, i, j)"
    class="content"
    v-html="o.copyTermsContent"
    >
  </div>
    // 给v-html中的标签添加输入事件
    addComment(e, pIndex, index) {
      this.detailForm.orderTermsList[pIndex].orderTermsDetailList[
        index
      ].termsContent = e.target.parentNode.innerHTML
    },
  //  js校验部分
  onSend() {
  //整个校验一个提示
      let isChange = true
      if (this.detailForm.orderTermsList.length > 0) {
        this.detailForm.orderTermsList.forEach(item => {
          if (item.orderTermsDetailList.length > 0) {
            item.orderTermsDetailList.map(i => {
              let termsContentList = i.termsContent.match(
                /(<(\w+)\s?.*?>)([^<].*?[^>])(<\/\2>)/gi
              )
              // 把获取到的标签内的数据放到数组了判断合同内容是否修改
              let copyTermsContentList = i.copyTermsContent.match(
                /(<(\w+)\s?.*?>)([^<].*?[^>])(<\/\2>)/gi
              )
              if (termsContentList !== null) {
                termsContentList.map((c, index) => {
                  if (termsContentList[index] === copyTermsContentList[index]) {
                    isChange = false
                  }
                })
              }
            })
          }
        })
       
        if (!isChange) {
          this.$message.warning('条款内容未修改')
          return
        }
      }
   }
   //css部分
   <style lang="less" scoped>
.content {
  /deep/ [contenteditable] {
    color: rgb(0, 128, 255);
  }
}
</style>

具体提示哪个未修改并且逗号拼接

onSave() {
      let isChange = ''
      if (this.detailForm.orderTermsList.length > 0) {
        this.detailForm.orderTermsList.forEach(item => {
          if (item.orderTermsDetailList.length > 0) {
            item.orderTermsDetailList.map(i => {
              let termsContentList = i.termsContent.match(
                /(<(\w+)\s?.*?>)([^<].*?[^>])(<\/\2>)/gi
              )
              let copyTermsContentList = i.copyTermsContent.match(
                /(<(\w+)\s?.*?>)([^<].*?[^>])(<\/\2>)/gi
              )
              if (termsContentList !== null) {
                termsContentList.map((c, index) => {
                  if (termsContentList[index] === copyTermsContentList[index]) {
                    isChange +=
                      termsContentList[index].replace(/<[^<>]+>/g, '') + ','
                  }
                })
              }
            })
          }
        })
        if (isChange !== '') {
          this.$message.warning(isChange + '未修改')
          return
        }
      }

如果只是想获取到输入的内容或者标签内的内容不校验的三种方式

//方式一
const extractText = (str) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(str, 'text/html');
  const textNodes = doc.body.innerText.trim().split('\n');
  return textNodes;
};
 
const input = '
提取文字
这是段落文本
';
const extractedTexts = extractText(input);
console.log(extractedTexts);
// 输出: ["提取文字", "这是段落文本"]
//这样获取的是整个的内容不方便加校验

方式二
let html_str = "
123
"
// 1.
let reg = new RegExp('<[^<>]+>','g');
let text = html_str.replace(re ,"");
//或 2.
let text = html_str.replace(/<[^<>]+>/g,"");
console.log(text); // 123


方式三
let html_str = "
123
"
// 1.
let reg = new RegExp('<[^<>]+>','g');
let text = html_str.replace(re ,"");
//或 2.
let text = html_str.replace(/<[^<>]+>/g,"");
console.log(text); // 123

需求内容

编制合同模版，引用条款时，特殊字符内的内容可修改编辑，其他的内容控制不可修改只读，可修改的部分使用蓝色底纹标记并必填控制，如未填写/未修改时保存/提交页面给出提示信息"
条款内容未修改"

解析match() 方法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。match() 方法将检索字符串 String Object，以找到一个或多个与 参数 匹配的文本。这个方法的行为在很大程度上有赖于 参数 是否具有标志 g。如果 参数 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。