vue自定义选中变色，反选变回

可编辑的div:

<div contenteditable="true"  
v-html="scopeChildren.row.remarks" @mouseup="getContent(scopeChildren.row,$event)"  @focus="getRemarks(scopeChildren.row)" 
@input="changeText"
@blur="changeRemarks(scopeChildren.row,$event)"
:style="scopeChildren.row.important ? 'color: red' : ''" style="padding-left: 8px;outline: none;"></div>

方法：

     getContent (item,e) {
     //获取选中区域内容
      var txt = window.getSelection ? window.getSelection() : document.selection.createRange().text;
      if(txt == "") {//当选中内容为空时，阻止事件发生
          window.event ? window.event.cancelBubble = true : e.stopPropagation();
      } else {
        var txt1 = txt.toString();//得到的选中的文本是一个对象，需要转化为字符串
        var range = txt.getRangeAt(0);
        if (this.isChangeText) {
          if (range.startContainer === range.endContainer) {
            this.insert(range.startOffset, range.endOffset, range.startContainer, false, false, false)
          } else {
            this.insert(range.startOffset, range.startContainer.textContent.length - range.startOffset, range.startContainer, true, false, true)
            this.insert(0, range.endOffset, range.endContainer, false, true, false)
          }
          var keyStr1 = '<span style="color:red;font-weight:700;">'
          var keyStr2 = '</span>'
          var html = e.currentTarget.innerHTML.replace(new RegExp(keyStr1,"g"), "凹")
          html = html.replace(new RegExp(keyStr2,"g"), "凸")
          // 存在两个<<或>>时清空，选择字符和高亮完全一致时会是这种情况
          if (this.searchChooseSameWord(html) !== '') {
            html = html.replace(new RegExp('凹凹',"g"), "")
            html = html.replace(new RegExp('凸凸',"g"), "")
          }
          var count = 0
          var str = ''
          for (var i = 0; i < html.length; i++) {
            var add = true
            if (html[i] === '凹') {
              add = false
              if (count === 1) {
                count += 1
              } else {
                count += 1
                str += "<span style='color:red;font-weight:700;'>"
              }
            }
            if (html[i] === '凸') {
              add = false
              if (count >= 2) {
                count = 0
              } else {
                count = 0
                str += "</span>"
              }
            }
            if (add) str += html[i]
          }
          e.currentTarget.innerHTML = str
          this.isChangeText = true
        }
      }
    },
    searchChooseSameWord (str) {
      var aoCount = 0
      var tuCount = 0
      var hasAo = false
      var searchText = ''
      for (var i = 0; i < str.length; i++) {
        if (str[i] === '凹') {
          if (aoCount === 1) { // 说明两个凹连续
            hasAo = true
            searchText = '凹凹'
            aoCount = 0
            continue
          }
          aoCount += 1
        } else {
          aoCount = 0
        }
        if (hasAo) {
          searchText += str[i]
        }
        if (str[i] === '凸') {
          if (tuCount === 1) { // 说明两个凹连续
            return searchText
            tuCount = 0
          }
          tuCount += 1
        } else {
          tuCount = 0 
        }
      }
      return ''
    },
    // noStar：不要<  noEnd：不要>
    insert (start, end, dom, endFinish, noStart, noEnd) {
      var str = ''
      for (var i = 0; i < dom.textContent.length; i++) {
        if (i === start && !noStart) str += "凹"
        str += dom.textContent[i]
        // 如果starNode和endNode不一样，startNode的endFinish为true，要处理整个startNode
        if (i === dom.textContent.length - 1 && endFinish && !noEnd) str += '凸'
        if (i === end - 1 && !endFinish && !noEnd) str += '凸'
      }
      dom.textContent = str
    },
   getRemarks(item) {
        item.oldRemarks = item.remarks
    },
    changeText () {
        this.isChangeText = true
    },
    changeRemarks (item,e) {
      if (this.isChangeText) {
      this.$confirm("此操作将修改备注, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }) .then(() => {
          const url = "paperOrder/updateRemarks";
          const params = {
             paperOrderId: item.id,
             remarks: e.target.innerHTML
          };
         this.$http.post(url, params).then((response) => {
          if (response.body.status === 1) {
              this.$message({
                type: "success",
                message: "修改成功!",
              });
              this.isChangeText = false
          } else {
              this.$message({
                type: "warning",
                message: "修改失败!",
              });
            item.remarks = item.oldRemarks
            this.isChangeText = false
          }
      });
      })
      .catch(() => {
          console.log(item.oldRemarks)
          e.target.innerHTML = item.oldRemarks
          item.remarks = item.oldRemarks
          this.isChangeText = false
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
      }
    }