背景

1. 由于小说业务，需要对小说中的疑似敏感词进行标亮，方便快速处理
2. 小说中也存在一些错别字、语法不正确等问题，影响阅读体验。我们会根据api校验并定位，来表示语法和错别字，并给出建议更改的选项，来进行替换和忽略

描述

1. 根据需要标亮的关键词，进行高亮
2. 根据错别字进行划线标识，并可以替换和定位

展示效果

设计思路

第一版

基于HTML布局实现高亮、纠错效果

实现思路

高亮

1. 通过textarea标签实现文本的编辑功能，在textarea标签下面铺一层div，通过正则给div的内容添加标记，来实现给textarea的文字添加背景色，每次输入完内容为保证标记正常，根据敏感词信息，重新给div的内容走一遍正则匹配
   
2. 其中div内部的内容和textarea的内容要对齐,这样给敏感词添加背景色的时候，只要在div中的内容添加背景色即可对应到textarea上，不用根据位置去计算

纠错

1. 通过api返回的定位信息，通过计算位置给div内容中错误的字词添加标记
2. 输入内容时，由于是在textarea中进行输入，加上不能使用正则匹配来添加标记，所以每次输入内容后，要根据输入的位置来给错字重新计算偏移量，保证能够标记到正确的错字

碰到的问题

1. 高亮时，由于textarea和div内容要一致，但是textarea中的空格处理和div中空格的处理是不一致的，导致textarea中输入空格时，div的内容和textarea中的内容就无法对其，导致敏感词标亮对应出现偏差
2. 纠错时，由于每次输入都要根据输入的位置重新计算偏移量，计算量比较大，计算次数也很多，有可能会计算错位置导致出现标错位置，导致代码非常复杂，且后期很难维护和扩充新的功能

第二版

基于HTML5中的contenteditable属性实现，该属性决定元素的内容是否可以编辑。所有主流浏览器都支持该属性。由于contenteditable属性可以使有该属性的标签中的内容具备可以编辑的功能，并且子元素的contenteditable属性继承父元素，所以相较于第一版，这一版就只需要处理一份数据即可，降低了处理数据的难度

实现思路

高亮

• 对需要进行敏感词标量的数据，根据敏感词库，进行正则匹配添加标记即可

纠错

• 根据api返回的位置数据，对需要标记错字的数据进行标记，由于编辑的内容就是标记后的内容，所以不需要像第一版一样，每次输入内容重新进行错字标记，极大的降低了计算成本和代码难度

碰到的问题

• 在chrome中连续输入两个空格会被解析为 不然两个空格就会只展示出一个