我們有很多業(yè)務(wù)場景需要對文字打標(biāo)簽，有的直接劃詞，有的需要打標(biāo)簽，比如下面的動圖展示。對實(shí)現(xiàn)思路做個總結(jié)

保存數(shù)據(jù)展示

start?起始位置（包含）
end?結(jié)束位置（不包含）
label?打的標(biāo)簽
text?劃選的為本

實(shí)現(xiàn)思路：基于vue的數(shù)據(jù)驅(qū)動操作，不需要關(guān)心dom，只需操作數(shù)據(jù)即可

1.將text文本拆分成，一個字一個span

2.給文字加mouseup事件，通過getSelection的方法，可以非常方便的獲取到對應(yīng)的anchorNode和focusNode，從而獲取到start和end

3.渲染下劃線：根據(jù)劃詞的數(shù)據(jù)labels，使用一個redWordMap，只要是有的（start-end的數(shù)據(jù)），都設(shè)為true，然后在模板中給存在redWordMap中的數(shù)據(jù)加red樣式

4.渲染標(biāo)注label：根據(jù)劃詞的數(shù)據(jù)labels，使用一個tipWordMap，給start的數(shù)據(jù)設(shè)置數(shù)據(jù)，然后在模板中給存在tipWordMap中的數(shù)據(jù)加sub

把模板寫好，數(shù)據(jù)造好后，怎么玩都只要操作數(shù)據(jù)就行了，非常方便。比傳統(tǒng)的操作dom，好用的多。
不過這種實(shí)現(xiàn)方案只適合數(shù)據(jù)不是非常多，測試萬字是OK的，但是比如幾十萬字，可能會存在性能問題，結(jié)合業(yè)務(wù)場景，斟酌使用。