怎么用 JavaScript 实现一个基础的在线正则测试器
核心就是用 RegExp 构造函数 + test() / match() 方法，配合实时输入监听。不需要后端，纯前端就能跑起来。
关键点在于：用户输入的正则字符串可能含非法语法（比如未闭合的括号），直接 new RegExp(pattern) 会抛 SyntaxError，必须用 try...catch 捕获；修饰符（如 g、i、m）要单独提取，不能混在 pattern 字符串里传给构造函数。
- 把正则模式和修饰符分两栏输入，或从单输入框用
/.../gim格式解析（推荐前者，更可控） - 修饰符建议用 checkbox 控制，避免手输错误（比如误写
giim） - 每次输入变化时重新构造
RegExp实例，再对测试文本调用test()或matchAll()
为什么 matchAll() 比 match() 更适合高亮显示
match() 在全局模式下返回匹配内容数组，但丢掉了每个匹配的 index 和 groups；而 matchAll() 返回迭代器，每个结果都是标准 RegExpExecArray，含 index、groups、input 等字段——这对做 HTML 高亮替换、捕获组调试至关重要。
- 不用
matchAll()的话，得自己循环调用exec()并手动维护lastIndex，容易出错 - 注意：IE 完全不支持
matchAll()，如需兼容，得降级用exec()循环 - 对长文本 + 复杂正则，
matchAll()可能阻塞主线程，建议加防抖或限制最大匹配数（比如只取前 100 个）
如何安全地把匹配结果渲染进 DOM（避免 XSS）
用户输入的测试文本和正则都不可信。如果直接用 innerHTML 插入高亮后的 HTML（比如把匹配部分包上 <mark></mark>），攻击者输入 <img src="x" onerror="alert(1)" alt="html怎么创建在线正则测试工具_html正则表达式在线测试匹配工具" > 就会触发执行。
立即学习“前端免费学习笔记（深入）”；
- 必须对原始测试文本做 HTML 实体转义：用
document.createTextNode(text).textContent或正则替换/[&"']/g - 高亮时，不要拼接 HTML 字符串，而是用
document.createElement()创建mark元素，再用textContent设置内容 - 如果真要用
innerHTML（比如支持富文本预览），至少先用DOMPurify.sanitize()过滤，别自己写正则过滤 HTML
常见报错和对应处理方式
用户常输错正则导致脚本中断，典型错误有：Invalid regular expression: /[/: Unterminated character class、Invalid regular expression: /a{b}/: Invalid repetition、Invalid regular expression: /(?<x>)/: Invalid group</x>（命名捕获组在旧版 Safari 不支持）。
- 所有
new RegExp()调用必须包裹try...catch，捕获SyntaxError并提示具体错误信息 - 修饰符校验：只允许
g、i、m、s、u、y，多出的字符要过滤或报错 - 对
u（Unicode）修饰符，注意某些字符类（如\p{L}）需要显式启用u，否则报错；而老浏览器直接不识别u修饰符
真正难的不是写出来，是让工具在用户乱输、超长文本、嵌套量词、回溯爆炸这些边界场景下不卡死、不报错、不执行恶意代码。防不住这几点，就只是个玩具。
