我们有很多业务场景需要对文字打标签，有的直接划词，有的需要打标签，比如下面的动图展示。对实现思路做个总结
保存数据展示
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的，但是比如几十万字，可能会存在性能问题，结合业务场景，斟酌使用。
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
相关推荐: AI天后,在线飙歌,人工智能AI孙燕姿模型应用实践，复刻《遥远的歌》，原唱晴子(Python3.10)
忽如一夜春风来，亚洲天后孙燕姿独特而柔美的音色再度响彻华语乐坛，只不过这一次，不是因为她出了新专辑，而是人工智能AI技术对于孙燕姿音色的完美复刻，以大江灌浪之势对华语歌坛诸多经典作品进行了翻唱，还原度令人咋舌，如何做到的? 本次我们借助基于Python3.10…
