引用类型---正则表达式

最新推荐文章于 2024-02-27 06:45:00 发布

南张门

最新推荐文章于 2024-02-27 06:45:00 发布

阅读量799

点赞数

分类专栏： Javascript 文章标签：正则表达式

本文链接：https://blog.csdn.net/haochangdi123/article/details/77097217

版权

Javascript 专栏收录该内容

43 篇文章 3 订阅

订阅专栏

假设用户需要在HTML表单中填写姓名、地址、出生日期等，那么在将表单提交到服务器进一步处理前，JavaScript程序会检查表单以确认用户确实输入了信息并且这些信息是符合要求的

一、什么是正则表达式

正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript的RegExp类表示正则表达式，而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。
正则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后，表单就会被发送到服务器，在服务器端通常会用PHP、ASP.NET等服务器脚本对其进行进一步处理。因为客户端验证，可以节约大量的服务器端的系统资源，并且提供更好的用户体验。

二．创建正则表达式

创建正则表达式和创建字符串类似，创建正则表达式提供了两种方法，一种是采用new运算符，另一个是采用字面量方式。

1.两种创建方式

var box = new RegExp('box');                    //第一个参数字符串,匹配字符串中所有'box'的实例
var box = new RegExp('box', 'ig');              //第二个参数可选,表示模式修饰符

模式修饰符的可选参数

参  数                     含  义
i                    忽略大小写
g                    全局匹配，即该模式将会应用于所有的字符串，不会在发现第一个匹配项后停止
m                    多行匹配，在到达第一行的末端时，还会继续查找下一行是否有匹配项

var box = /box/;                            //直接用两个反斜杠
var box = /box/ig;                          //在第二个斜杠后面加上模式修饰符

2.测试正则表达式

RegExp对象包含两个方法：test()和exec()，功能基本相似，用于测试字符串匹配。test()方法在字符串中查找是否存在指定的正则表达式并返回布尔值，如果存在则返回true，不存在则返回false。exec()方法也用于在字符串中查找指定正则表达式，如果exec()方法执行成功，则返回包含该查找字符串的相关信息数组。如果执行失败，则返回null。

RegExp对象的方法             方  法    功  能    
test                在字符串中测试模式匹配，返回true或false
exec                在字符串中执行匹配搜索，返回结果数组

/*使用new运算符的test方法示例*/
    var pattern = new RegExp('box', 'i');           //创建正则模式，不区分大小写 
    var str = 'This is a Box!';                     //创建要比对的字符串
    alert(pattern.test(str));                       //true,通过test()方法验证是否匹配

/*使用字面量方式的test方法示例*/
    var pattern = /box/i;                           //创建正则模式，不区分大小写
    var str = 'This is a Box!';
    alert(pattern.test(str));

/*使用一条语句实现正则匹配*/
    alert(/box/i.test('This is a Box!'));               //模式和字符串替换掉了两个变量

/*使用exec返回匹配数组*/
    var parrent = new RegExp("box","g") 
    var str= "boxasdasd";
    console.log(parrent.exec(str));//["box", index: 0, input: "boxasdasd"],匹配了返回数组，否则返回null

3.使用字符串的正则表达式方法

除了test()和exec()方法，String对象也提供了4个使用正则表达式的方法。

String对象中的正则表达式方法               方  法    含  义

match(pattern)                      返回pattern中的子串或null
replace(pattern, replacement)       用replacement替换pattern
search(pattern)                     返回字符串中pattern开始位置
split(pattern)                      返回字符串按指定pattern拆分的数组

/*使用match方法获取获取匹配数组*/
    var pattern = /box/ig;                                  //全局搜索,不分大小写
    var str = 'This is a Box!，That is a Box too';
    console.log(str.match(pattern));                        //["Box", "Box"]，匹配到两个Box,Box
    console.log(str.match(pattern).length);                 //2，获取匹配数组的长度

/*使用search来查找匹配数据*/
    var pattern = /box/ig;
    var str = 'This is a Box!，That is a Box too';   
    console.log(str.search(pattern));                       //10，查找到返回位置，否则返回-1
    PS：因为search方法查找到即返回，也就是说无需g全局

/*使用replace替换匹配到的数据*/
    var pattern = /box/ig;
    var str = 'This is a Box!，That is a Box too';
    console.log(str.replace(pattern, 'Tom'));               //This is a Tom!，That is a Tom too，将Box替换成了Tom

/*使用split拆分成字符串数组*/
    var pattern = / /ig;
    var str = 'This is a Box!，That is a Box too';
    console.log(str.split(pattern));                        //["This", "is", "a", "Box!，That", "is", "a", "Box", "too"]，将空格拆开分组成数组

4.RegExp对象的静态属性

属性            短名             含义 
input           $_     最后一次被匹配的字符串(也就是下面的str)
lastMatch       $&     最后一个匹配字符串(str可能会被正则表达式test很多次，最后一次要匹配的项，这里就是big)
lastParen       $+     最后一对圆括号内的匹配子串(下面的就是b)
leftContext     $`     最后一次匹配前的子串(也就是被匹配项之前的文本，就是下面str中big前的文本)
multiline       $*     用于指定是否所有的表达式都用于多行的布尔值
rightContext    $'     在上次匹配之后的子串(也就是被匹配项之后的文本，就是下面str中big后的文本)

/*使用静态属性*/
    var pattern = /(b)ig/g;
    var str = 'This is a big google！';
    pattern.test(str);                                  //执行一下
    console.log(RegExp.input);                          //This is a big google！
    console.log(RegExp.leftContext);                    //This is a 
    console.log(RegExp.rightContext);                   // google！(注意包括空格)
    console.log(RegExp.lastMatch);                      //big
    console.log(RegExp.lastParen);                      //b
    console.log(RegExp.multiline);                      //false

PS：Opera不支持input、lastMatch、lastParen和multiline属性。IE不支持multiline属性。
所有的属性可以使用短名来操作
RegExp.input可以改写成RegExp['$_']，依次类推。但RegExp.input比较特殊，它还可以写成RegExp.$_。

5.RegExp对象的实例属性

属性              含义
global          Boolean值，表示g是否已设置
ignoreCase      Boolean值，表示i是否已设置
lastIndex       整数，代表下次匹配将从哪里字符位置开始，从0算起
multiline       Boolean值，表示m是否已设置
Source          正则表达式的源字符串形式

/*使用实例属性*/
    var pattern = /google/ig;
    console.log(pattern.global);                        //true，是否全局了
    console.log(pattern.ignoreCase);                    //true，是否忽略大小写
    console.log(pattern.multiline);                     //false，是否支持换行
    console.log(pattern.lastIndex);                     //0，下次的匹配位置
    console.log(pattern.source);                        //google，正则表达式的源字符串

var pattern = /google/g;
    var str = 'google google google';
    pattern.test(str);                                  //google，匹配第一次
    console.log(pattern.lastIndex);                     //6，第二次匹配的位

PS：以上基本没什么用。并且lastIndex在获取下次匹配位置上IE和其他浏览器有偏差，主要表现在非全局匹配上。lastIndex还支持手动设置，直接赋值操作。

三．获取控制

正则表达式元字符是包含特殊含义的字符。它们有一些特殊功能，可以控制匹配模式的方式。反斜杠后的元字符将失去其特殊含义。

1.字符类：单个字符和数字

元字符/元符号         匹配情况
.                   匹配除换行符外的任意字符
[a-z0-9]            匹配括号中的字符集中的任意字符
[^a-z0-9]           匹配任意不在括号中的字符集中的字符
\d                  匹配数字
\D                  匹配非数字，同[^0-9]相同
\w                  匹配字母和数字及_
\W                  匹配非字母和数字及_

2.字符类：空白字符

元字符/元符号         匹配情况
\0                  匹配null字符
\b                  匹配空格字符
\f                  匹配进纸字符
\n                  匹配换行符
\r                  匹配回车字符
\t                  匹配制表符
\s                  匹配空白字符、空格、制表符和换行符
\S                  匹配非空白字符

字符类：锚字符
元字符/元符号         匹配情况
^                   行首匹配
$                  行尾匹配
\A                  只有匹配字符串开始处
\b                  匹配单词边界，词在[]内时无效
\B                  匹配非单词边界
\G                  匹配当前搜索的开始位置
\Z                  匹配字符串结束处或行尾
\z                  只匹配字符串结束处

3.字符类：重复字符

元字符/元符号         匹配情况
x?                  匹配0个或1个x
x*                  匹配0个或任意多个x
x+                  匹配至少一个x
(xyz)+              匹配至少一个(xyz)
x{m,n}              匹配最少m个、最多n个x

4.字符类：替代字符

元字符/元符号         匹配情况
this|where|logo     匹配this或where或logo中任意一个

5.字符类：记录字符

元字符/元符号         匹配情况
(string)            用于反向引用的分组
\1或$1              匹配第一个分组中的内容
\2或$2              匹配第二个分组中的内容
\3或$3              匹配第三个分组中的内容

例如：
    /*使用点元字符*/
    var pattern = /g..gle/;                     //.匹配一个任意字符
    var str1 = 'google';
    var str2 = 'gppgle'
    console.log(pattern.test(str1));             //true
    console.log(pattern.test(str2));             //true

    /*重复匹配*/
    var pattern = /g.*gle/;                     //.匹配0个一个或多个
    var str = 'google';                         //*,?,+,{n,m}
    console.log(pattern.test(str));             //true

/*使用字符类匹配*/
    var pattern = /g[a-zA-Z_]*gle/;             //[a-zA-Z]*表示任意个a-z中(大小写)的字符
    var str = 'gDkiAdgle';
    console.log(pattern.test(str));             //true

    var pattern = /g[^0-9]*gle/;                    //[^0-9]*表示任意个非0-9的字符
    var str = 'google';
    console.log(pattern.test(str));                 //true

    var pattern = /[a-z][A-Z]+/;                    //[A-Z]+表示A-Z一次或多次
    var str = 'gOOGLE';
    console.log(pattern.test(str));             //true

/*使用元符号匹配*/
    var pattern = /g\w*gle/;                        //\w*匹配任意多个所有字母数字_
    var str = 'google';
    console.log(pattern.test(str));

    var pattern = /google\d*/;                  //\d*匹配任意多个数字               
    var str = 'google444';
    console.log(pattern.test(str));

    var pattern = /\D{7,}/;                     //\D{7,}匹配至少7个非数字   
    var str = 'google8';
    console.log(pattern.test(str));

/*使用锚元字符匹配*/
    var pattern = /^google$/;						//^从开头匹配，$从结尾开始匹配
    var str = 'google';
    console.log(pattern.test(str));

    var pattern = /goo\sgle/;                       //\s可以匹配到空格     
    var str = 'goo gle';
    console.log(pattern.test(str));

    var pattern = /google\b/;                       //\b可以匹配是否到了边界          
    var str = 'google';
    console.log(pattern.test(str));

/*使用或模式匹配*/
    var pattern = /google|baidu|bing/;              //匹配三种其中一种字符串
    var str = 'google';
    console.log(pattern.test(str));

/*使用分组模式匹配*/
    var pattern = /(google){4,8}/;                  //匹配分组里的字符串4-8次     
    var str = 'googlegoogle';
    console.log(pattern.test(str));

    var pattern = /8(.*)8/;                     //获取8..8之间的任意字符
    var str = 'This is 8google8';
    str.match(pattern);                         
    console.log(RegExp.$1);                            //得到第一个分组里的字符串内容

    var pattern = /8(.*)8/; 
    var str = 'This is 8google8';
    var result = str.replace(pattern,'<strong>$1</strong>');       //得到替换的字符串输出
    document.write(result);                     

    var pattern = /(.*)\s(.*)/;
    var str = 'google baidu';
    var result = str.replace(pattern, '$2 $1');            //将两个分组的值替换输出
    document.write(result);

对于贪婪和惰性

贪婪            惰性
+               +?
?               ??
*               *?
{n}             {n}?
{n,}            {n,}?
{n,m}           {n,m}?

/*关于贪婪和惰性*/
    var pattern = /[a-z]+?/;                        //?号关闭了贪婪匹配，只替换了第一个
    var str = 'abcdefjhijklmnopqrstuvwxyz';
    var result = str.replace(pattern, 'xxx');
    console.log(result);

    var pattern = /8(.+?)8/g;                       //禁止了贪婪，开启的全局
    var str = 'This is 8google8, That is 8google8, There is 8google8';
    var result = str.replace(pattern,'<strong>$1</strong>');
    document.write(result); 

    var pattern = /8([^8]*)8/g;                 //另一种禁止贪婪
    var str = 'This is 8google8, That is 8google8, There is 8google8';
    var result = str.replace(pattern,'<strong>$1</strong>');
    document.write(result);

/*使用exec返回数组*/
    var pattern = /^[a-z]+\s[0-9]{4}$/i;
    var str = 'google 2012';
    console.log(pattern.exec(str));                     //返回整个字符串

    var pattern = /^[a-z]+/i;                       //只匹配字母
    var str = 'google 2012';
    console.logconsole.log(pattern.exec(str));                      //返回google

    var pattern = /^([a-z]+)\s([0-9]{4})$/i;           //使用分组
    var str = 'google 2012';
    console.log(pattern.exec(str)[0]);                  //google 2012
    console.log(pattern.exec(str)[1]);                  //google
    console.log(pattern.exec(str)[2]);                  //2012

/*捕获性分组和非捕获性分组*/
    var pattern = /(\d+)([a-z])/;                   //捕获性分组
    var str = '123abc';
    console.log(pattern.exec(str));

    var pattern = /(\d+)(?:[a-z])/;                 //非捕获性分组
    var str = '123abc';
    console.log(pattern.exec(str));

/*使用分组嵌套*/
    var pattern = /(A?(B?(C?)))/;                   //从外往内获取
    var str = 'ABC';
    console.log(pattern.exec(str));

/*使用前瞻捕获*/
    var pattern = /(goo(?=gle))/;                   //goo后面必须跟着gle才能捕获
    var str = 'google';
    console.log(pattern.exec(str));

/*使用特殊字符匹配*/
    var pattern = /\.\[\/b\]/;                      //特殊字符，用\符号转义即可
    var str = '.[/b]';
    console.log(pattern.test(str));

/*使用换行模式*/
    var pattern = /^\d+/mg;                         //启用了换行模式
    var str = '1.baidu\n2.google\n3.bing';
    var result = str.replace(pattern, '#');
    console.log(result);