js_day27--正则表达式

来源：互联网发布：80年代中日关系知乎编辑：程序博客网时间：2024/06/06 09:34

Day27

Javascript正则表达式（RegExp）

任务：

明确学习正则表达式的重要性
初步了解正则表达式是什么
能做简单的正则表达式的开发

为什么要学习正则表达式？

问题：

给你一个字符串（或一篇文章），请你找出所有四个数字连在一起的字串，

并且这个字串满足第一位和第四位相同，第二位和第三位相同，如1221和5665等。

继续：

给你一个字符串，请你验证该字符串是否是一个电子邮件？

给你一个字符串，请你验证该字符串是否是一个身份证？

给你一个字符串，请你验证该字符串是否是一个电话号码？

为了解决上述问题，js的设计者给我们提供了一个叫正则表达式（RegExp对象），全称：Regular Expression。

实际上，许多编程语言都支持正则表达式进行字符串操作！如java，perl等。

基本概念：
一个正则表达式就是用某种模式去匹配一类字符串的一个公式,反映到javascript中，它就是一个RegExp对象！
很多人因为它们看上去比较古怪而且复杂所以不敢去使用，不过，经过一点点练习之后，这些复杂的表达式其实写起来还是蛮简单的，而且，一旦你弄懂它们，你就能把数小时辛苦而且易错的文本处理工作缩短在几分钟（甚至几秒钟）内完成。

入门案例：

给一个字符串，找出所有四个数字连在一起的子串。

<html>  <head>    <title>regexp1.html</title>        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">function test1(){//得到用户的内容var content = document.getElementById("content").value;//window.alert(content.value);var myReg=/(\d){4}/gi;//这是一个正则表达式对象，可以检索4个连续的数字while(res=myReg.exec(content)){//res是检索出来的结果，但是一个结果就对应一个数组//res[0]就是找到的对应的文本window.alert("找到："+res[0]);}}</script>  </head>    <body>    <textarea id="content" rows="10" cols="20"></textarea>    <input type="button" value="测试" onclick="test1()"/>  </body></html>

正则表达式两种创建方法：

var regExp =/正则表达式/gim【隐式创建】
var regExp = newregExp(“正在表达式”,”gim”);【显式创建】
[注意，显式创建时正则表达式是一个字符串，要注意转义！！！]
g代表global（全局匹配），i代表ignoreCase（忽略大小写）,m表示多行模式，考虑换行。

常用RegExp对象的方法：

exec():检索字符串中指定的值，并返回值（找不到返回null）
test():用于检测一个字串是否匹配某个模式，返回true或false

支持正则表达式的String对象的方法：

match() 语法格式为：match（regexp）,与RegExp对象的exec方法类似，它使用正则表达式模式对字符串执行搜索，并返回一个包含搜索结果的数组。
案例：

//match方法function test2(){var con=content.value;var myreg=/abc/gi;res = con.match(myreg);for(var i=0;i<res.length;i++){window.alert(i+" "+res[0]);}}

search() 语法格式为：search（reExp），它返回使用正则表达式搜索时，第一个匹配的字符串在整个被搜索的字符串中的位置。

案例：

//search 方法var str="Visit W3School!";window.alert(str.search(/W3School/));

replace() 语法格式为：replace（reExp，replaceText），使用正则表达式模式对字符串执行搜索，并对搜索到的内容用指定的字符替换，返回值为包含替换后的内容的字符串对象。

案例：

//replace方法function test3(){var con = content.value;//把四个数字，换成：这里原来是四个数var newContent = con.replace(/(\d){4}/gi,"这里原来是4个数！");//window.alert(newContent);content.value = newContent;}

split() 把字符串分割为字符串数组，用法split（“按什么字符分割”），也可以用split（regExp）；

RegExp对象的属性：

如下案例：

//index,leftContext,rightContextfunction test4() {var con = content.value;var myReg = /(\d){4}/gi;while (res = myReg.exec(con)) {window.alert("index:" + RegExp.index+" left:"+RegExp.leftContext+" right:"+RegExp.rightContext);}}

运行结果：

正则表达式的语法---子表达式、捕获、反向引用

如果你认为正则表达式只能检索固定的字符串或是连续的几个数字，那你就太小看正则表达式了，请看下面的问题：

第一个题目代码：

function test5(){var con = content.value;var myReg = /(\d)(\d)\2\1/gi;//解释：while (res = myReg.exec(con)) {window.alert(res[0]);}}

解释：

运行结果：

再看一个例子：

找类似aabbccdd这样的数：

function test6(){var con = content.value;//找类似aabbccdd这样的数var myReg = /(\d)\1(\d)\2(\d)\3(\d)\4/gi;while (res = myReg.exec(con)) {window.alert(res[0]);}}

继续例题：

方法：

function test7(){var con = content.value;//12321-333999111var myReg = /(\d){5}-(\d)\2\2(\d)\3\3(\d)\4\4/gi;while (res = myReg.exec(con)) {window.alert(res[0]);}}

正则表达式的语法---元字符

如果想要灵活运用正则表达式，必须了解其中各种元字符的功能，元字符从功能上大致分为：

限定符
选择匹配符
分组组合和反向引用符
特殊字符
字符匹配符
定位符

限定符
用于指定其前面的字符和组合连续出现多少次
{n}说明：n表示出现的次数，比如a{3},1{4}，(\d){2}，但是要注意一点，
1{3}去匹配1111111的话，会得到什么结果呢？
        答案：会得到两个结果，111和111，每次匹配都是从上次匹配之后的最后一个字符下标处接下去开始的！
{n,m}说明：{n,m}表示至少出现的n次最多m次，比如a{3,4}，1{4,5}，(\d){2,5}，我们看一下1{3,4}去匹配1111111的话，会得到什么结果呢？
           答案：应该是1111和111。这里面有一个原则：javascript在匹配的时候使用的是贪婪原则，尽可能先匹配多的，能匹配4个，就不匹配3个。
+说明：+表示出现1次到任意多次，比如/a+/gi，/1+/gi，/(\d)+/gi，我们看看用/1+/gi去匹配1111111的话，会得到什么结果呢？
           答案：贪婪原则，当然是1111111啦。
*说明:*号代表出现0次到任意多次，比如/a*/gi，/1*/gi，/(\d)*/gi。我们看看/a1*/去匹配a111的话，会得到什么结果呢？
           答案：a111
？说明：？号表示出现0次到1次
如果用/a1?/gi去匹配a111的话，会得到什么结果?
           答案：得到a1

字符匹配符
[a-z]说明：[a-z]表示可以匹配a-z中任意一个字符，比如/[a-z]/gi，/[a-z]{2}/gi。我们看看/[A-Z]/gi去匹配a11c8会得到什么结果呢？
           答案：会得到a和c
如果用/[a-z]*/gi去匹配abcd,则得到abcd(*号贪婪原则)
[1-9]、[0-9]等与此类似!
[^a-z]说明：[^a-z]表示可以匹配不是a-z中的任意一个字符。那么用/[^a-z]/gi去匹配a118c会得到什么结果？
           答案：会得到1、1和8。
           [^A-Z]和[^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刚好相反
.匹配除\n之外的所有字符，如果要匹配本身，则需要使用\.

转义符\
需要用到转义符号的字符有以下：
. * + ( ) $ / \ ? [ ] ^ { }

定位符
定位符用于规定要匹配的字符串出现的位置，比如在字符串的开始还是结束的位置，这个也是相当有用，必须掌握！

^符号说明：匹配目标字符串的开始位置。
           比如/^ge/gi，去匹配“ge junqiang ge ge”，我们看看会得到什么结果？
           答案：得到ge,这个ge是最开头的那个ge
$符号说明：匹配目标字符串的结束位置
           比如/ge$/gi，去匹配“ge junqiang ge ge”，我们看看会得到什么结果？
           答案：得到ge,这个ge是最后面的那个ge，如果最后面不是ge，则不会得到任何结果。
\b符号说明：匹配目标字符串的边界。
           比如/han\b/gi去匹配“hanshunping sphan nnhan”，我们会匹配到“hanshunping sphan nnhan”,所以这里说的字符串的边界指的是字符串间有空格，或者是目标字符串的结束位置，特别注意没有目标字符串的开始位置。
\B符号说明：匹配目标字符串的非边界。

这个和\b的含义刚刚相反，比如/han\B/gi去匹配“hanshunping sphan nnhan”，我们会匹配到“hanshunping sphan nnhan”。

5.选择匹配符

有时候，我们在匹配某个字符串的时候是选择性的，即：既可以匹配这个，又可以匹配那个，这时候需要用到选择匹配符|

比如，用/ge|哥|葛/gi,去匹配”gejun葛”，会得到什么样的结果呢？

答案：得到ge和葛

实际应用案例：

判断输入的电子邮件地址是否合法!

1.只能有一个@符号

2.@前面是用户名，可以是a-z A-Z 0-9_-字符

3.@后面是域名

//验证输入的字符串是不是一个电子邮件function test9(){var con = content.value;//@符号无须转义var myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|org|net)$/i;if(myReg.test(con)){window.alert("是电子邮件地址！");}else{window.alert("不是电子邮件地址");}}

0 0