正则表达式(Regular Expression)是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里,正则表达式通常被用来检索、替换那些符合某个模式的文本。
JavaScript通过内置对象RegExp
支持正则表达式,有两种方式创建正则表达式对象
- 使用字面量,以斜杠表示开始和结束。
var regex = /xyz/;
- 使用RegExp构造函数
var regex = new RegExp('xyz');
以上两种写法是等价的,都新建了一个内容为xyz的正则表达式对象。它们的主要区别是,第一种方法在编译时新建正则表达式,第二种方法在运行时新建正则表达式。
RegExp 构造函数还可以接受第二个参数,表示修饰符:
var regex = new RegExp('xyz', 'i');
var regex = /xyz/i;
//上面代码中,正则表达式`/xyz/`有一个修饰符`i`
常用修饰符:
- g: global,全文搜索,不添加的话搜索到第一个结果停止搜索
- i: ingore case,忽略大小写,默认大小写敏感
- m: multiple lines,多行搜索
元字符
在正则表达式中具有特殊意义的专用字符,可以用来规定其前导字符
字符 | 含义 |
---|---|
\t | 水平制表符 |
\r | 回车符 |
\n | 换行符 |
\f | 换页符 |
\v | 垂直制表符 |
\0 | 空字符 |
字符类
一般情况下正则表达式一个字符(转义字符算一个)对应字符串一个字符,但是我们可以使用元字符[]
来构建一个简单的类,比如[abcd]
代表一个字符,这个字符可以是abcd
四个字符中的任意一个.
取反
元字符[]
组合可以创建一个类,我们还可以使用元字符^
创建反向类/负向类,意思是不属于这个类的内容,表达式[^abc]
表示一个不是字符a或b或c的字符。
范围类
如何匹配单个字符
//匹配一个字符,这个字符可以是0-9中的任意一个
var reg1 = /0123456789/;
//匹配一个字符,这个字符可以是0-9中的任意一个
var reg2 = /[0-9]/;
//匹配一个字符,这个字符可以是a-z中的任意一个
var reg3 = /[a-z]/;
//匹配一个字符,这个字符可以是大写字幕、小写字母、数字中的任意一个
var reg4 = /[a-zA-Z0-9]/;
预定义类
字符 | 等价 | 类含义 |
---|---|---|
. | [^\r\n] | 除了回车符和换行符之外的所有字符 |
\d | [0-9] | 数字字符 |
\D | [^0-9] | 非数字字符 |
\s | [\t\n\x0B\f\r] | 空白符 |
\S | [^\t\n\x0B\f\r] | 非空白符 |
\w | [a-zA-Z_0-9] | 单词字符,字母、数字下划线 |
\W | [^a-zA-Z_0-9] | 非单词字符 |
有了这些预定义类,写一些正则就很方便了,例如希望匹配一个可以是ab+数字+任意字符
的字符串,就可以这样写\ab\d.
边界
正则表达式还提供了几个常用的边界匹配字符
字符 | 含义 |
---|---|
^ | 以xxx开头 |
$ | 以xxx结尾 |
\b | 单词边界 |
\B | 非单词边界 |
var str = 'hello1 world hello2 123456 \t \r zuo \n dong hello3'
str.match(/hello\d/g) // ["hello1", "hello2", "hello3"]
str.match(/^hello\d/g) // ["hello1"]
str.match(/hello\d$/g) // ["hello3"]
var str2 = 'hello1 whello9orld hello2 12-hello8-3456 \t \r zuo \n dong hello3'
str2.match(/\bhello\d\b/g) //["hello1", "hello2", "hello8", "hello3"]
//注意-也用于区分单词边界
量词
如果我们希望匹配一个连续出现多次的字符串该怎么做呢,正则表达式引入了一些量词
字符 | 含义 |
---|---|
? | 出现零次或一次(最多出现一次) |
+ | 出现一次或多次(至少出现一次) |
* | 出现零次或多次(任意次) |
{n} | 出现n次 |
{n,m} | 出现n到m次 |
{n,} | 至少出现n次 |
var str1 = 'http://zuodong.com'
str1.match(/https?:\/\/.+/) //匹配
str1.match(/https+:\/\/.+/) //不匹配
str1.match(/https*:\/\/.+/) //匹配
var str2 = 'https://zuodong.com'
str2.match(/https?:\/\/.+/) //匹配
str2.match(/https+:\/\/.+/g) //匹配
str2.match(/https*:\/\/.+/g) //匹配
var str3 = 'httpssssss://zuodong.com'
str3.match(/https?:\/\/.+/g) //不匹配
str3.match(/https+:\/\/.+/g) //匹配
str3.match(/https*:\/\/.+/g) //匹配
实例演练
\d,\w, \s, [a-zA-Z0-9], \b, ., *, +, ?, x{3}, ^, $分别是什么?
\d
:匹配数字字符[0-9]
\w
:匹配单词字符、字母、数字下划线[a-zA-Z_0-9]
\s
:匹配空白符[\t\n\x0B\f\r]
[a-zA-Z0-9]
:匹配大小写单词字符、字母、数字
\b
:单词边界
.
:除了回车符和换行符之外的所有字符[^\r\n]
*
:表示匹配一个连续出现多次的字符串的次数,出现次数为任意次
+
:表示匹配一个连续出现多次的字符串的次数,出现次数为至少出现一次
?
:表示匹配一个字符串,出现次数为最多一次
x{3}
:匹配x字符,出现次数为3次
^
:边界匹配字符,以xxx开头。在[]
中使用表示取反
$
:边界匹配字符
写一个函数trim(str),去除字符串两边的空白字符
注:匹配所有空白符并将其替换成空字符
写一个函数isEmail(str),判断用户输入的是不是邮箱
注:匹配以数字字母下划线开头多次加 @ 后接数字字母下划线多次,以.com结尾
写一个函数isPhoneNum(str),判断用户输入的是不是手机号
注:匹配以13、15、17、18开头后接9个数字的字符串
写一个函数isValidUsername(str),判断用户输入的是不是合法的用户名(长度6-20个字符,只能包括字母、数字、下划线)
注:匹配有字母数字下划线,长度为6-20的字符串