textarea中文本高亮選中

　　最近在實現原文/譯文句段高亮對比顯示，和有道翻譯類似，如下圖所示：

 　　最初的解決方案是采用富文本編輯器，把所有句段信息都用HTML標簽包裹，操作空間比較大，頁面上需要的功能幾乎都可以實現，但是由此帶來了許多的弊端，比如：

　　　1.復制文本存在原始格式

　　　2.復制大量文本存在性能問題（富文本編輯器的通病，復制幾十萬文字的文本可能導致頁面崩潰）

　　　3.截取文本操作難度較大...

　　目前看業界主流的翻譯軟件，都是采用textarea + 富文本組合，這種解決方案可以極大的避免復制文本格式與頁面性能問題，雖然頁面操作空間沒有富文本編輯器大，但是大多數場景是可以滿足要求的。

　　廢話少說，textarea文本的高亮主要借助於selectionStart/selectionEnd兩個屬性，配合文本的focus即可實現文本的選中效果，MDN有詳細的解釋，如下：

　　

 

 　　　　　　實現代碼如下：

　　　　

<template>
  <section>
    <textarea ref="textarea" name="test" id="" cols="30" rows="10" v-model="txt"></textarea>
  </section>
</template>

<script>
export default {
  name: 'i-select',
  data () {
    return {
      txt: '這是一段測試文本',
    }
  },
  mounted () {
    let node = this.$refs.textarea
    node.selectionStart = 0
    node.selectionEnd = 5
    node.focus()
  }
}
</script>

效果如下：