正则表达式

adorable_yzy

于 2023-05-03 15:48:35 发布

阅读量83

点赞数 1

分类专栏： javascript++ 文章标签：正则表达式 javascript 前端

本文链接：https://blog.csdn.net/adorable_yzy/article/details/130472935

版权

javascript++ 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

在JS中，正则可以理解为单独处理字符串的一门语言。

一、转义

1.1 基础

转义符号
转义字符 \字符

var str=”啦啦啦”浏览”啦啦啦”;      // 报错
//JS对字符串和变量实现进行语法解释，再进行变量输出，所以报错。
var str=”啦啦啦\”浏览\”啦啦啦”;      // ”啦啦啦”浏览”啦啦啦”

\n 换行

	Windows   \r\n

	mac            \r

	linux           \n

\t 制表符 t是table的缩写实际上相当于按了tab键，相当于4个空格。

1.2 str换行

字符串换行之后报错，WHY？JS默认是不允许字符串多行的。
在这里插入图片描述
上面的代码报错
修正方法一：字符串拼接
修正方法二：利用转义，将每一行后面的换行转义为空格

二、正则

2.1 正则基础

RegExp regular expression
用途：检测用户输入、替换数据中的某些字符串、替换模板
代码如下（示例）：

2.1.1 声明

（1）实例化一个正则对象

<script type="text/javascript">
	//实例化一个正则对象：        
	var reg = new RegExp(),
            str = 'test';
  	console.log(reg.test(str));   //true

	//字符串片段  大小写默认敏感          连续
	new RegExp(‘Test’, ‘i’)      //忽略大小写
</script>

（2）字面量的方式声明正则
//g i m 是修饰符，也叫正则属性。

var reg=/test/；
var reg=/Test/gi； //不区分大小写以及全局匹配
var reg=/Test/gim； //不区分大小写以及全局匹配，多行匹配

若正则表达式为变量时，则无法使用字面量的方式来创建。
在这里插入图片描述
（3）new RegExp与字面量
当new RegExp的时候，又重新创建了一个正则对象，所以和字面量的不相同；
当不用new的时候，就是拿的对象的引用，因此和字面量的正则相同。

2.1.2 表达式

[ ] 代表一位能匹配的可选字符

var reg=/[wx][xy][z]/,
	str=’wxyz’;
console.log(str.match(reg));     //xyz

2.2 元字符

正则使用的转义字符

\w === [0-9A-z_]
\W === [^\w]

\d === [0-9]
\D === [^\d]

\s === [\r\n\t\v\f] \v 垂直换行 \f 换页符
\S === [^\s]

\b 单词边界
\B 非单词边界

. 可以匹配除了回车和换行的所有字符

匹配全部字符： [\w\W]或[\s\S]或[\d\D]

2.3 正则量词

在这里插入图片描述
正则匹配默认原则：
//不回头：匹配过的不会再进行匹配
//贪婪模式：匹配尽可能多的，能匹配上多个，绝不匹配少个。
//字符串从左到右，依次先匹配多，再匹配少，如果一旦匹配上就不回头匹配。

//注意：打印结果有8项，空的也匹配了一次
var reg=/\d*/g,
str=’abcdefg’；
console.log(str.match(reg));   
//(8) [””, ””, ””, ””, ””, ””, ””, ””]

var reg=/\w?/g,
str=’abcdefg’；
console.log(str.match(reg));   
//(8) [”a”, ”b”, ”c”, ”d”, ”e”, ”f”, ”g”, ””]

var reg=/\w{1, 2}/g,
str=’abcdefg’；
console.log(str.match(reg));   
//null   {1, 2}  1和2中间有个空格

var reg=/\w{1,2}/g,
str=’abcdefg’；
console.log(str.match(reg));   
//(4) [”ab”, ”cd”, ”ef”, ”g”]

2.4 特别字符

^n 匹配任何以n开头的字符串
n$ 匹配任何以n结尾的字符串
?=n 匹配任何其后紧接着指定字符串n的字符串
在这里插入图片描述
重要例子：

//检查字符串是否以abcd开头和以abcd结尾
var reg=/^abcd[\s\S]*abcd$/g,   
//或者var reg=/^abcd.*abcd$/g,

str=’abcd123123abcd’；
console.log(str.match(reg));     
//[”abcd123123abcd”]

//检查字符串是否以abcd开头或以abcd结尾
var reg=/^abcd|abcd$/g, 

//检查字符串是否以abcd开头和以abcd结尾，并且开头结尾之间是数字
var reg=/^abcd\d+abcd$/g, 

//匹配以138开头的11位手机号码
var reg=/^138\d{8}/g, 

var reg=/a(?=b)/g,
str=’abcdabcda’;
console.log(str.match(reg));     //[”a”, ”a”]

2.5 子表达式与反向引用

var str=’bbaaaaccaaaaiddddbaaaa’,
	reg=/(a)\1\1\1/g;     
//(a)为子表达式     \1表示反向引用第一个子表达式 

	reg=/(\w)\1(\w)\2/g;   
//匹配xxyy型

2.6 正则方法

（1）exec() 执行
在这里插入图片描述

（2）lastIndex属性：

可以设置lastIndex：

当设置的不是刚好时，会自动调整

当有子表达式时，exec会把有反向引用的子表达式打印到类数组中。

三、正向预查、贪婪与非贪婪模式、replace方法

3.1 正向预查

判断一个字符后面带有或者不带有啥，或者一个字符串包含什么

var str=’1231231231’,
reg=/1(?=2)/g;
或者reg=/1(?!2)/g;

3.2 贪婪与非贪婪模式

//贪婪模式变为非贪婪模式 *?

var str=’abcd{{edf}}sdf{{xyz}}’,
	reg=/{{.*?}}/g;
//[”{{edf}}”, ”{{xyz}}”]

如果是非贪婪模式

var str = 'abcd{{edf}}sdf{{xyz}}',
	reg = /{{.*}}/g;
console.log(str.match(reg));
//  打印结果是： ['{{edf}}sdf{{xyz}}']

3.3 replace

replace没有全局匹配的能力

var str=’JSplusplus’;
var str1=str.replace(’plus’, ‘+’);      
//str1为“JS+plus”

加上全局匹配

var str=’JSplusplus’,
	reg=/plus/g;
var str1=str.replace(reg, ‘+’);      
//str1为“JS++”

$代表当前被匹配出的字符串 $1代表第一个子表达式，$2代表第二个子表达式。
在这里插入图片描述
打印结果：
aabb a b
ccdd c d

不一定非要用$符号，如下方式也能出结果：
在这里插入图片描述
下面返回会报错，因为系统把返回的当成了变量

解决报错：正常打印：bbaaddcc

3.4 例子

在这里插入图片描述

a $b$ c$
在这里插入图片描述

abc*
在这里插入图片描述

/B是非单词边界
在这里插入图片描述

后往前走找三位 ——正向预查
在这里插入图片描述
str1为：“10，000，000，000，000，000”

双大括号替换值
在这里插入图片描述
{{name}} name
{{age}} age
或者以下这种：

四、综合实例

（1）密码验证
多个包含就可以用正向预查
在这里插入图片描述
（2）正整数或者负整数
/^-?\d+$/

（3）捕获分组
在这里插入图片描述
[“abc”, “a”, “b”, “c”]
加上问号和冒号可以，不让他捕获该子表达式

[”abc”, “b”, “c”]

五、用正则进行模板替换的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box"></div>
    <script type="text/html" id="tpl">
        <h1>{{title}}</h1>
        <p>{{content}}</p>
    </script>
    <script type="text/javascript">
        //模板替换
        var oBox = document.getElementsByClassName('box')[0];
        var tpl = document.getElementById('tpl').innerHTML;

        var res = tpl.replace(/{{(.*?)}}/g, function(node, key) {
            return {
                title: '我是一个测试标题',
                content: '我是一个测试内容'
            }[key];
        });

        oBox.innerHTML = res;
    </script>
</body>

</html>