参考

• 正则表达式不要背
• JS正则表达式完整教程（略长）
• 正则表达式是如何让你的网页卡住的

问题描述

使用正则校验文本框只能输入数字和英文逗号，但是加上正则页面就卡死了。

1. 把下面的内容复制到输入框：

   // 注意倒数第三行少了一个逗号
   1361561645243047937,
   1283568469996085249,
   1357502175307243521,
   1359626241765941249,
   1364219002896916481,
   1368226083719225345
   1093210303790981120,
   80604875776576716
   

2. 正则校验之前有个格式化字符串的逻辑，格式化之后得到如下字符串：

   // 注意没有逗号的换行那里
   1361561645243047937,1283568469996085249,1357502175307243521,1359626241765941249,1364219002896916481,1368226083719225345 1093210303790981120,80604875776576716
   

3. 所以造成页面卡死的就是下面这段正则：

   /^(\d+,?)+$/.test("1361561645243047937,1283568469996085249,1357502175307243521,1359626241765941249,1364219002896916481,1368226083719225345 1093210303790981120,80604875776576716")
   

问题分析

先说结论：页面卡死是由于 回溯次数过多 导致的。

1. 先看下这个正则：

   /^(\d+,?)+$/
   // 匹配内容和顺序
   // 1. 括号中 \d+ -> 匹配至少一个数字
   // 2. 括号中 ,? -> 匹配一个或0个 ,
   // 3. 匹配至少一个 (\d+,?)
   // 4. 匹配以 (\d+,?) 开头
   // 5. 匹配以 (\d+,?) 结尾
   

2. 匹配过程：

   /^(\d+,?)+$/.test("1361561645243047937,1283568469996085249,1357502175307243521,1359626241765941249,1364219002896916481,1368226083719225345 1093210303790981120,80604875776576716")1361561645243047937,	// 1. 数字长度 19
   1283568469996085249,	// 2. 19
   1357502175307243521,	// 3. 19
   1359626241765941249,	// 4. 19
   1364219002896916481,	// 5. 19
   1368226083719225345		// 6. 19
   1093210303790981120,	// 7. 19
   80604875776576716		// 8. 17
   

   这里匹配过程就不一步一步的说了，按照上面一行一行的说：

   • 1 - 5 行都能正常匹配，而且匹配 ^(\d+,?)
   • 第 6 行结尾有个空格（或者换行符、制表符等）只要不是逗号或者空都会导致回溯次数过多
   • 因为这里多的字符正则表达式既匹配不到它又不能结束匹配，只能回溯，再遇到同样的问题，再回溯，直到页面奔溃。
   • 匹配不到它是因为表达式中并没有匹配空格
   • 不能结束是因为不满足结尾条件，后面还有两行（如果把结尾的 $ 去掉就没有这个问题了）

   这个不太好描述，可以在 regex101 查看回溯过程：
   
   ⚠️ 但是把文本替换成这个 1,2,13a 会返回 false。
   
   说明是长文本回溯次数过多导致的页面崩溃。

问题解决

你能想到把多余的空格都过滤：str.replace(/\s/g, '')，但是注意上面加粗的字体 只要不是逗号或者空都会导致回溯死循环

校验这个字符串同样会导致死循环（注意那个 a）：

1361561645243047937,1283568469996085249,1357502175307243521,1359626241765941249,1364219002896916481,1368226083719225345109321a0303790981120,80604875776576716

原因跟上面是一样的。

可以参考 正则表达式是如何让你的网页卡住的 的 解决方案 部分：

• 优化正则表达式本身
• 优化正则表达式匹配顺序

以上。