JavaScript输入框中选中文字加粗

首先看看效果图：

大概就是想实现两个功能点：

1输入框中可以随便输入内容

2用户选中文字后点击按钮可以实现文字修饰（加粗）

 

现实现的代码中有1个bug尚未修复：

1 不可加粗已经加粗过的文字（选择已经加粗的和普通文字的混合也不行）

代码的主要内容：

1 计算选中的位置

2 在选中的文字两边加上<b></b>

3 重新渲染输入框的内容

主要代码：

html部分：

<div>
      <el-button @click="getRangeIndex">加粗</el-button>
      <div contenteditable="true" class="input-box" ref="input-box"></div>
</div>

JavaScript部分：

首先这个函数是读取选中文字相关的信息

关于window.getSelection()这个变量的各个参数，这篇博客讲得很详细：

https://www.cnblogs.com/strangerqt/p/3745426.html

getRangeIndex () {
      if (window.getSelection) {
        var selectObject = window.getSelection()
        var preText = this.getpreviousNode(selectObject.anchorNode.previousSibling)
        this.text = selectObject.toString()
        this.textStart = selectObject.anchorOffset + preText
        this.textEnd = selectObject.focusOffset + preText
        this.boldingText()
      }
    },

然后计算选中文字的位置：

getpreviousNode(ele) {
      var preText = 0
      for(var element = ele; element !== null; element = element.previousSibling) {
        if (element.nodeType === 1) {
          preText += element.outerHTML.length
        } else if (element.nodeType === 3) {
          var textString = element.nodeValue
          if (element.nodeValue !== null) {
            preText += element.nodeValue.length
          }
        }
      }
      return preText
    },

最后将文字加入标签，插入相应的位置：

boldingText () {
      var ele = this.$refs['input-box']
      this.inputText = ele.innerHTML
      var text = this.inputText.substring(0, this.textStart) + '<b>' + this.text + '</b>' + this.inputText.substring(this.textEnd)
      ele.innerHTML = text
    },

这样子就是图上的效果了