常用正则及相关资源网站

资源网站

1. 正则可视化网站

   这个网站可以将正则表达式显示成可视化的流程图, 方便自己查看正则是否写对, 也可以照着图给产品解释(有时候产品问校验规则, 就照着图解释, 比较好懂)

2. 正则有效性和效率测试

   网站支持多种语言和多种测试模式的正则, 之前遇到过一个正则导致页面卡死的 BUG (正则递归回溯), 当时就复制下该正则到这网站上一测, 就发现错误了

---

常用正则

• 邮箱校验

  /^[\w+-]+(\.[\w+-]+)*@([a-z\d]+([.-][a-z\d]+)*\.)[a-z\d]+$/i
  

  注意: 邮箱的格式千奇百怪, 有的邮箱甚至还可以输入中文, 这个只能做参考, 还有一个简易版

  /^\w+?@\S+?\.[A-Za-z\d]{2,4}$/
  

• 电话校验

  /^((\+\d{1,3}[- _]?\(?\d\)?[- _]?\d{1,5})|(\(?\d{2,6}\)?)|)[- _]?(\d{3,4})[- _]?(\d{4})(( x| ext)\d{1,5})?$/
  

  同事给的, 然后改 BUG 遇到一个有 _ 的奇葩电话号码, 就把 _ 也加进去了

• 纯数字/大/小写字母/键盘特殊符号

  /^(\d+$|[a-z]+$|[A-Z]+$|((?=[!-~])[^\da-zA-Z])+$)/
  

• 非[键盘特殊字符|数字|空格]

  /[^ `\-=[\];'\\,./~!@#$%^&*()_+{}:"|<>?！￥…（）—\d]/
  

• 正则匹配非注释非console的中文

  /^(. )*?(?!.*(console\.\w+\(('|")|<!-- ?|/\* ?|// ?)).*[\u4e00-\u9fa5]/
  

  这个是全局搜索这类中文, 给网站做多语言用的

---

正则小技巧

1. webStorm 全局搜索显示全部匹配结果

   编辑器用的 webStorm , 正则搜索替换感觉不错, 但它的搜索界面一次只能显示出前100个匹配结果, 此时可以点击搜索界面右下角 OPEN IN FIND WINDOW 展示出全部匹配结果

2. 转载: 正则表达式匹配"非"，以及"非"字符串的匹配

   一般我就用的 (?!vue) 这种