Javascript：正则表达式

信息：原创2014-08-270 次阅读0 个评论

标签：后天堂向上，网站制作，自学教程，网站技术，javascript，javascript正则表达式


正则表达式简介

正则表达式（Regular Expression）是一个描述字符模式的对象。ECMAScript 的 RegExp 类表示正则表达式，而 String 与 RegExp 都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。

正则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后，表单数据就会被发送到服务器，在服务器通常会使用 PHP 和 ASP.NET 等服务器脚本对其进行进一步的处理。在客户端验证表单数据，可以节约大量的服务器端的系统资源，并且提供了更好的用户体验。

还有，正则表达式非常重要，在其他语言里面也有正则表达式，而且规则是通用的。



正则表达式规则

上面也说了，正则表达式在很多语言中都有使用，其使用规则也是大体相同的，但是也有细微差别，这里讲的是 JS 中的正则表达式。


①. 原子

普通字符 最常见的字符，比如，a-z A-Z 0-9 _
单元字符 普通字符组成的字符集合，用一堆小括号括起来，作为一个整体去匹配，如 (movie)，它的规则是在指定字符串中只有出现了 movie 这个字符集合，才会正常匹配到，如果字符串中出现了 movi、mov、vie 等等，都不能正常匹配到。
原子表 用方括号括起来的字符集合，如 [houheaven]、[^houheaven]，前者它的规则是在指定字符串中出现了 houheaven 这个字符集合中的任意一个字符或者一部分，正则都能正常匹配到，如 a、e、e、hou、heaven、hea 等等；后者的意思正好相反，字符串中出现除 a、e、h、n、o、u、v 这些字符之外的字符才能正常匹配到。
转义字符 表示特殊的字符
转义字符 说明 表示内容
\d 包含所有数字 [0-9]
\D 排除所有数字 [^0-9]
\w 包含所有普通字符 [a-zA-Z0-9_]
\W 排除所有普通字符 [^a-zA-Z0-9_]
\s 包含空白区域（空格、回车、换行、分页、水平制表符、垂直制表符） [\n\r\f\t\v]
\S 排除空白区域（空格、回车、换行、分页、水平制表符、垂直制表符） [^\n\r\f\t\v]

②. 元字符

元字符 说明 实例
. 匹配当前任意字符1次，换行除外

实例

 
      var reg=/g..gle/;
      var str1="ggle";
      var str2="gogle";
      var str3="google";
      var str4="gooogle";
      var str5="g**gle";
      var str6="g55gle";
      alert(reg.test(str1));		// 输出 false
      alert(reg.test(str2));		// 输出 false
      alert(reg.test(str3));		// 输出 true
      alert(reg.test(str4));		// 输出 false
      alert(reg.test(str5));		// 输出 true
      alert(reg.test(str6));		// 输出 true
* 匹配前一个字符内容的0次、1次或多次

实例

 
      var reg=/go*gle/;
      var str1="ggle";
      var str2="gogle";
      var str3="goooogle";
      var str4="g33gle";
      alert(reg.test(str1));		// 输出 true ，指定字符出现0次，匹配成功
      alert(reg.test(str2));		// 输出 true ，指定字符出现1次，匹配成功
      alert(reg.test(str3));		// 输出 true ，指定字符出现4次，匹配成功
      alert(reg.test(str4));		// 输出 false，指定字符无法匹配，匹配失败
+ 匹配前一个字符内容的1次或多次

实例

 
      var reg=/go+gle/;
      var str1="ggle";
      var str2="gogle";
      var str3="goooogle";
      alert(reg.test(str1));		// 输出 false，指定字符出现0次，匹配失败
      alert(reg.test(str2));		// 输出 true ，指定字符出现1次，匹配成功
      alert(reg.test(str3));		// 输出 true ，指定字符出现4次，匹配成功
? 匹配前一个字符内容的0次或1次

实例

 
      var reg=/go?gle/;
      var str1="ggle";
      var str2="gogle";
      var str3="goooogle";
      alert(reg.test(str1));		// 输出 true ，指定字符出现0次，匹配成功
      alert(reg.test(str2));		// 输出 true ，指定字符出现1次，匹配成功
      alert(reg.test(str3));		// 输出 false，指定字符出现4次，匹配失败
{M} 匹配前一个字符内容的重复次数为M次（t=M）

实例

 
      var reg=/go{2}gle/;
      var str1="gogle";
      var str2="google";
      var str3="goooogle";
      alert(reg.test(str1));		// 输出 false，指定字符出现0次，匹配失败
      alert(reg.test(str2));		// 输出 true ，指定字符出现2次，匹配成功
      alert(reg.test(str3));		// 输出 false，指定字符出现4次，匹配失败
{M,} 匹配前一个字符内容的重复次数为 大于或等于M次（t≥M）

实例

 
      var reg=/go{2,}gle/;
      var str1="gogle";
      var str2="google";
      var str3="goooogle";
      alert(reg.test(str1));		// 输出 false，指定字符出现1次，匹配失败
      alert(reg.test(str2));		// 输出 true ，指定字符出现2次，匹配成功
      alert(reg.test(str3));		// 输出 true ，指定字符出现4次，匹配成功
{M,N} 匹配前一个字符内容的重复次数为 M到N次（M≤t≤N）

实例

 
      var reg=/go{2,3}gle/;
      var str1="gogle";
      var str2="google";
      var str3="gooogle";
      var str4="goooogle";
      alert(reg.test(str1));		// 输出 false，指定字符出现1次，匹配失败
      alert(reg.test(str2));		// 输出 true ，指定字符出现2次，匹配成功
      alert(reg.test(str3));		// 输出 true ，指定字符出现3次，匹配成功
      alert(reg.test(str4));		// 输出 false，指定字符出现4次，匹配失败
() 合并整体匹配，并放入内存，使用 \1 \2 ……依次读取

实例

 
      // ===========================================================================

      var reg=/2000(.*)05(\1)15/;	// \1 表示自身内容与第一个括号()内的内容相同
      var str1="2000-05-15";
      var str2="2000/05/15";
      var str3="2000-05.15";
      alert(reg.test(str1));		// 输出 true ，日期连字符一致，匹配成功
      alert(reg.test(str2));		// 输出 true ，日期连字符一致，匹配成功
      alert(reg.test(str3));		// 输出 false，日期连字符不同，匹配失败

      // ===========================================================================

      var reg=/#(.*)#,%(.*)%/;
      var str="lesson1:#html5#,%css3%";
      reg.test(str);
      alert(RegExp.$1);			// 输出 html5
      alert(RegExp.$2);			// 输出 css3
      alert(str);			// 输出 lesson1:#html5#,%css3%
      alert(str.replace(reg,"$2,$1"));	// 输出 lesson1:css3.html5
| 选择匹配

实例

 
      var reg=/google|baidu/;
      var str1="google";
      var str2="baidu";
      var str3="bing";
      alert(reg.test(str1));		// 输出 true
      alert(reg.test(str2));		// 输出 true
      alert(reg.test(str3));		// 输出 false
^ 匹配字符串首部内容

实例

 
      var reg1=/google/;
      var reg2=/^google/;
      var str="site:google";
      alert(reg1.test(str));		// 输出 true ，字符串中有 google 就能匹配成功
      alert(reg2.test(str));		// 输出 false，字符串必须 google 开始才能匹配成功
$ 匹配字符串尾部内容

实例

 
      var reg1=/google/;
      var reg2=/google$/;
      var str="google.com";
      alert(reg1.test(str));		// 输出 true ，字符串中有 google 就能匹配成功
      alert(reg2.test(str));		// 输出 false，字符串必须 google 结尾才能匹配成功

③. 模式修正符

模式修正符是为正则表达式增强和补充的一个功能，使用时把模式修正符放在整个正则表达式的后面。

模式修正符 英文全拼 说明 实例
i ignoreCase 忽略大小写，正则内容在匹配的时候不区分大小写

实例

 
      var reg1=/hello/;
      var reg2=/hello/i;
      var str="Hello";
      alert(reg1.test(str));		// 输出 false
      alert(reg2.test(str));		// 输出 true
g global 全局匹配，匹配到第一个之后仍然继续直到匹配到最后一个

实例

 
      var reg1=/hello/;
      var reg2=/hello/g;
      var str="hello hello";
      alert(str.match(reg1));		// 输出数组 hello
      alert(str.match(reg2));		// 输出数组 hello,hello
m multiline 多行匹配，

暂无

④. 贪婪模式与懒惰模式

为了通俗易懂，直接看实例：

var reg1=/<.*>/;

var reg2=/<.*?>/;

var reg3=/<.*?>/g;

var str="<p>hello world!</p>";

alert(str.match(reg1));// 输出 <p>hello world!</p>

alert(str.match(reg2));// 输出 <p>

alert(str.match(reg3));// 输出 <p>,</p>

上面三个正则表达式分别使用的是 贪婪模式、懒惰模式、懒惰模式+全局模式。


贪婪模式：在匹配到<p>中的>时，正则表达式并没有停止匹配，而是继续下去，一直匹配到字符串结束。

懒惰模式：在匹配到<p>中的>时，正则表达式就已经停止匹配，即匹配到第一个满足条件就结束匹配。






创建正则表达式

正则表达式的创建有两种方式：类的实例化和字面量创建。


类的实例化：

var reg=new RegExp("Hello");// 无模式修饰符，相当于 /Hello/

var reg=new RegExp("Hello","ig");// 有模式修饰符，相当于 /Hello/ig

字面量创建：

var reg=/Hello/

var reg=/Hello/ig



RegExp 属性和方法

RegExp 静态属性

名称 短名 描述
RegExp.input $_ 当前被匹配的字符串
RegExp.lastMatch $& 最后一个匹配字符串
RegExp.lastParen $+ 最后一对圆括号内的匹配子串
RegExp.leftContext $` 最后一次匹配前的子串
RegExp.rightContext $' 在上次匹配之后的子串
RegExp.multiline $* 用于指定是否所有的表达式都用于多行的布尔值，不兼容
实例：打开

var reg=/houheaven/

var str="www.houheaven.com";

reg.test(str);// 不能省略，不然静态属性无法使用

 

alert(RegExp.input);// 输出 www.houheaven.com

alert(RegExp.lastMatch);// 输出 houheaven

alert(RegExp.lastParen);// 输出

alert(RegExp.leftContext);// 输出 www.

alert(RegExp.rightContext);// 输出 .com

alert(RegExp.multiline);// 输出 false

 

alert(RegExp["$_"]);// 输出 www.houheaven.com

alert(RegExp["$&"]);// 输出 houheaven

alert(RegExp["$+"]);// 输出

alert(RegExp["$`"]);// 输出 www.

alert(RegExp["$'"]);// 输出 .com

alert(RegExp["$*"]);// 输出 false


RegExp 对象属性

名称 描述
.global 检查模式修饰符 g 是否设置
.ignoreCase 检查模式修饰符 i 是否设置
.multiline 检查模式修饰符 m 是否设置
.source 正则表达式原字符串形式
.lastIndex 下次匹配的位置（必须加 g，否则浏览器不兼容）
实例：打开

var reg=/houheaven/i

alert(reg.global);// 未设置 g，输出 false

alert(reg.ignoreCase);// 已设置 i，输出 true

alert(reg.multiline);// 未设置 m，输出 false

alert(reg.source);// 输出 houheaven

 

var reg=/houheaven/g

var str="www.houheaven.com";

reg.test(str);

alert(reg.lastIndex);// 输出 5

reg.test(str);

alert(reg.lastIndex);// 输出 8


方法

名称 描述 实例
.test() 匹配字符串，匹配到返回 true，否则返回 false

实例

 
      var reg=/hello/;
      var str="hello world!";
      alert(reg.test(str));		// 输出 true
.exec() 匹配字符串，匹配到返回结果数组，否则返回 null

实例

 
      // ================================ 匹配成功 ===================================
      var reg=/hello/;
      var str="hello world!";
      alert(reg.exec(str));		// 输出 hello
      alert(typeof reg.exec(str));	// 输出 object，数组属于 object

      // ================================ 匹配失败 ===================================
      var reg=/Hello/;
      var str="hello world!";
      alert(reg.exec(str));		// 输出 null


String 方法

方法

名称 描述 实例
.match(reg) 匹配字符串，匹配到返回结果数组，否则返回 null

实例

 
      var reg=/hello/g;
      var str="hello! hello everyone!";
      alert(str.match(reg));		// 输出数组 hello,hello
.search(reg) 匹配字符串，匹配到返回字符串位置，否则返回 -1

实例

 
      var reg=/hello/g;
      var str="hey! hello! hello everyone!";
      alert(str.search(reg));		// 输出 5
      alert(str.search(reg));		// 输出 5

这个函数有个特性，匹配到就返回，不会再继续下去，所以模式修饰符 g 也就没有用了。
.split(reg) 分割字符串，匹配到返回字符串按 reg 拆分的数组，否则返回原字符串

实例

 
      var reg=/!/g;
      var str="stay hungry!stay foolish!";
      alert(str.split(reg));		// 输出长度为 3 数组 stay hungry,stay foolish,
.replace(reg,str) 替换字符串，匹配到则返回用 str 替换 reg 后的字符串，否则返回原字符串

实例

 
      var reg=/hello/g;
      var str="hello! hello everyone!";
      alert(str.replace(reg,"hey"));		// 输出 hey! hey everyone!
      alert(str);				// 输出 hello! hello everyone!