在 HTML 中使用正则表达式时，若未对特殊字符（如 (、)、-）进行正确转义，会导致“invalid character in class in regular expression”错误。关键在于：方括号内 [] 的元字符需按特定规则处理——- 必须置于开头或结尾，^ 若非首字符需转义，而 (、) 等虽在字符类中通常无特殊含义，但在部分浏览器解析器中仍可能引发兼容性报错，建议统一转义。
在 html `` 中使用正则表达式时，若未对特殊字符（如 `(`、`)`、`-`）进行正确转义，会导致“invalid character in class in regular expression”错误。关键在于：方括号内 `[]` 的元字符需按特定规则处理——`-` 必须置于开头或结尾，`^` 若非首字符需转义，而 `(`、`)` 等虽在字符类中通常无特殊含义，但在部分浏览器解析器中仍可能引发兼容性报错，建议统一转义。
HTML 的 属性要求传入一个有效的 JavaScript 正则表达式字面量（不带 / 分隔符），且该模式会被浏览器作为完整字符串匹配（即隐式等价于 ^...$）。当在字符类（即 [...] 内）书写正则时，某些字符在类中有特殊语义，必须谨慎处理：
- -：在字符类中表示范围（如 a-z），若要匹配字面量短横线，必须放在开头（[-abc]）或结尾（[abc-]），否则会被误解析为范围操作符；
- ^：仅在字符类最开头时表示“取反”（如 [^a]），否则就是普通字符，无需转义；但为清晰起见，非首位置可保留原样；
- (、)、[、]、{、}、+、*、.、?、$、^（非首）、| 等：在字符类 [] 内部本身不具有元字符功能（例如 [()] 是合法的），但部分旧版浏览器或严格解析器（如某些 HTML 验证器或移动端 WebKit 引擎）可能对非标准写法敏感，导致 invalid character in class 报错。因此，最佳实践是：对所有非字母数字的 ASCII 符号统一使用反斜杠 \ 转义，以确保最大兼容性。
✅ 正确写法（推荐）：
<input type="text" pattern="[*$&%^#@!\(\)\-_*+A-Za-z0-9]+" title="仅允许字母、数字及指定符号（如 @, -, !）">
? 关键修正说明：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- \( 和 \)：显式转义左右圆括号，消除解析歧义；
- \-：将短横线转义（也可写作 [-_*+] 或 [_*+-]，但转义更直观）；
- 其余符号如 *, +, $, ^, . 等在字符类中本无需转义，但加上 \ 不影响语义且提升健壮性。
⚠️ 注意事项：
- 不要写成 [\(*\)] —— 字符类内部不能嵌套正则结构，\( 在 [] 中只是匹配字面 (；
- 避免将 - 放在中间：[a-z-A-Z] 是非法的，应改为 [a-zA-Z-] 或 [-a-zA-Z]；
- pattern 值不支持标志位（如 i、g），如需忽略大小写，请用 [A-Za-z] 显式表达；
- 测试时建议在 Chrome、Safari 和 Firefox 中分别验证，尤其注意 iOS Safari 对 pattern 的解析较严格。
? 总结：HTML pattern 的字符类安全准则——“范围符 - 定位两端，括号符号全转义，其余字符按需留”。遵循此原则，即可彻底规避 invalid character in class 类错误，确保表单验证稳定跨浏览器运行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
