JavaScript中的正则表达式从入门到精通：

一、什么是正则表达式？

一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。

在JavaScript中正则表达式是描述字符模式的对象，是一种引用类型。

二、正则表达式功能

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

•测试字符串的某个模式。

例如，可以对一个输入字符串进行测试，看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证

•替换文本。可以在文档中使用一个正则表达式来标识特定文字，然后可以全部将其删除，或者替换为别的文字

•根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字

二、正则表达式语法、如何创建正则表达式

语法1：使用new与RegExp() 构造函数来创建
var patten1=new RegExp(pattern,modifiers); 例如：var re1 = new RegExp("a","i")；
语法2：字面量模式赋值来创建
var patten2=/pattern/modifiers; 例如：var re2=/a/i ;

语法解析：

patten1，patten2 为定义的正则表达式变量名

pattern：模式，正则表达式。由普通字符、特殊字符（元字符）组成

modifiers：可选项标志，修饰符。用于指定全局匹配、区分大小写的匹配和多行匹配。

注：匹配：指的是在字符串中找到符合要求的字符串。

modifiers标志	说明
g	global，执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。通俗说：也就是，查找符合pattern正则式规则的所有字符串。如果没有g，只会在找到第一个符合字符串之后就不会再找下去了例如：var str="Is this all there is?"; var patten1=/is/g; 会匹配到2个is，蓝色背景的is和紫色背景的is var patten2=/is/; 会匹配到1个is，蓝色背景的is

case-insensitive，执行对大小写不敏感的匹配。

通俗说：不关心字母的大小写。查找is 等价于查找Is，或IS，或iS

例如：var str="Is this all there is?";

var patten1=/is/gi; 会匹配到3个is，

mmultiline，执行多行匹配。

三、特殊字符、元字符、转义字符

var str="Is this all there is?";

var patten1=/is/gi; 会匹配到3个is，

在这个例子中，我们会发现，用is来匹配，可以匹配到3项，

但是如果我们只需要匹配到is这个单词而不需要其他包含is字符串的单词。应该怎么做呢？

代码更新如下：

var str="Is this all there is?";

var patten1=/\bis\b/gi; 会匹配到2个is单词，就不会匹配到this单词中的is了。

这里就是用到了我们的特殊字符，也就是元字符来转义。上面例子中\b 就是一个转义字符，它表示匹配单词的边界。

\bis\b 那么这里的意思就相当于 is左右边都没有字母，是单词的边界。自然就仅仅匹配到is这个单词。

3.1 元字符、转义字符：其中黄色背景为重点。

元字符	说明	实例（有蓝色背景表示被匹配到的字符串）
.	标识：句号（英文状态）。匹配单个字符，任意类型的1个字符（除了换行和行结束符）。	可能是一个英文字母，一个数字也可以能是一个标点符号等等（除了换行与结束符）
\b	匹配单词边界。通俗：指的是单词的界限，没有其他的单词字母出现	var str="Is this all there is?"; var patten1=/\bis\b/gi;
\B	匹配非单词边界。通俗：指的是单词的界限，存在其他的单词字母	var str="Is this all there is?"; var patten1=/\Bis\b/gi;
\d	匹配数字字符。通俗：一个\d 代表0-9之前那的任意一个数字	var str="Give 100%!"; var patt1=/\d/g;
\D	匹配非数字字符。通俗：一个\D 代表（除了0-9之外）的其他的任意一个字符（包括空格）。	var str="Give 100%!"; var patt1=/\D/g;
\f	匹配换页符。
\r	匹配火车符（enter）。
\t	匹配制表符。（tab）
\v	匹配垂直制表符。
\n	匹配垂换行。	var str="Visit JavaScript.\n Learn JavaScript."; var patt1=/\n/g;
\s	匹配空白字符。空白字符可以是：空格符 (space character) 制表符 (tab character) 回车符 (carriage return character) 换行符 (new line character) 垂直换行符 (vertical tab character) 换页符 (form feed character)	var str="Is this all there is?"; var patt1=/\s/g;
\S	匹配非空白字符。	var str="Is this all there is?"; var patt1=/\S/g;
\0	匹配NULL 字符。("")	var str=""; var patt1=/\0/g; document.write(str.match(patt1)); //null
\w	匹配a-z、A-Z、0-9，以及下划线。	var str="Give 100%!"; var patt1=/\w/g;
\W	匹配非a-z、A-Z、0-9，以及下划线。	var str="Give 100%!"; var patt1=/\W/g;
\xxx	匹配以八进制数 xxx 规定的字符。	var str="Visit you. Hello World!"; var patt1=/\127/g;
\xdd	匹配以十六进制数 dd 规定的字符。	var str="Visit you. Hello World!"; var patt1=/\x57/g;
\uxxxx	匹配以十六进制数 xxxx 规定的 Unicode 字符。	var str="we. Hello World!"; var patt1=/\u0057/g;

3.2 元字符：

str $	匹配以 $前面的字符结尾的字符串	var str="Is this his"; var patt1=/is$/g; 也就是字符串的结尾是is的字符
^str	匹配以^后面的str字符开头的字符串	var str="Is this his"; var patt1=/is$/g; document.write(str.match(patt1)); //is var patt2=/^is/gi; document.write(str.match(patt2)); //Is var patt3=/^isr/gi; document.write(str.match(patt3)); //null
str1（？=str2）	匹配所有在 str2字符串前面的 str1字符串	var str="Is this all there is"; var patt1=/is(?= all)/g; 也就是匹配all前的is字符串
str1（？！str2）	匹配所有不在 str2字符串前面的 str1字符串	var str="Is this all there is"; var patt1=/is(?！all)/g; 也就是匹配不在all前的is字符串
（）

3.3 元字符：贪婪量词。懒惰量词

区别：惰性量词仅仅在贪婪量词后面加个"?"而已。如"a+"是贪婪匹配的,"a+?"则是惰性的。

•用贪婪量词进行匹配时，它首先会将整会字符串当成一个匹配，如果匹配的话就退出，如果不匹配，

就截去最后一个字符进行匹配，如果不匹配，继续将最后一个字符截去进行匹配，直到有匹配为止。

直到现在我们遇到的量词都是贪婪量词

通俗一点就是说，它会先用规则中多个字符去匹配字符串，匹配不成功再考虑用少的字符去匹配字符串，它是很贪婪的。

•用惰性量词进行匹配时，它首先将第一个字符当成一个匹配，如果成功则退出，如果失败，则测试前两个字符，依些增加，

直到遇到合适的匹配为止

通俗一点就是说，它会先用规则中少个字符去匹配字符串，匹配不成功再考虑用多的字符去匹配字符串，它是很懒惰的的，总是背负少的字符

例子区别：

var str="Hellooo World! Hello yo"; 
var patt1=/o+/g;    // 这里就是它会先用  n个o去匹配，不成功再用n-1个o去匹配，。。。不成功最后用1个o去匹配，  
document.write(str.match(patt1)+"<br/>");   结果：000,0,0,0               
var patt2=/o+?/g;   //这里就是它会先用用1个o去匹配 ，。。。不成功再用n-1个o去匹配，不成功n个o去匹配
document.write(str.match(patt2));  //结果 0,0,0,0,0,0

下表都是用贪婪词汇来介绍这些量词

量词(下表量词单个出现时皆是贪婪量词) 量词(下表量词后面再添加一个？号就变成惰性次)

chat +
(str)+

匹配+前面的1个字符（重复1次或者是多次）的字符串
匹配+前面的（）里面的字符串（重复1次或者是多次）的字符串

var str="Hellooo World! Hello yo";
var patt1=/o+/g;
var str1="Hellooo World! Hello yo";
var patt2=/l+o+/g;

var str="Hellooo World! Hello yo";
var patt1=/o+/g; //ooo,o,o,o
var patt2=/l+o+/g;//llooo,llo
var patt3=/lo+/g;//looo,lo
document.write(str.match(patt1)+"<br/>");
document.write(str.match(patt2)+"<br/>");
document.write(str.match(patt3));

chat*
(str)*

匹配*前面的1个字符（重复0次或者是多次）的字符串
匹配*前面的（）里面的字符（重复0次或者是多次）的字符串

var str="Hellooo World! Hello yo";
var patt1=/lo*/g;
就是说：o可以出现0次，1次，多次，

chat?
(str)？

匹配?前面的1个字符（重复0次或者是1次）的字符串
匹配？前面的（）里面的字符（重复0次或者是1次）的字符串

var str="1, 100 or 1000?";
var patt1=/10?/g; 也就是匹配 10，或者1
var str1="jfklj do,jfjdoes";
var patt2=/do(es)?/g; 也就是匹配does，或者do

{n}

匹配{}前面的1个字符（重复n次）的字符串
匹配{}前面的（）里面的字符（重复n次）的字符串

var str="100, 1000 or 10000,875766?";
var patt1=/\d{4}/g; 也就是匹配0-9，之间组成的4位数

{n,}

匹配{}前面的1个字符（重复n次,或n次以上）的字符串
匹配{}前面的（）里面的字符（重复n次或n次以上）的字符串

var str="100, 1000 or 10000,875766?";
var patt1=/\d{4,}/g;
也就是匹配0-9之间组成的4位数及以上

{n,m}

匹配{}前面的1个字符（重复n次到m次之间）的字符串
匹配{}前面的（）里面的字符（重复n次到m次之间）的字符串

var str="100, 1000 or 10000,875766?";
var patt1=/\d{4,5}/g;
也就是匹配0-9之间组成的4位数及5位数

3.4 元字符方括号

方括号用于查找某个范围内的字符

[chat1chat2。。。]	匹配方括号之间的任意字符。注意：是任意单个字符	var str="Is tab all abc is?"; var patt1=/[abc]/g; document.write(str.match(patt1));//a,b,a,a,b,c
[^chat1chat2.。。。。]	匹配不在方括号之间的任意字符。注意：是任意单个字符	var str="Is this all there is?"; var patt1=/[^abcdefg]/g; document.write(str.match(patt1)); //I,s, ,t,h,i,s, ,l,l, ,t,h,r, ,i,s,?
[0-9]	匹配任何从 0 至 9 的数字。注意：是单个数字字符
[a-z]	匹配任何从小写 a 到小写 z 的字符。
[A-Z]	匹配任何从大写 A到小写 Z 的字符。
[A-z]	匹配任何从大写 A到小写 Z 的字符以及匹配任何从小写 a 到小写 z 的字符。
[adgk]	匹配给定adgk集合内的任何字符。
[^adgk]	匹配给定adgk集合之外的任何字符。
(red\|blue\|green)	查找任何指定的选项。？？？？？

四、正则表达式（RegExp 对象）的方法

直接使用在政RegExp对象上的方法

方法	描述
compile	在 1.5 版本中已废弃。编译正则表达式。
exec	检索字符串中指定的值。返回找到的值，并确定其位置。如果字符串中有匹配的值返回该匹配值，否则返回 null。
test	检索字符串中指定的值。返回 true 或 false。
toString	返回正则表达式的字符串。

4.1 exec 方法：

定义和用法

exec() 方法用于检索字符串中的正则表达式的匹配。

如果字符串中有匹配的值返回该匹配值，否则返回 null。

语法：RegExpObject.exec(string)

所有主要浏览器都支持 exec() 方法

4.2 test 方法：

测试字符串,符合模式时返回true,否则返回false

    //test方法,测试字符串,符合模式时返回true,否则返回false

    var str1 = "he"; //文本字符串, 将被作为test方法的参数
    var reobj1 = /he/; //最简单的RegExp对象,将匹配he这个单词
    var result1 = reobj1.test(str1); //因为模式 /he/可以匹配到 字符串str1，返回true
    console.log(result1); //true  

    var str2 = "we"; //文本字符串, 将被作为test方法的参数
    var reobj2 = /he/; //最简单的RegExp对象,将匹配he这个单词
    var result2 = reobj2.test(str2); //因为模式 /he/匹配不到 字符串str2，返回false
    console.log(result2); //false 

    var str3 = "HE"; //文本字符串, 将被作为test方法的参数
    var reobj3 = /he/; //最简单的RegExp对象,将匹配he这个单词
    var result3 = reobj3.test(str3); //因为模式 /he/匹配不到 字符串str3，返回false
    console.log(result3); //false 


    var str4 = "HE"; //文本字符串, 将被作为test方法的参数
    var reobj4 = /he/i; //最简单的RegExp对象,将匹配he，He，hE，HE这些词
    var result4 = reobj4.test(str4); //因为模式 /he/匹配到 字符串str4，返回true
    console.log(result4); //true



    var str5 = "Certainly!He loves her!"; //文本字符串, 将被作为test方法的参数
    var reobj5 = /^he/i; //RegExp对象,根据上面的元字符可以知道，单独使用^没有中括号，
    //这里表示将匹配 以^后面的字符he，HE,He，eH开头的字符串，str5并不是
    var result5 = reobj5.test(str5); //因为模式 /he/匹配不到到 ，返回false
    console.log(result5); //false


    var str6 = "He is a good boy!"; //文本字符串, 将被作为test方法的参数
    var reobj6 = /^he$/i; //RegExp对象,根据上面的元字符可以知道，单独使用^没有中括号，
    //这里表示将匹配 以^后面的字符he，HE,He，eH开头的字符串，str5并不是
    var result6 = reobj6.test(str6); //因为模式 /he/匹配不到到 ，返回false
    var str7 = "He is a good boy e!";
    var str8 = "He";
    var str9 = "He is a good boy he";
    console.log(result6); //false
    console.log(reobj6.test(str7));//false
    console.log(reobj6.test(str8));//true
    console.log(reobj6.test(str9));//false
    
   
    var str11 = "user Name"; //用户名包含空格  
    var reobj11 = /\s/; // \s匹配任何空白字符，包括空格、制表符、换页符等等  
    console.log(reobj11.test(str11)); //true     
    var str12 = "user     Name"; //用户名包含制表符  
    console.log(reobj11.test(str12)); //true  

    var str12 = "variableName"; //变量名必须以字母开头  
    var reobj12= /^[a-z]/i; //[]匹配指定范围内的任意字符,这里将匹配英文字母,不区分大小写     
    console.log(reobj12.test(str12)); //true  
    var str13 = "123abc";
    console.log(reobj12.test(str13)); //false

五、支持正则表达式RegExp 的 String 对象的方法

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

五、正则表达式RegExp 对象的属性

属性	描述
constructor	返回一个函数，该函数是一个创建 RegExp 对象的原型。
global	判断是否设置了 "g" 修饰符
ignoreCase	判断是否设置了 "i" 修饰符
lastIndex	用于规定下次匹配的起始位置
multiline	判断是否设置了 "m" 修饰符
source	返回正则表达式的匹配模式

入门到精通 JavaScript中的正则表达式RE、RegExp

JavaScript中的正则表达式从入门到精通：

二、正则表达式语法、如何创建正则表达式

4.1 exec 方法：

定义和用法

语法：RegExpObject.exec(string)

4.2 test 方法：

五、支持正则表达式RegExp 的 String 对象的方法

五、正则表达式RegExp 对象的属性

猜你喜欢

入门到 精通 JavaScript中的正则表达式RE、RegExp

JavaScript中的正则表达式 从入门到精通 ：

二、正则表达式语法、如何创建正则表达式

4.1 exec 方法：

定义和用法

语法：RegExpObject.exec(string)

4.2 test 方法：

五 、支持正则表达式RegExp 的 String 对象的方法

五 、正则表达式RegExp 对象的属性

猜你喜欢

入门到精通 JavaScript中的正则表达式RE、RegExp

JavaScript中的正则表达式从入门到精通：

五、支持正则表达式RegExp 的 String 对象的方法

五、正则表达式RegExp 对象的属性