正则表达式

使用JavaScript验证邮箱、用户名、密码等文本输入内容，下面将介绍另一种表单验证技术——正则表达式。

为什么需要正则表达式

在开发HTML表单时经常会对用户输入的内容进行验证。例如，前面验证邮箱是否正确，当用户输入的邮箱是“june@.”，如图所示，然后单击"登录"按钮进行Email验证时，检测的结果却认为这是一个正确的邮箱地址。

 

我们知道这并不是一个正确的邮箱，但检测却认为是正确的，为什么会出现这样的情况呢？因为我们在验证邮箱时，只检测邮箱地址中是否包含符号和“.”，这样简单的验证是不能严谨地验证邮箱是否正确的。在网上进行用户邮箱验证是非常严谨的，例如当输入“rose@sina.”时，检测的结果是电子邮件格式不正确，重新输入“rose@sina.c”，检测结果仍然不正确，当输入“rose@sina.com”时检测通过。从上面的例子可以看出，必须输入正确的邮箱地址，否则检测不能通过。这么严谨的邮件格式验证，是否需要写许多代码来一一地验证呢？我们看一下这个验证邮箱地址的代码。

function checkEmail(){

    var email=$("temail").val();

    var $email_prompt=$("#email_prompt");

    $email_prompt.html("");

    var reg= /^\w+@\w+(\.[a-zA-Z]{2，3}){1，2}$/;

    if(reg.test(email) ==false){

        $email_prompt.html("电子邮件格式不正确，请重新输入"）;

        return false;

    }

    return true;

}

从上面的代码可以看到，仅仅用了几行代码就实现了这么严谨的验证，是不是很神奇呢？这是如何实现的呢？答案——正则表达式。

实际上，在工作中对表单的验证并不是简单地验证输入内容的长度，是否是数字，字母等，通常会验证输入的内容是否符合某种格式。例如，电话号码必须是"区号-电话号码"的格式，区号必须是3位或4位，电话号码必须是7位或8位，如010-12345678或0371-12345678，如果在页面中输入电话号码"010-231243560"，验证的结果是其为不正确的电话号码。

还有日期必须是"年-月-日"的格式，如2016-05-09或2016-5-12，这些必须符合某些格式的验证。如果使用前面介绍的方式编写代码，那么代码量将非常大，非常烦琐，而如果使用正则表达式，写出的代码将会简洁许多，并且验证的内容会非常准确。既然使用正则表达式可以这么方便地验证数据，那么什么是正则表达式呢？

什么是正则表达式

正则表达式（ Regular Expression ，简称RegExp ）是一种描述字符串结构的语法规则，是一个特定的格式化模式，用于验证各种字符串是否匹配这个特征，进而实现高级的文本查找、替换、截取内容等操作。在项目开发中，手机号码指定位数的隐藏、数据采集、敏感词的过滤以及表单的验证等功能，都可以利用正则表达式来实现。

正则表达式是一个描述字符模式的对象，它是由一些特殊的符号组成的，这些符号和在数据库中学过的通配符一样，其组成的字符模式用来匹配各种表达式。

以文本查找为例，若在大量的文本中找出符合某个特征的字符串（如手机号码），就将这个特征按照正则表达式的语法写出来，形成一个计算机程序识别的模式（pattern），然后计算机程序会根据这个模式到文本中进行匹配，找出符合规则的字符串。

1、定义正则表达式

定义正则表达式有两种构造形式，一种是普通方式，另一种是构造函数的方式。

（1）普通方式

普通方式的语法格式如下。

语法

var reg=/表达式/附加参数

1. 表达式：一个字符串代表了某种规则，其中可以使用某些特殊字符来代表特殊的规则，后面会详细介绍。
2. 附加参数：用来扩展表达式的含义，主要有以下三个参数。

1. g：代表可以进行全局匹配。
2. i：代表不区分大小写匹配。
3. m：代表可以进行多行匹配。

上面三个参数可以任意组合，代表复合含义，当然也可以不加参数。例如：

var reg=/white/;

var reg=/white/g;

因此用于全局检索数字0-9的正则表达式声明可修改为如下内容：

var pattern = /[0-9]/g;

（2）构造函数

RegExp对象表示正则表达式（Regular Expression），通常用于检索文本中是否包含指定的字符串。其语法格式如下：

 语法

var reg=new RegExp(pattern [, attributes])

参数解释如下：

1. pattern：该参数为字符串形式，用于规定正则表达式的匹配规则或填入其他正则表达式。
2. attributes：该参数为可选参数，可包含属性值g、i或者m，分别表示全局匹配、区分大小写匹配与多行匹配。

例如：

var reg=new RegExp("white");

var reg=new RegExp ("white"，"g");

var pattern = new RegExp([0-9], g);

上述代码表示声明了一个用于全局检索文本中是否包含数字0-9之间任意字符的正则表达式。

 

普通方式中的表达式必须是一个常量字符串，而构造函数中的表达式可以是常量字符串，也可以是一个JavaScript变量。例如，根据用户的输入作为表达式的参数： var reg=new RegExp($("#id").val()，"g");

 

无论是使用普通方式还是使用构造函数的方式定义正则表达式，都需要规定表达式的模式，那么怎样去规定一个表达式呢？方括号用于查找某个范围内的字符，如表所示。

表  JavaScript中常用的正则表达式——方括号表达式

方括号表达式	描述	方括号表达式	描述
[abc]	查找方括号之间的任何字符。	[A-z]	查找任何从大写 A 到小写 z 的字符。
[^abc]	查找任何不在方括号之间的字符。	[adgk]	查找给定集合内的任何字符。
[0-9]	查找任何从 0 至 9 的数字。	[^adgk]	查找给定集合外的任何字符。
[a-z]	查找任何从小写 a 到小写 z 的字符。	(red|blue|green)	查找任何指定的选项。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。

2、表达式的模式

从规范上讲，表达式的模式分为简单模式和复合模式。

（1）简单模式

简单模式是指通过普通字符的组合来表达的模式。例如：

var reg=/china/;

var reg=/abc8/;

可见简单模式只能表示具体的匹配，如果要匹配一个邮箱地址或一个电话号码，就不能使用具体的匹配，这时就用到了复合模式。

（2）复合模式

复合模式是指含有通配符来表达的模式，这里的通配符与SQL Server中的通配符相似。例如：

var reg=/^\w+$/;

其中，+、\w、'和$都是通配符，代表着特殊的含义，因此复合模式可以表达更为抽象化的规则模式。

3、RegExp对象的方法

以上介绍了什么是正则表达式，如何定义正则表达式及正则表达式的模式，那么如何在页面中使用正则表达式呢？在介绍正则表达式之前，首先认识一下RegExp对象，如表11-5所示。

表11-5  RegExp对象常用方法

方法	描述
compile()	编译正则表达式。
exec()	检索字符串中指定的值。返回找到的值，并确定其位置。
test()	检索字符串中指定的值。返回 true 或 false。

接下来对这。

（1）exec()方法

exec()方法用于在目标字符串中搜索匹配，一次仅返回一个匹配结果。其语法格式如下：

语法

RegExpObject.exec(string)

该方法如果找到了匹配内容，其返回值为存放有检索结果的数组；如果未找到任何匹配内容，则返回null值。

例如：

var pattern = new RegExp("e");//检索文本中是否包含小写字母e的正则表达式

var result1 = pattern.exec("Hello ");//返回值为e，因为字符串中包含小写字母e

var result2 = pattern.exec("Hello ");//返回值为null，因为字符串后续内容中不包含小写字母e

如果查到内容较多，可以使用while循环语句进行检索。例如：

var s = "Hello everyone";//初始字符串

var pattern = new RegExp("e");//检索文本中是否包含小写字母e的正则表达式

var result;//用于获取每次检索结果

//while循环

while((result=pattern.exec(s))!=null){

    alert(result);//输出本次检索结果

}

例如，在指定字符串str中搜索abc，具体示例如下。

var str = 'AbC123abc456';

var reg = /abc/i;// 定义正则对象

reg.exec(str); // 匹配结果： ["AbC", index: 0, input: "AbC123abc456"]

在上述代码中，“/abc/i”中的“/”是正则表达式的定界符，“abc”表示正则表达式的模式文本，“I”是模式修饰标识符，表示在str中忽略大小写。exec()方法的参数是待匹配的字符串str，匹配成功时，该方法的返回值是一个数组，否则返回null。从exec()的返回结果中可以看出，该数组保存的第1个元素（AbC）表示匹配到的字符串；第2个元素index表示匹配到的字符位于目标字符串中的索引值（从0开始计算）；第3个参数input表示目标字符串（AbC123abc456）。

【示例】　JavaScript正则表达式exec()方法的简单应用

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>JavaScript正则表达式exec()方法的应用</title>

    </head>

    <body>

        <h3>JavaScript正则表达式exec()方法的应用</h3>

        <hr />

        <p>原始字符串为："Hello jQuery"</p>

        <script>

        //原始字符串

        var s = "Hello jQuery";

        //定义正则表达式，用于全局检索字母Q是否存在

        var pattern = /Q/g;

        //第一次匹配结果

        var result1 = pattern.exec(s);

        //第二次匹配结果

        var result2 = pattern.exec(s);

        alert("第一次匹配结果:"+result1+"\n第二次匹配结果:"+result2);

        </script>

    </body>

</html>

 

（2）test()方法的应用

test()方法用于检测文本中是否包含指定的正则表达式内容，返回值为布尔值。其语法格式如下：

 语法

RegExpObject.test(string)

例如：

var pattern = new RegExp("e");//检索文本中是否包含小写字母e的正则表达式

var result = pattern.test("Hello ");//返回值为true，因为字符串中包含小写字母e

如果字符串中含有与正则表达式匹配的文本，则返回true；否则，返回false。例如：

var str="my cat";

var reg=/cat/;

var result=reg.test(str);

result 的值为 true。

【示例】　JavaScript正则表达式test()方法的简单应用

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>JavaScript正则表达式test()方法的应用</title>

    </head>

    <body>

        <h3>JavaScript正则表达式test()方法的应用</h3>

        <hr />

        <p>原始字符串为："Hello jQuery"</p>

        <script>

        //原始字符串

        var s = "Hello jQuery";

        //定义正则表达式，用于全局检索字母N是否存在

        var pattern = /Q/g;

        //匹配结果

        var result = pattern.test(s);

        alert("查找字母N的匹配结果:"+result);

        </script>

    </body>

</html>

 

4、String对象的方法

JavaScript除了支持RegExp对象的正则表达式方法外，还支持String对象的正则表达式方法。String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法。String对象的方法如表所示。

表  String对象的方法

方法	描 述
match()	找到一个或多个正则表达式的匹配
search()	检索与正则表达式相匹配的值
replace()	替换与正则表达式匹配的字符串
split()	把字符串分割为字符串数组

（1）match()方法

match()方法可以在字符串内检索指定的值，找到一个或多个正则表达式的匹配，该方法类似于indexOf()方法，但是indexOf()方法返回字符串的位置，而不是指定的值。match()方法的语法格式如下。

 语法

字符串对象.match (searchString 或 regexpObject)

searchString是要检索的字符串的值，regexpObject是规定要匹配模式的RegExp对象。例如：

var str="my cat";

var reg=/cat/;

var result=str.match(reg);

运行上述代码，result的值为cat。

String对象中的match()方法除了可在字符串内检索指定的值外，还可以在目标字符串中根据正则匹配出所有符合要求的内容，匹配成功后将其保存到数组中，匹配失败则返回false。具体示例如下。

var str = "It's is the shorthand of it is";

var reg1 = /it/gi;

str.match(reg1);    // 匹配结果：(2) ["It", "it"]

var reg2 = /^it/gi;  

str.match(reg2);    // 匹配结果：["It"]

var reg3 = /s/gi;

str.match(reg3);    // 匹配结果：(4) ["s", "s", "s", "s"]

var reg4 = /s$/gi;

str.match(reg4);    // 匹配结果：["s"]

在上述代码中，定位符“^”和“$”用于确定字符在字符串中的位置，前者可用于匹配字符串开始的位置，后者可用于匹配字符串结尾的位置。其中， g 表示全局匹配，用于在找到第一个匹配之后仍然继续查找。

（2）replace()方法

replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串，语法格式如下。

 语法

字符串对象.replace(RegExp对象或字符串，”替换的字符串”)

如果设置了全文搜索，则符合条件的RegExp或字符串都将被替换；否则只替换第一个，返回替换后的字符串。例如：

var str="My little white cat,is really a very lively cat";

var result=str. replace (/cat/, "dog");

var results=str.replace(/cat/g,"dog");

result 的值为 My little white dog, is really a very lively cat。

results 的值为 My little white dog, is really a very lively dog。

（3）split()方法

split()方法将字符串分割成一系列子串并通过一个数组将这一系列子串返回，语法格式如下。

语法

字符串对象.split(分割符，n)

分割符可以是字符串，也可以是正则表达式。n为限制输出数组的个数，为可选项，如果不设置n，则返回包含整个字符串的元素数组。例如：

var str="red,blue,green,white";

var result=str.split(",");

var string="";

for(var i=0;i<result.length;i++){

 string+=result[i]+"\n";

}

alert(string);

在浏览器中运行上面的代码，弹出如图11.25所示的提示对话框。

5、RegExp对象的属性

了解了RegExp对象和String对象的常用方法之后，继续学习RegExp对象的属性，如表所示。

表  RegExp对象的属性

属性	描述
global	RegExp对象是否具有标志g
ignoreCase	RegExp对象是否具有标志i
multiline	RegExp对象是否具有标志m

（1）global

global属性用于返回正则表达式是否具有标志g，它声明了给定的正则表达式是否执行全局匹配。如果g标志被设置，则该属性为true；否则为false。例如，在上面replace()方法的例子中，result结果中没有使用global属性，则只替换了一个"cat"，results结果中使用了global属性，则替换了所有的"cat"。

（2）ignoreCase

ignoreCase属性用于返回正则表达式是否具有标志i，它声明了给定的正则表达式是否执行忽略大小写的匹配。如果i标志被设置，则该属性为true；否则为false。

（3）multiline

multiline属性用于返回正则表达式是否具有标志m，它声明了给定的正则表达式是否以多行模式执行模式匹配。如果m标志被设置，则该属性为tme;否则为false。

6、正则表达式的模式匹配

以上学习了正则表达式的方法和属性，那么如何定义一个正则表达式来进行模式匹配呢？例如，前面验证电子邮箱的正则表达式"reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/"，这些符号都表示什么意义呢？表列出了正则表达式中常用的符号和用法。

表  JavaScript中常用的正则表达式——元字符

元字符	描述	元字符	描述
/…/	代表一个模式的开始和结束
^	匹配字符串的开始	$	匹配字符串的结束
.	查找单个字符，除了换行和行结束符。	\0	查找 NULL 字符。
\w	查找单词字符。	\n	查找换行符。
\W	查找非单词字符。	\f	查找换页符。
\d	查找数字。	\r	查找回车符。
\D	查找非数字字符。	\t	查找制表符。
\s	查找空白字符。	\v	查找垂直制表符。
\S	查找非空白字符。	\xxx	查找以八进制数 xxx 规定的字符。
\b	匹配单词边界。	\xdd	查找以十六进制数 dd 规定的字符。
\B	匹配非单词边界。	\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

从前面验证邮箱的正则表达式可以看出，字符前后的字符可以是数字、字母或下划线，但是在字符之后的字符只能是字母，那么{2,3}是什么意思呢？有时我们会希望某些字符在一个正则表达式中出现规定的次数。表列出了正则表达式中重复次数的字符。

表 JavaScript中常用的正则表达式——量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

从表中可以看出，电子邮件字符"."后只能是两个或三个字母，字符串" (\.[a-zA-Z]{2.3}){1,2}"表示字符"."后加2~3个字母，可以出现一次或两次，即匹配".com"、".com.cn"这样的字符串。在这两个表中的符号称为元字符，我们可以看到$、+、？等符号被赋予了特殊的含义。如果在一个正则表达式中要匹配这些字符本身，那该怎么办呢？

在JavaScript中，使用反斜杠"\"来进行字符转义，将这些元字符作为普通字符来进行匹配。例如，正则表达式中的"\$"用来匹配美元符号，而不是行尾。类似地，正则表达式中的用来匹配点字符，而不是任何字符的通配符。

 

正则表达式中有（）、[]和{}，区别如下所示：  ()是为了提取匹配的字符串，表达式中有几个(）就有几个相应的匹配字符串。  []是定义匹配的字符串，如[A-Za-z0-9]表示字符串要匹配英文字符和数字。 {}用来匹配长度，W\s{3}表示匹配三个空格。

 ______________________________________________________________________________________________

 

超全面的测试IT技术课程，0元立即加入学习！有需要的朋友戳：

腾讯课堂测试技术学习地址

欢迎转载，但未经作者同意请保留此段声明，并在文章页面明显位置给出原文链接。