本节我们要学习 JavaScript 中的正则表达式,首先我们要搞清楚什么是正则表达式?
正则表达式是由一个字符序列形成的搜索模式,可以用搜索模式来描述想要查询的内容。正则表达式可以是一个简单的字符,也可以是更复杂的模式。正则表达式可以用于所有文本搜索和替换操作。
正则表达式语法结构
语法格式:
/pattern/modifiers;
pattern
是正则表达式主体(用于检索)、modifiers
是修饰符,修饰符是可选的。
示例:
例如我们可以试着定义一个正则表达式:
var patt = /xkd/i;
其中 /xkd/i
就是一个正则表达式,xkd
是正则表达式主体,在搜索中使用。i
是修饰符,用于把搜索修改为大小写不敏感。
创建正则表达式
JavaScript 中有两种创建正则表达式的方法:
第一种就是上面讲到的 /pattern/modifiers
的形式,例如:
var re = /xkd/;
这种方式创建正则表达式,在脚本加载后,正则表达式字面量就会被编译,当正则表达式保持不变时使用此方法可获得更好的性能。
另外一种方法是通过调用 RegExp
对象的构造函数来创建,如下所示:
var re = new RegExp("xkd");
在脚本运行过程中,用构造函数创建的正则表达式会被编译。如果正则表达式会改变,或者它会从用户输入等来源中动态地产生,就需要使用构造函数来创建正则表达式。
示例:
现有一个字符串如下所示:
var str = "ABCDEFGHIJKLM";
我们需要检索这个字符串中是否有字母“F”,正则表达式写法如下:
var str = "ABCDEFGHIJKLM";
var result = str.search(/F/); // 正则表达式
console.log(result); // 输出: 5
我们可以看到上述代码输出结果为5,也就是说检索到字符串索引为 5 的位置,有一个与正则表达式 /F/
匹配的子字符串。
正则表达式修饰符
i
:执行对大小写不敏感的匹配。g
:执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。m
:执行多行匹配。
正则表达式模式
元字符是拥有特殊含义的字符:
\d
:查找数字,等价[0-9]
。\D
:查找非数字,等价[0-9]
。\s
:查找空白字符。\S
:查找非空白字符。\b
:匹配单词边界。\B
:匹配非单词边界。\w
:等价于[a-zA-Z0-9_]
。\W
:等价于[^a-zA-Z0-9_]
。\n
:匹配换行符。\uxxxx
:查找以十六进制数 xxxx 规定的 Unicode 字符。
方括号用于查找某个范围内的字符:
^
:以...开头。$
:以...结尾。[...]
:方括号内任意字符。[^...]
:不在方括号内任意字符。[abc]
:查找方括号之间的任何字符。[0-9]
:查找任何从 0 至 9 的数字。(x|y)
:查找任何以 | 分隔的选项。
定义量词:
-
*
:匹配任何包含零个或多个 n 的字符串。 -
+
:匹配任何包含至少一个 n 的字符串。 -
?
:匹配任何包含零个或一个 n 的字符串。 -
{n,m}
:匹配 n 至 m 次,包括 n 和 m次。 -
{n,}
:匹配前一项至少 n 次。 -
{n}
:匹配前一项 n 次。
使用正则表达式
正则表达式可以被用于 RegExp 的 exec
和 test
方法以及 String
的 match
、replace
、search
和 split
方法。
exec()
方法:是一个正则表达式方法,用于检索字符串中的正则表达式的匹配,返回一个数组,如果未匹配到则返回 null。
示例:
例如我们检索某个字符串中的内容,如果匹配到字符串中有 xkd
这个子字符串,则会返回一个数组,否则会返回null:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body>
<script>
var name1 = "xkd";
var name2 = "summer"
var re = /xkd/;
var r1 = re.exec(name1);
var r2 = re.exec(name2);
console.log(r1);
console.log(r2);
</script>
</body>
</html>
在浏览器中打开:
从返回结果可以看出,对于字符串 name1 和 name2 来说,name1 中成功匹配到子字符串 xkd,name2 中则匹配不成功,所以返回 null。
test()
方法:一个在字符串中测试是否匹配的 RegExp 方法,返回 true 或 false。
示例:
例如搜索字符串是否以字母 a
开头,是则返回 true,不是则返回 false,代码可以像下面这样写:
// 用于检索的两个字符串
var str1 = "123456789";
var str2 = "abcdefg"
// 正则表达式,否则以字母a开头
var re = /^a/;
// 分别匹配两个字符串
var r1 = re.test(str1);
var r2 = re.test(str2);
// 输出匹配结果
console.log(r1);
console.log(r2);
输出:
false
true
从代码的输出结果我们可以看出,字符串str1
不是以字母 a 开头(返回 false),而字符串 str2
是以 a 开头 (返回 true)。
search()方法
:用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子字符串的起始位置。如果失败返回-1。
示例:
例如我们可以想知道字符串变量 content 中是否包含子字符串 you
:
var content = "Hello xkd, Do you have time tomorrow?";
re = /you/;
var result = content.search(re);
console.log(result)
输出:
14
replace()
方法:用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
示例:
例如使用 replace
方法将变量 content 中的 “xkd” 替换成 “summer”:
var content = "Hello xkd, Do you have time tomorrow?";
re = /xkd/;
var result = content.replace(re, 'summer');
console.log(result)
执行代码,会输出:
Hello summer, Do you have time tomorrow?
match()
方法:一个在字符串中执行查找匹配的 String 方法,它返回一个数组,在未匹配到时会返回 null。
示例:
使用 match
方法某个字符中是否包含字母 x
:
var str1 = "hello xkd";
var str2 = "Wow, that's great";
re = /x/;
var result1 = str1.match(re);
var result2 = str2.match(re);
console.log(result1);
console.log(result2);
执行代码,会输出:
[ 'x', index: 6, input: 'hello xkd', groups: undefined ]
null
上面代码中,定义了两个字符串,其中字符串 str1
中成功匹配到了字母 x
,返回了一个数组,数组中 index
为匹配的结果的开始位置,input
是搜索的字符串。而str2
中没有字母 x
,匹配失败,所以输出结果为 null。
一些常用的正则表达式
在开发中,我们可能会经常用到正则表达式的验证,特别是在表单中,例如用户名、密码、电话号码、邮箱格式等的验证,我们来看看下面这几种验证:
- 例如用户名正则:3到8位,可以包含字母数字下划线:
var re = /^[a-zA-Z0-9_]{3,8}$/;
- 例如密码正则:6到16位,可以包含字母数字:
var re = /^[a-zA-Z0-9_]{6,16}$/;
- 例如电话号码正则:可以13、15、17、18开头,一共11位:
var re = /^1[3578]\d{9}$/;
- 例如邮箱验证:以字母数字下划线
_
、减号-
、点号.
开头,并需要重复一次至多次[+]。然后中间接一个@
符号,@
之后需要连接字母数字下划线_
、减号-
、点号.
,并需要重复一次至多次[+]。结尾必须是点号.
连接2至4位的大小写字母:
var re = /^([a-zA-Z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;