我們有很多業務場景需要對文字打標籤，有的直接劃詞，有的需要打標籤，比如下面的動圖展示。對實現思路做個總結
保存數據展示
start 起始位置（包含）
end 結束位置（不包含）
label 打的標籤
text 劃選的爲本
實現思路：基於vue的數據驅動操作，不需要關心dom，只需操作數據即可
1.將text文本拆分成，一個字一個span
2.給文字加mouseup事件，通過getSelection的方法，可以非常方便的獲取到對應的anchorNode和focusNode，從而獲取到start和end
3.渲染下劃線：根據劃詞的數據labels，使用一個redWordMap，只要是有的（start-end的數據），都設爲true，然後在模板中給存在redWordMap中的數據加red樣式
4.渲染標註label：根據劃詞的數據labels，使用一個tipWordMap，給start的數據設置數據，然後在模板中給存在tipWordMap中的數據加sub
把模板寫好，數據造好後，怎麼玩都只要操作數據就行了，非常方便。比傳統的操作dom，好用的多。
不過這種實現方案只適合數據不是非常多，測試萬字是OK的，但是比如幾十萬字，可能會存在性能問題，結合業務場景，斟酌使用。