文本编辑敏感词高亮和错别字纠错组件

背景

  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中连续输入两个空格会被解析为 不然两个空格就会只展示出一个