给输入框选中内容前后添加标签，主要用substring字符串截取，获取浏览器选中内容，清除浏览器选中内容

参考链接：https://segmentfault.com/q/1010000017101606/a-1020000017103333

清除浏览器选中内容： https://www.cnblogs.com/zfy0098/p/5591854.html

  tagContent(){
      let selection = window.getSelection();//获取选中内容
      var elInput = document.getElementById('summaryInsert');//获取dom
      var startPos = elInput.selectionStart;//光标起始位置
      var endPos = elInput.selectionEnd;//光标结束位置
      if (startPos === undefined || endPos === undefined || endPos==startPos) return;//如果光标起始位置和结束位置相等，表示没有选中内容，跳出方法

      var beforeWords = this.modalInfo.summary.substring(0,startPos);//截取到的之前的文字
      var afterWords = this.modalInfo.summary.substring(endPos,this.modalInfo.length);//截取到的之后的文字
      this.modalInfo.summary = beforeWords + '<strong>' + selection + '</strong>' + afterWords;//截取到的之前的文字+选中内容+截取到的之后的文字组合
    },

 

 

 

 

 

上面的后续

新增一个需求，页面上有两个需要选中添加标签的输入框，这个时候需要在给选中内容添加标签的动作之前清空选中内容，以免被覆盖或者混淆，

更新：没解决，决定不加戏了，就这样吧，不互相乱点还能用，，，，心累，

可以看下新的复制别人的，

// 将数据插入到光标所在位置
        insertNode(str) {
            let tc = document.getElementsByClassName("input")[0];
            let tclen = tc.value.length;
            // tc.focus();
            let startlength = 0;
            // console.log(typeof document.selection)
            if (typeof document.selection != "undefined") {
                //IE9浏览器
                tc.focus();
                let start = tc.selectionStart;

                document.selection.createRange().text = str;
                tc.focus();
                if (tc.setSelectionRange) {
                    tc.focus();
                    let pos = start + str.length;
                    tc.setSelectionRange(pos, pos);
                    tc.selectionStart = pos;
                }
            } else if (tc.selectionStart || tc.selectionStart == "0") {
                // console.log(tc.selectionStart)
                //IE11
                //火狐和谷歌
                startlength = tc.selectionStart + str.length;
                tc.value = tc.value.substr(0, tc.selectionStart) + str + tc.value.substring(tc.selectionEnd, tclen);
                //设置光标位置，火狐和谷歌
                tc.selectionStart = startlength;
                tc.selectionEnd = startlength;
                tc.focus();
            } else {
                tc.value += str;
                tc.focus();
            }
        },

下面写的废弃，

需求页面：

 

 

 

代码页面内容：

 

 

tagContent(id){
      window.getSelection().removeAllRanges() ;
      let selection = (window.getSelection()).toString();//获取选中内容
      var elInput = document.getElementById(id);//获取dom
      var startPos = elInput.selectionStart;//光标起始位置
      var endPos = elInput.selectionEnd;//光标结束位置
      if (startPos === undefined || endPos === undefined || endPos==startPos || !selection) return;//如果光标起始位置和结束位置相等,selection没有内容，表示没有选中内容，跳出方法

     
      if(id=='summaryInsert'){
        var beforeWords = this.modalInfo.summary.substring(0,startPos);//截取到的之前的文字
        var afterWords = this.modalInfo.summary.substring(endPos,this.modalInfo.summary.length);//截取到的之后的文字
        this.modalInfo.summary = beforeWords + '<b>' + selection + '</b>' + afterWords;//截取到的之前的文字+选中内容+截取到的之后的文字组合
      }else if(id=='noticeInsert'){
        var beforeWords = this.modalInfo.matchInfo.substring(0,startPos);//截取到的之前的文字
        var afterWords = this.modalInfo.matchInfo.substring(endPos,this.modalInfo.matchInfo.length);//截取到的之后的文字
        this.modalInfo.matchInfo = beforeWords + '<b>' + selection + '</b>' + afterWords;//截取到的之前的文字+选中内容+截取到的之后的文字组合
      }
    },

 

 

 

参考方法：