浏览器端正则测试工具核心是RegExp构造函数与test()/exec()/match()方法，需注意反斜杠转义、标志位显式传参、SyntaxError捕获、匹配结果差异、安全DOM操作及多行模式行为。
直接用浏览器就能跑的正则测试工具，不需要部署服务、不依赖后端，核心就是 RegExp 构造函数 + test() / exec() / match() 这几个方法——但写出来容易，踩坑不少。
为什么 new RegExp(pattern, flags) 动态构造常出错
手动拼接字符串生成正则时，反斜杠会被 JS 字符串解析层吃掉一次。比如你想匹配 d+，写成 "\d+" 才对；如果只写 "d+"，JS 会先把它当转义序列处理，结果传给 RegExp 的其实是 d+（字面量），完全失效。
- 匹配中文要写
"[\u4e00-\u9fa5]+"，不能漏掉双反斜杠 - 想用
g和i标志，必须显式传第二个参数：new RegExp(inputPattern, "gi") - 用户输入的正则若含非法语法（如未闭合括号），
new RegExp()会直接抛SyntaxError，得用try/catch包一层
test() 和 match() 返回值差异直接影响 UI 反馈
test() 只返回布尔值，适合“是否匹配”类按钮；但做高亮或提取时必须用 match() 或 exec()。注意：match() 在全局模式（g）下返回纯匹配数组，不带索引位置；非全局才返回含 index、input 的对象。
- 要做全文高亮，得用
exec()循环调用，靠lastIndex推进，否则match()无法获取每个匹配的起始位置 - 空匹配（比如
/^/g）会导致exec()死循环，需检查match?.[0].length === 0并手动lastIndex++ - 用户没填标志位时，默认非全局，
match()只返回第一个结果，容易让人误以为没匹配全
HTML 中实现“实时高亮”的关键 DOM 操作
不能直接用 innerHTML = text.replace(...) 粗暴替换，否则会丢失用户在 <textarea></textarea> 中的光标位置、选区，且 XSS 风险大。稳妥做法是：把原文本拆成“匹配段”和“非匹配段”，用 document.createTextNode() 和 document.createElement('mark') 分别插入。
- 每次输入正则或文本后，先清空结果容器
container.innerHTML = ""，再重建节点 -
<mark></mark>样式建议加background: #ffeb3b; color: #212121;，避免和浅色背景混淆 - 若匹配内容含 HTML 特殊字符（如
），必须用 <code>textContent赋值，而不是innerHTML
最易被忽略的是多行模式（m 标志）下 ^ 和 $ 的行为——它让它们匹配每行首尾，而非整个字符串首尾。用户粘贴带换行的文本时，若正则里写了 ^abc$ 却没开 m，就只能匹配单行，这个细节几乎没人主动测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
