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>

效果以下：