Javascript正则表达式

来源:互联网 发布:ubuntu apt get jdk8 编辑:程序博客网 时间:2024/06/05 15:54

Javascript正则表达式

基本概念

    正则表达式,又称正规表示法、常规表示法(英语:Regular Expression,在代码中常简写为regexregexpRE),计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。

 

参考文档:http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

 

案例1:操作一个字符串或者是一篇文章,找出4个数字连在一起的子串

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript">function test(){// 得到内容var con = $("content").innerText;// window.alert(con);// 正则表达式对象,可以检索4个连续的数字var myReg = /(\d){4}/gi;// var myReg = new RegExp("(\\d){4}","gi");// res是检索结果,一个结果对应于一个数组while(res = myReg.exec(con)){window.alert("找到" + res[0]);}}// 获取IDfunction $(id){return document.getElementById(id);}</script></head><body><textarea id="content" rows="20" cols="50"></textarea><br/><input type="button" value="测试" onclick="test()" /></body></html>

创建一个RegExp对象的两种方式

1、隐式创建

基本语法:

    var reg = /正则表达式/[gim];

g:表示全局匹配 

i:表示不区分大小写 

m:表示给定的正则表达式是否以多行模式执行模式匹配。

例如:var myReg = /(\d){4}/gi; //在全局范围内忽略大小写,检索连续的四个数字

 

2、显式创建

基本语法:

    var reg = new RegExp(“正则表达式”,”gim”);

例如:var myReg=new RegExp("(\\d){4}","gi"); //在全局范围内忽略大小写,检索连续的四个数字

 

 

RegExp对象方法

exec()     检索字符串中指定的值,并返回值(找不到返回null)。

test()      检索字符串中指定的值,返回 true 或 false。

 

案例1exec()用法

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript">function test(){// 得到内容var con = $("content").innerText;// window.alert(con);// 正则表达式对象,可以检索以abc开头的字串,考虑换行var myReg = /^(abc)/gim;while(res = myReg.exec(con)){window.alert("找到" + res[0]);}}// 获取IDfunction $(id){return document.getElementById(id);}</script></head><body><textarea id="content" rows="20" cols="50"></textarea><br/><input type="button" value="测试" onclick="test()" /></body></html>

案例2test()用法

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript">function test(){// 得到内容var con = $("content").innerText;// window.alert(con);// 正则表达式对象,可以检索包含abc的字串var myReg = /abc/gi;if(res = myReg.test(con)){window.alert("找到abc");} else {window.alert("未找到abc")}}// 获取IDfunction $(id){return document.getElementById(id);}</script></head><body><textarea id="content" rows="20" cols="50"></textarea><br/><input type="button" value="测试" onclick="test()" /></body></html>

案例3index,leftContext,rightContext

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript">function test(){// 得到内容var con = $("content").innerText;// window.alert(con);// 正则表达式对象,可以检索abcvar myReg = /abc/gi;while(res = myReg.exec(con)){// 匹配字符串索引window.alert("index:" + RegExp.index);// 匹配字符串左边的内容window.alert("leftContent:" + RegExp.leftContext);// 匹配字符串右边的内容window.alert("rightContent:" + RegExp.rightContext);}}// 获取IDfunction $(id){return document.getElementById(id);}</script></head><body><textarea id="content" rows="20" cols="50"></textarea><br/><input type="button" value="测试" onclick="test()" /></body></html>

string对象与正则表达式有关的方法

1match()

基本语法:

    match(reExp),与RegExp对象的exec方法类似,它使用正则表达式模式对字符串执行搜索,并返回一个包含搜索结果的数组。

 

案例:

    //match()方法的用法

    var con=content.innerText;

    var reg=/abc/gi;

    res=con.match(reg);

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

        window.alert(i+" "+res[0]);

    }

 

2search()

基本语法:

    search(reExp),它返回使用正则表达式搜索时,第一个匹配的字符串在整个被搜索的字符串中的位置。

 

案例:

    //search()方法的用法

var str="Visit W3School!";

    document.write(str.search(/W3School/));

输出:6

 

3replace()

基本语法:

    replace(rgExp,replaceText),使用正则表达式模式对字符串执行搜索,并对搜索到的内容用指定的字符替换,返回值为包含替换后的内容的字符串对象。

案例1

    //replace()方法的用法

    var con=content.innerText;

    //把四个数换成这里原来有4个数

    var reg=/(\d){4}/gi;

    var res=con.replace(reg,"这里原来有4个数");

    content.innerText=res;

 

案例2

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript">function test(){// 得到内容var con = $("content").innerText;// window.alert(con);// 正则表达式对象// 删除所有非数字字母下划线字符var myReg = /(\W)+/gi;$("content").innerText = con.replace(myReg, "");// while(res = myReg.exec(con)){// window.alert("找到" + res[0]);// }}// 获取IDfunction $(id){return document.getElementById(id);}</script></head><body><textarea id="content" rows="20" cols="50"></textarea><br/><input type="button" value="测试" onclick="test()" /></body></html>

4split()

基本语法:

    split(“按什么字符分割”),把字符串分割为字符串数组。也可以用 split(regExp)


正则表达式中重要的概念

子表达式

    可以用圆括号组成一个比较复杂的匹配模式,那么一个圆括号的部分可以看作是一个子表达式。

例如:var reg=/(\d)([a-z])/gi

(\d)就是第一个子表达式

([a-z]) 是第二个子表达式

 

捕获

    多个子表达式所匹配到的内容按顺序出现在内存的缓冲区中,称为捕获。

 

反向引用

    圆括号的内容被捕获后,可以在这个括号后被使用,从而写出一个比较实用的匹配模式,这个称为反向引用。

 

var str="1adkk"

var reg=/(\d)([a-z])/gi

把 (\d)匹配到的结果 放入缓存区  => 引用 \1

把 ([a-z])匹配的内容 放入缓存区  => 引用 \2

 

 

案例1:可以检索四个数字连在一起的子串,符合1221格式

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript">function test(){// 得到内容var con = $("content").innerText;// window.alert(con);// 正则表达式对象,可以检索四个数字连在一起的子串// 其要求是1、第一位与第四位相同,2、第二位与第三位相同// 例如:1221,2112var myReg = /(\d)(\d)\2\1/gi;while(res = myReg.exec(con)){window.alert("找到" + res[0]);}}// 获取IDfunction $(id){return document.getElementById(id);}</script></head><body><textarea id="content" rows="20" cols="50"></textarea><br/><input type="button" value="测试" onclick="test()" /></body></html>

案例2:检索出类似11223344格式的字符串

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript">function test(){// 得到内容var con = $("content").innerText;// window.alert(con);// 正则表达式对象,可以检索出类似11223344格式的字符串var myReg = /(\d)\1(\d)\2(\d)\3(\d)\4/gi;while(res = myReg.exec(con)){window.alert("找到" + res[0]);}}// 获取IDfunction $(id){return document.getElementById(id);}</script></head><body><textarea id="content" rows="20" cols="50"></textarea><br/><input type="button" value="测试" onclick="test()" /></body></html>

案例3:检索出类似12321-333666999格式的字符串

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript">function test(){// 得到内容var con = $("content").innerText;// window.alert(con);// 正则表达式对象,可以检索出类似12321-333666999格式的字符串// 前面五位是随机的数字,中间有-,后面是每三个一组连续相等的数字var myReg = /(\d){5}-(\d)\2{2}(\d)\3{2}(\d)\4{2}/gi;while(res = myReg.exec(con)){window.alert("找到" + res[0]);}}// 获取IDfunction $(id){return document.getElementById(id);}</script></head><body><textarea id="content" rows="20" cols="50"></textarea><br/><input type="button" value="测试" onclick="test()" /></body></html>

元字符详解:6种

1、限定符

    用于指定其前面的字符和组合项连续出现多少次。

1---{n}说明:

n表示出现的次数,比如 a{3},1{4},(\d){2}

但是这里要注意一点, 1{3} 去匹配 1111111的话,会得到什么结果呢?  

111 111  最后的一个1被舍弃

PS:其原则是贪婪匹配,总是匹配最多的。

2---{n,m}说明:

n表示至少出现的n次最多m次 ,比如 a{3,4},1{4,5},(\d){2,5}

我们看看 1{3,4} 去匹配 1111111的话,会得到什么结果呢?  

1111 111 4个,后3个 

3--- + 说明:

表示出现1次到任意多次 ,比如 /a+/gi,/1+/gi,/(\d)+/gi 

我们看看 /1+/gi 去匹配 1111111的话,会得到什么结果呢?  

1111111 全部匹配

4--- * 说明:

表示出现0次到任意多次 ,比如 /a*/gi,/1*/gi,/(\d)*/gi 

我们看看 /a1*/gi 去匹配 a111的话,会得到什么结果呢?  

a111     全部匹配

5---? 说明:

表示出现0次到1次 ,比如 /a?/gi,/1?/gi,/(\d)?/gi 

我们看看 /a1?/gi 去匹配 a2111的话,会得到什么结果呢?  

a        去匹配 a111的话 结果是:a1

 

2、字符匹配符

[a-z] 说明:

[a-z] 表示可以匹配a-z中任意一个字符 ,比如 /[a-z]/gi,/[a-z]{2}/gi我们看看 /[A-Z]/gi 去匹配 a22c8  会得到什么结果?  a c

[A-Z] 表示可以匹配A-Z中任意一个字符。

[0-9] 表示可以匹配0-9中任意一个字符。

 

[^a-z] 说明:

[^a-z] 表示可以匹配不是a-z中的任意一个字符 ,比如 用 /[^a-z]{2}/gi去匹配a22c8会得到什么结果呢? 22

 

[^A-Z] 表示可以匹配不是A-Z中的任意一个字符。

[^0-9] 表示可以匹配不是0-9中的任意一个字符。

 

[abcd] 表示可以匹配abcd中的任意一个字符。

[^abcd] 表示可以匹配不是abcd中的任意一个字符。

 

总结:

\d 表示可以匹配0-9的任意一个数字,相当于 [0-9]

\D 表示可以匹配不是0-9中的任意一个数字,相当于[^0-9]

\w 匹配任意英文字符、数字和下划线,相当于[a-zA-Z0-9_]

\W 相当于 [^a-zA-Z0-9_] \w 刚好相反.

\s 匹配任何空白字符(空格,制表符等)

\S 匹配任何非空白字符 ,\s刚好相反

.  查找单个字符,除了换行和行结束符,如果要匹配.本身则需要使用 \.

/\./gi  去匹配123.5  得到.

 

3、特殊字符匹配

\xn 的 x是固定的 , n是一个十六进制的数,比如\x21 就是去匹配 ascii码表中 十六进制是 21的字符,查表可知就是 ! 实际上,我们也可以直接通过\ \gi 的方式来匹配某些不可见特殊字符

 

4、定位符

定位符用于 规定要匹配的字符串出现的位置,比如在字符串的开始还是在结束的位置。

1---^ 符号 说明

匹配目标字符串的开始位置。

比如 /^123/gi 去匹配 “123sfsadfan” ,我们看看会得

到什么结果?   han

2---$ 符号 说明

匹配目标字符串的结束位置。

比如 /123$/gi 去匹配 “afasf3wrqw12321343” ,我们看看会得

到什么结果? 匹配不到  

 

5、转义符号

   需要用到转义符号\的字符有以下:

. * + ( ) $ / \ ? [ ] ^ { }  


6、选择匹配符

用 \(123|321|0)\gi 去匹配 “123 321111 ”,会得到什么结果? 123 321



综合案例:匹配电子邮件

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript">function test(){// 得到内容var con = $("content").innerText;// window.alert(con);// 正则表达式对象,匹配电子邮件// 要求:1、只能有一个@,2、@前面是用户名可以是a-z A-Z 0-9 _ -中的任意字符// 3@后面是域名,可以是任意英文字符.任意英文字符var myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;if(myReg.test(con)){window.alert("邮件格式正确");} else {window.alert("邮件格式错误");}}// 获取IDfunction $(id){return document.getElementById(id);}</script></head><body><textarea id="content" rows="20" cols="50"></textarea><br/><input type="button" value="测试" onclick="test()" /></body></html>

 

 

 

----------参考《韩顺平.轻松搞定网页设计(html+css+js)


0 0