在 HTML <input pattern> 中使用正则表达式时，若未对特殊字符（如 (、)、-）进行正确转义，浏览器会报错“invalid character in class in regular expression”。关键在于：方括号内 [] 作为字符类，其内部的 (、) 虽通常无需转义，但 - 若不在开头或结尾，会被误认为范围连接符；而某些浏览器（如 Chrome、Safari）对字符类中非标准位置的 - 或未转义的 () 仍可能严格校验并报错。
在 html `` 中使用正则表达式时，若未对特殊字符（如 `(`、`)`、`-`）进行正确转义，浏览器会报错“invalid character in class in regular expression”。关键在于：方括号内 `[]` 作为字符类，其内部的 `(`、`)` 虽通常无需转义，但 `-` 若不在开头或结尾，会被误认为范围连接符；而某些浏览器（如 chrome、safari）对字符类中非标准位置的 `-` 或未转义的 `()` 仍可能严格校验并报错。
HTML 的 <input pattern> 属性要求传入一个符合 ECMAScript 正则语法的有效字符串，且该字符串会被隐式包裹在 ^...$ 中（即全匹配）。当在字符类（[...]）中使用特殊符号时，需特别注意其语义：
- - 在字符类中表示字符范围（如 a-z），因此若要匹配字面量短横线，必须置于开头（[-abc]）或结尾（[abc-]），或显式转义为 -；
- ( 和 ) 在字符类中本不具分组含义，按规范无需转义；但部分浏览器解析器（尤其旧版 WebKit/Blink）在 pattern 属性校验阶段会提前解析，将未转义的 () 视为语法错误；
- ^、]、 等同样需谨慎处理：^ 仅在开头表示否定（[^abc]），[ 和 ] 不可嵌套， 必须双写（\）以在 HTML 属性值中保留单反斜杠。
✅ 正确写法（推荐显式转义关键字符）：
<input type="text" pattern="[*$&%^#@!()-_*+A-Za-z0-9]+" title="请输入字母、数字及允许的符号（如 !, @, -, (, )）" >
⚠️ 注意事项：
- - 是必需的：- 放在中间（如 A-Z-a-z）会导致解析为“Z 到 a”的非法范围，必须转义或移位；
- ( 和 ) 虽非语法强制，但能规避浏览器兼容性风险，属于防御性编码实践；
- 避免在 pattern 中使用 .、*、+、? 等量词以外的元字符（如 |、^、$），因其在 pattern 上下文中不生效（已被自动锚定）；
- 测试时建议覆盖主流浏览器（Chrome、Firefox、Safari、Edge），并使用 RegExr 或浏览器开发者工具的 Console 验证 /^[*$&%^#@!()-_*+A-Za-z0-9]+$/ 是否可构造。
? 总结：HTML pattern 的字符类不是“所见即所得”，而是受正则引擎和 HTML 解析双重约束。安全准则为——所有在正则中有潜在元含义的字符，在字符类中均建议显式转义，尤其是 -；( 和 ) 虽非必需，但转义后可彻底规避跨浏览器解析差异。
立即学习“前端免费学习笔记（深入）”；
