如何为JSON及HTML5表单验证正确编码正则表达式？

问题背景 #

基于Python Flask开发表单配置验证功能，表单配置通过API以JSON格式传入，支持用户为字段自定义正则验证。为阻止姓名这类普通文本字段提交URL内容，给所有文本字段加了Marshmallow正则验证：^((?!\:\/\/).)*$。前端用Petite-Vue渲染表单时，会自动把JSON里的正则赋值给HTML的pattern属性，但遇到两个问题：

• 保存到JSON文件时报错：Invalid escape character in string.，问题出在反斜杠未按JSON规则转义
• Firefox中HTML5表单验证报错：Unable to check input because the pattern is not a valid regexp: invalid identity escape in regular expression，同样是反斜杠的转义问题

已知可以通过URL编码或转义JSON反斜杠解决，但纠结方案选择，想找最优解。

最优解决方案 #

1. 从根源简化正则（优先推荐） #

你当前用的正则^((?!\:\/\/).)*$里，\:\/\/是多余的转义——://在正则里都是普通字符，不需要加反斜杠转义。直接把正则简化成：

^(?!.*:\/\/).*$

这个正则的逻辑和原正则完全一致：匹配不包含://的字符串，但没有任何需要转义的字符，直接解决两个问题：

• 保存到JSON时，因为没有反斜杠，直接写入就符合JSON语法，不会报错
• 前端拿到这个正则后，直接赋值给HTML的pattern属性，Firefox能正常解析，不会出现正则无效的错误

2. 处理带反斜杠的正则（通用场景） #

如果遇到确实需要反斜杠的正则（比如匹配数字的\d），按以下步骤处理：

• 后端保存JSON时：把正则里的单个反斜杠\转义成\\（比如\d要写成\\d），这是JSON字符串的强制语法要求
• 前端渲染时：解析JSON后得到的字符串是\d，直接赋值给HTML的pattern属性即可——浏览器会把这个字符串当作正则表达式解析，\d这类转义符是合法的

3. 不推荐URL编码的原因 #

URL编码会让正则可读性大幅下降，还需要前后端额外加编码、解码步骤，增加出错概率，远不如直接处理正则转义和JSON语法要求来得直接、易维护。

内容的提问来源于stack exchange，提问作者katomat