正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

正则表达式是什么?有什么用?

  • 正则表达式是由一个字符序列形成的搜索模式。
  • 当你想要在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容。
  • 正则表达式可以是一个减的字符也可以是一个更复杂的模式。
  • 正则表达式可用于所有文本搜索和文本替换的的操作。

语法格式大致如下

/正则表达式主体/修饰符(根据情况选择用不用)

下面是正则表达式修饰符表

修饰符描述
i执行对大小写不明感的匹配
g执行全局匹配,
查找所有匹配而非在找到第一个匹配后停止。
m执行多行匹配

括号的用法

表达式描述
[abc]查找方括号之间的任何字符
[0-9]查找任何从0至9的数字
(red|a|yl)查找任何以|分隔的选项
查找任何指定的选项
[^abc]查找任何不在括号之间的字符
[a-z]查找任何从小写a到小写z的字符
[A-Z] 查找任何从大写A到大写z的字符
[A-z] 查找任何从小写A到小写z的字符
[sah]查找给定集合内的任何字符
[^scj]查找给定集合外的任何字符

元字符是拥有特殊含义的字符

元字符描述
.(点)查找单个字符,除了换行和行结束符
\d查找数字
\D查找非数字字符
\s查找空白字符
\S查找非空白字符
\b匹配单词边界
\B匹配非单词边界
\0查找NULL字符
\n查找换行符
\f查找换页符
\r查找回车符
\t查找制表符
\v查找垂直制表符
\w查找单词字符
\W查找非单词字符
\xxx查找以八进制数xxx规定的字符
\xdd查找以十六进制数dd规定的字符
\uxxxx查找以十六进制数xxxx规定的Unicode字符

量词

量词描述
n+匹配任何包含至少一个n的字符串
n*匹配任何包含零个或多个n的字符串
n?匹配任何包含零个或一个n的字符串
n{X}匹配包含X个n的序列的字符串。比如:
/a{2}/不匹配“candy”中的“a”,但是匹配“canady”中的两个a,匹配“caaanaaaadaay”中前两个“a”
n{X,}X是一个正整数,前面的模式n连续出现只是X次时匹配
比如:/a{2,}/不匹配“candy”中的“a”,但是匹配“caaansssdy”中所有的“a”
n{X,Y}X和Y为正整数,前面的模式n连续出现至少X次,至多Y次时匹配
比如,/a{1,3}/ 不匹配 "cndy",匹配 "candy," 中的 "a","caandy," 中的两个 "a",匹配 "caaaaaaandy" 中的前面三个 "a"。注意,当匹配 "caaaaaaandy" 时,即使原始字符串拥有更多的 "a",匹配项也是 "aaa"。
n$匹配任何结尾为n的字符串
^n匹配任何开头为n的字符串
?=n匹配任何其后紧接指定字符串n的字符串
?!n匹配任何其后没有紧接指定字符串n的字符串

使用字符串的方法

JavaScript中,正则表达式通常用于两个字符串方法:search()和replace()

search()方法用于检索字符串中指定的子字符串或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
replace()方法用于在字符串中用一些字符替换另一些字符或替换一个与正则表达式匹配的子串。

具体实例如下

(1)search()方法使用正则表达式,实例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<p>检索字符串“out”,并显示匹配的起始位置</p>
		<button onclick="searching()">点击这里开始检索,并返回值</button>
		<p id="yl"></p>
		<script type="text/javascript">
			function searching(){
				var str = "we like to carry Out transactions at our own convenience";
                                //i为修饰符,在检索时不区分大小写
				var sea = str.search(/out/i);
				document.getElementById("yl").innerHTML = sea;
			}
		</script>
	</body>
</html>

运行结果如下

JavaScript正则表达式-技术中文网
JavaScript正则表达式-技术中文网

(2)search方法使用字符串,实例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<p>检索字符串“out”,并显示匹配的起始位置</p>
		<button onclick="searching()">点击这里开始检索,并返回值</button>
		<p id="yl"></p>
		<script type="text/javascript">
			function searching(){
				var str = "we like to carry out transactions at our own convenience";
				var sea = str.search("out");
				document.getElementById("yl").innerHTML = sea;
			}
		</script>
	</body>
</html>

运行结果如下

JavaScript正则表达式-技术中文网
JavaScript正则表达式-技术中文网

(3)replace()方法使用正则表达式,实例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<p>替换“at”为“like”</p>
		<button onclick="replace()">点击这里替换文本内容</button>
		<p id="yl">we like to carry out transactions at our own convenience</p>
		<script type="text/javascript">
			function replace(){
				var str = document.getElementById("yl").innerHTML;
				var rep = str.replace(/at/i, "like");
				document.getElementById("yl").innerHTML = rep;
			}
		</script>
	</body>
</html>

运行结果如下

JavaScript正则表达式-技术中文网
JavaScript正则表达式-技术中文网

(4)replace()方法使用字符串,实例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<p>替换“at”为“like”</p>
		<button onclick="replace()">点击这里替换文本内容</button>
		<p id="yl">we like to carry out transactions at our own convenience</p>
		<script type="text/javascript">
			function replace(){
				var str = document.getElementById("yl").innerHTML;
				var rep = str.replace("at", "like");
				document.getElementById("yl").innerHTML = rep;
			}
		</script>
	</body>
</html>

运行结果如下

JavaScript正则表达式-技术中文网
JavaScript正则表达式-技术中文网

使用RegExp对象

(1)使用test()方法

test()方法是一个正则表达式方法, test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。

下面我们用test()方法检索一下字符串中的字符“t”,实例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			var str = new RegExp("t");
			document.write(str.test("we like to carry out transactions at our own convenience"));
		</script>
	</body>
</html>

运行结果如下

JavaScript正则表达式-技术中文网

(2)使用exec()

exec()方法是一个正则表达式方法,exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

下面我们用exec()方法检索一下字符串中的字符“t”,实例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			var str = new RegExp("t");
			document.write(str.exec("we like to carry out transactions at our own convenience"));
		</script>
	</body>
</html>

运行结果如下

JavaScript正则表达式-技术中文网

下面我们写几个实例吧!

(1)JS判断输入字符串是否为数字、字母、下划线组成,实例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			function isValid(str){
				return /^\w+$/.test(str);
			}
			
			str = "123abd__"
			document.write(isValid(str));
			
			str2 = "$123abd__#"
			document.write("<br />" + isValid(str2));
		</script>
	</body>
</html>

运行结果如下

JavaScript正则表达式-技术中文网

(2)JS判断输入字符串是否全部为字母,实例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			str = "12895465asc"
			var isLetter = /^[a-zA-Z]+$/.test(str);
			document.write(isLetter + "<br />")
			
			str2 = "ashdbchjsbckbxschb"
			var isLetterTow = /^[a-zA-Z]+$/.test(str2);
			document.write(isLetterTow);
		</script>
	</body>
</html>

运行结果如下

JavaScript正则表达式-技术中文网

(3)JS判断输入字符串是否全部为数字,实例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			str = "12895465asc"
			var isLetter = /^\d+$/.test(str);
			document.write(isLetter + "<br />")
			
			str2 = "165465465"
			var isLetterTow = /^\d+$/.test(str2);
			document.write(isLetterTow);
		</script>
	</body>
</html>

运行结果如下

JavaScript正则表达式-技术中文网