JavaScript正则校验textarea输入导致浏览器卡死问题咨询

问题产生原因 #

• 核心问题是正则表达式触发了灾难性回溯：你使用了多分支分组(分支1|分支2|分支3|分支4)+的结构，多个分支的匹配范围存在大量重叠，同时整个分组被贪婪量词+包裹。
• 当输入字符串末尾出现不匹配的字符¼时，正则引擎无法直接匹配成功，会回退尝试所有可能的分支组合：30个有效字符每个都有2~4种可选的分支匹配方式，总组合数达到指数级，直接占满JS单线程的运算资源，导致浏览器无响应。
• 额外的冗余问题：原正则中换行符同时在第三个分支的<CR><LF>和第四个分支的[\n]中重复定义，且<CR><LF>属于错误写法，会把<、C、R、>等单独字符也判定为合法字符，进一步加剧了回溯次数。

修复方案 #

1. 优化正则结构，从根源消除回溯 #

把所有允许的字符合并到同一个字符集内，删除冗余的多分支结构，正则引擎可以一次性判断单个字符是否合法，不会产生回溯逻辑。优化后的正则如下：

// 所有合法字符合并到单个字符集，无多分支，无回溯风险
const validRule = /^[A-Za-z0-9ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ \.^°!"²§³$%&\/{}()=?´`@€+\-*~'#<>|µ,;:_\n\r]+$/
// 校验逻辑
const isValid = validRule.test(this.message)

说明：

• 原正则中的<CR><LF>替换为标准的回车\r、换行\n符，符合换行匹配的需求。
• 字符集内仅需对中间位置的-做转义处理，其余符号无需额外转义，减少冗余逻辑。

2. 可选性能优化：反向匹配非法字符 #

改成先匹配非法字符的逻辑，只要找到第一个非法字符就直接返回校验不通过，无需遍历整个字符串，性能远高于全量匹配：

// 匹配所有不在合法范围内的字符
const invalidRule = /[^A-Za-z0-9ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ \.^°!"²§³$%&\/{}()=?´`@€+\-*~'#<>|µ,;:_\n\r]/
// 校验逻辑：匹配到非法字符则判定不通过
const isInvalid = invalidRule.test(this.message)

该方案特别适配你设置了1000字符上限的输入框场景，极端情况下的性能表现比全量匹配高几十倍。

3. 交互层面优化 #

给onInput事件添加300ms的防抖处理，避免用户连续输入时频繁触发正则校验，进一步降低性能消耗。

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