JavaScript正则表达式轻松入门

邵奈一

已于 2022-04-15 10:59:29 修改

阅读量486

点赞数

分类专栏：前端全栈工程师文章标签： js 前端正则表达式

于 2019-01-31 10:46:21 首次发布

本文链接：https://blog.csdn.net/shaock2018/article/details/86711428

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

全栈工程师

9 篇文章 2 订阅

订阅专栏

教程目录

0x00 教程内容
0x01 概括
- - - - 1. 概念
      - 2. 为什么要学习正则表达式
0x02 正则表达式的创建方式
0x03 正则表达式模式
0x04 实用例子
- - - - 1. 入门例子与详解
0xFF 总结

0x00 教程内容

概括
正则表达式的创建方式
正则表达式模式
实用例子

0x01 概括

1. 概念

a. 官方解释：
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。

b. 白话解释：
拿来匹配文本的，可更方便地用来搜索或者替换。

2. 为什么要学习正则表达式

a. 下面的对比例子可看出，正则表达式非常方便
需求：找出定义的字符串里面的数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			//定义所需要搜索的字符串
			var str = 'wechat:shaonaiyi888,520777';
			//方法1、不使用正则表达式
			function findNum(str) {
				var tmp = '',
					arr = [];
				for(var i = 0; i < str.length; i++) {
					var current = str[i];
					if(!isNaN(current)) {
						tmp += current;
					} else {
						if(tmp) {
							arr.push(tmp);
							tmp = '';
						}
					}
				}
				if(tmp) {
					arr.push(tmp)
				}
				return arr;
			}
			console.log("不使用正则表达式：" + findNum(str))
			//"不使用正则表达式：888,520777"
			//方法2、使用正则表达式
			var reg = /\d+/g;
			console.log("使用正则表达式：" + str.match(reg))
			//"使用正则表达式：888,520777"
		</script>
	</head>
	<body>
		邵奈一的CSDN技术博客:https://blog.csdn.net/shaock2018
	</body>
</html>

0x02 正则表达式的创建方式

语法：
/正则表达式/修饰符(可选)
修饰符：

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

1. 字面量创建方式

a. 格式：var reg = /正则表达式主体/修饰符
b. 实例：

var reg = /\d+/g;

2. 实例创建方式

a. 格式：var reg = new RegExp(正则表达式,修饰符);
b. 实例：

var reg = new RegExp('\\d');

3. 两种创建方式的区别

a. 实例创建方式可进行字符串拼接，字面量创建方式则不行

var regParam = 'ny';
var reg1 = new RegExp(regParam+'1');
var reg2 = /regParam/;
console.log(reg1);  //   /ny1/
console.log(reg2);  //  /regParam/

b. 实例创建方式特殊含义的字符需要转义，字面量创建方式不需要转义

var reg1 = new RegExp('\d');  //    /d/ 
var reg2 = new RegExp('\\d')  //   	/\d/
var reg3 = /\d/;              // 	/\d/

0x03 正则表达式模式

1. 表达式

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

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以

2. 元字符

a. 元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

3. 量词

a. 量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

4. 分组符

分组符	描述
()	提取匹配的字符串。表达式中有几个()就有几个相应的匹配字符串。
[]	匹配的字符范围。比如 [a-zA-Z0-9] 表示相应位置的字符要匹配英文字符和数字。[\s]表示空格或者号。
{}	一般用来表示匹配的长度，比如 \s{3} 表示匹配三个空格，\s[1,3]表示匹配一到三个空格。

0x04 实用例子

1. 入门例子与详解

var str1 = 'Hi,hi,hi shaonaiyi,Hello';
//g:修饰符，表示全局匹配;\b是一个元字符，代表单词边界，匹配单词的开头和结尾。
//1、实例创建方式：
var reg1 = new RegExp("\\bhi\\b", "g"); 
//2、字面量创建法:
reg2 = /\bhi\b/gi;
console.log(str1.match(reg1)); //"hi,hi"
console.log(str1.match(reg2)); //"Hi,hi,hi"
//匹配shenzhen，并匹配后面的shaonaiyi
var str2 = /\bshenzhen\b.*\bshaonaiyi\b/;
var welcome = 'I love shenzhen,shaonaiyi!!';
console.log(welcome.match(str2));//"shenzhen,shaonaiyi"