快速拼出你想要的正则

案例

实现：用户名的输入校验
只允许输入：数字，字母，- ，_，@

写法一：
pattenUser = /^[A-Za-z0-9_\-\@]+$/ //验证用户名-数字、字母、@
写法二：
不带“^和$”:
pattenUser = /[A-Za-z0-9_\-\@]+/ //验证用户名-数字、字母、@

说明：
写法一表示任何一个字符都要满足这个过滤规则。写法二表示只有第一个字符满足即可。

图解.png

位置说明：
1：//双斜线，就是正则表达式的固定写法。这样写编译器才认识这个是正则对象。
2：^尖角号，匹配字符串的开始。
3：[]大括号，里边书写匹配的规则。
4：匹配规则，这里的 A-Za-z0-9_ 表示：可以是0-9的数字或是大小写均可的字母或是下划线。
5：- ，联合6号位置的\表示：匹配-符。就是输入的字符可以是中划线。
6：\ ，表示“匹配”
7：@，联合6号位置的\表示：匹配@符。就是输入的字符可以是@。
8：+，重复一次或是更多次。
9：$，匹配字符串的结束。

附件：

简单的说明图：

image.png image.png
从图中可以看出：
\小写 和 \大写 过滤规则正好相反，例如：\w 和\W。

推荐的在线小工具：

http://tools.jb51.net/regex/javascript
案例：

image.png
有了这个工具，你自己慢慢试自己想要的正则就行了，在网上找的可能不完全符合你，使用这个拼凑下就ok了。

演示:

我们可以利用这个小站给我们列出来的常用的正则：
用户名：一看大概意思允许：数字字母下划线中划线，后边的一堆（\u4e00-\u9fa5）不知是匹配什么，没关系。

image.png

我们继续看，发现点击中文时候的和刚才的一样，原来上边的还要匹配中文，可是我们的需求是：
数字，字母，- ，_，@

image.png
那么我们来组合下吧：
就有了文章开头的那个案例。

其他案例说明：

image.png

sublime 中正则的支持，随时测试替换

image.png

相信看完这篇小文，对正则毫无概念的你，应该也可以尝试写个简单常用的正则了。