js_day27--正则表达式

最新推荐文章于 2022-03-08 17:24:40 发布

KLeonard

最新推荐文章于 2022-03-08 17:24:40 发布

阅读量1.8k

点赞数 1

文章标签： html javascript js 正则表达式

本文链接：https://blog.csdn.net/gavin_john/article/details/21964811

版权

☛Web前端同时被 2 个专栏收录

38 篇文章 3 订阅

订阅专栏

------ JavaScript

21 篇文章 0 订阅

订阅专栏

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="测试" οnclick="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,rightContext
	function 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-333999111
		var 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("不是电子邮件地址");
		}
	}

KLeonard

关注

1
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
js_day27--正则表达式

Day27Javascript正则表达式（RegExp）任务：明确学习正则表达式的重要性初步了解正则表达式是什么能做简单的正则表达式的开发为什么要学习正则表达式？问题：给你一个字符串（或一篇文章），请你找出所有四个数字连在一起的字串，并且这个字串满足第一位
复制链接

扫一扫

专栏目录