Draft.js编辑器连续输入高亮词时内容异常问题求助

问题描述 #

基于Draft.js开发实时高亮编辑器时，遇到如下异常场景：当连续输入以单个空格分隔的相同高亮词汇（示例中为"doe"），高亮子串会在一次状态更新中被错误追加到编辑器原有内容末尾，不过下一次状态更新后内容会自动恢复正常。

解决方案 #

在findWithRegex()方法中，调整匹配范围的end值，不要直接设为子串的精确长度，而是在其基础上±1。比如将：

end = start + matchArr[0].length;

修改为：

end = start + matchArr[0].length + 1; // 或减1，视场景调整

问题根源分析 #

这个Bug的核心原因在于，当end被设置为匹配子串的精确长度时，在连续输入相同高亮词汇加空格的场景下，Draft.js的内容状态更新与正则匹配的边界处理出现了同步偏差，导致编辑器临时错误地将匹配的高亮子串追加到内容末尾。通过给end增加或减少1个字符的偏移量，修正了匹配范围的边界，避免了状态更新时的内容异常。

内容的提问来源于stack exchange，提问作者Owen