基于textarea的多色代码编辑器实现缺陷与正则优化咨询

问题1：实现方案缺陷与用户操作影响 #

这个三层textarea叠层的方案核心逻辑是可行的，普通文本选中、复制粘贴、撤销重做这类常用操作都是基于底层可编辑的主textarea，不会受上层只读着色层的影响，但确实存在几个明显缺陷：

• 长文本性能衰减明显：每次输入事件触发后都会全量拆分、替换整个文本内容，当输入内容超过3000行时，会出现可感知的输入延迟，内容越长卡顿越严重。
• 非闭合/折行标签识别失效：当前判断标签的逻辑是仅识别<开头>结尾的连续片段，如果用户输入未闭合的标签、或是把标签拆成多行写（比如属性换行），会出现识别错误，直接导致着色内容错位。
• 多字节输入法输入异常：使用中文、日文等需要候选词的输入法时，候选词未确认阶段不会触发对应输入事件，此时上层着色层和主输入内容不匹配，会出现短时间的文字重叠、错位，输入确认后才会恢复。
• 字符对齐漂移风险：如果用户环境中等宽字体加载失败、或是页面缩放比例不是100%，三个textarea的字符宽度可能出现微小偏差，长时间输入后偏差累积会导致着色和内容完全错位。
• 无障碍功能受损：屏幕阅读器会识别到三个textarea元素，会把同一段内容重复朗读三次，对视障用户很不友好。

问题2：正则表达式简化 #

你要的匹配「标签/非标签」两类内容的正则完全可以简化，直接用：

const segments = elem.value.match(/<[^<>]+>|[^<>]+/g) || []

这个正则的逻辑非常直观：优先匹配<开头、中间不带尖括号、以>结尾的HTML标签，剩余的连续非尖括号内容会被识别为普通文本，刚好拆成你需要的两类片段，不需要写复杂的前后置断言，执行效率也更高。
你可以直接用这个match返回的数组替换你现在的split逻辑，每一项判断是否以<开头且以>结尾就能区分标签和普通文本，完全满足你的需求。

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