前端知识体系学习(正则表达式)

最新推荐文章于 2021-11-12 11:08:37 发布

no的征程

最新推荐文章于 2021-11-12 11:08:37 发布

阅读量177

点赞数

分类专栏：前端知识体系

本文链接：https://blog.csdn.net/qq_39773416/article/details/103402555

版权

前端知识体系专栏收录该内容

7 篇文章 1 订阅

订阅专栏

正则表达式

正则表达式的结构

var expression = / pattern / flags

pattern 就表示要写的表达式
flags 就表示标志，下面就是flags的几个用法
g：表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止；
i ：表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
m：表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。

正则表达式的方式

// 使用直接字面量创建,正则表达式都必须使用放在//里面
var exp1 = /(^\s+)|(\s+$)/g;
// 使用RegExp对象创建，转义的符号哟啊使用双\\
var exp2 = new RegExp('(^\\s+)|(\\s+$)', 'g');

然后所有元字符都需要用 \ 转义，如下面的 . 一点

var exp = /\.docx/gi

元字符

( [ { \ ^ $ | ) ? * + .] }

但是再new RegExp 里面的的参数都是字符串，所以某一写字符需要双重转义如：

// 对 \. 再次转义
var exp = new RegExp('\\.docx', 'gi');
 
//匹配 \n
var exp1 = /\\n/g; //对\n中的\转义
var exp2 = new RegExp('\\\\n', 'g'); // 对 \\n 再次转义

匹配所有内容 [\s\S] [\d\D]

其他的一些字符

let str = 'salfbdb,sadasf1111..你好呀'

console.log(str.match(/\p{L}/gu));   // \p{L} 代表匹配每一个字母，一定要加u模式
console.log(str.match(/\p{P}/gu));   // \p{L} 代表匹配特殊字符
console.log(str.match(/\p{sc=Han}/gu));   // p{sc=Han}代表匹配每一个汉语
// u模式下，使用 /[str]/u  匹配宽字节的字符

( ) [ ] { } 原子表的使用与区别，在这些原子表字符中，如 . - 等等字符转义后有其他

() 的作用是提取匹配的字符串。表达式中有几个()就会得到几个相应的匹配字符串。比如 (\s+) 表示连续空格的字符串。
[] 是定义匹配的字符范围。比如 [a-zA-Z0-9] 表示字符文本要匹配英文字符和数字。一个[ ] 只能匹配一个
{} 一般用来表示匹配的长度，比如 \d{3} 表示匹配三个数字，\d{1,3} 表示匹配1~3个数字，\d{3,}
表示匹配3个以上数字。

^ 和 $ 的使用

^ 匹配一个字符串的开头，比如 (^a) 就是匹配以字母a开头的字符串
$ 匹配一个字符串的结尾,比如 (b$) 就是匹配以字母b结尾的字符串
^ 还有另个一个作用就是取反，再[ ]中使用就是取反，比如[^xyz] 表示匹配的字符串不包含xyz

let a = '长啊后:123-465,零零零零:9-999'
console.log(a.match(/[^\d:\-,]+/g));  // 排除数字，：，-

\d \s \w . 的使用

\d 匹配一个非负整数，等价于 [0-9]
\s 匹配一个空白字符，空格
\w 匹配一个英文字母或数字，等价于[0-9a-zA-Z]
\W 大写，除了字母数字下划线
. 匹配除换行符以外的任意字符，等价于[^\n]

* + ?的使用

表示匹配前面元素0次或多次，比如 (\s*) 就是匹配0个或多个空格

表示匹配前面元素1次或多次，比如 (\d+) 就是匹配由至少1个整数组成的字符串

? 表示匹配前面元素0次或1次，相当于{0,1} ，比如(\w?) 就是匹配最多由1个字母或数字组成的字符串

$1 与 \1 的使用

$1到$9 存放着正则表达式中最近的9个正则表达式的提取的结果，这些结果按照子匹配的出现顺序依次排列。基本语法是：RegExp.$n ，这些属性是静态的，除了replace中的第二个参数可以省略 RegExp 之外，其他地方使用都要加上 RegExp，具体什么意思呢，看代码

//使用RegExp访问
/(\d+)-(\d+)-(\d+)/.test('2016-03-26') 
//下面安装顺序提取匹配到的值
RegExp.$1  // 2016
RegExp.$2  // 03
RegExp.$3  // 26
 
//在replace中使用，看它的第二给个参数，没有带RegExp
'2016-03-26'.replace(/(\d+)-(\d+)-(\d+)/, '$1年$2月$3日') 
// 2016年03月26日

lastIndex的使用

// lastIndex 代表当前匹配的位置，可进行设置这个位置
let ad = 'wwwwwwqqq'
let reg = /\w/g    // 一定要设置全局搜索，不然lastIndex就只会为0

console.log(reg.lastIndex);
console.log(reg.exec(ad));
console.log(reg.lastIndex);
console.log(reg.exec(ad));
//使用while 记录每一次匹配的内容
while ((res = reg.exec(ad))){
  console.log(res);
}

y模式的使用

let str = '放：10086,9999,99992222'

// 当内容比较大的时候使用y模式，使用g模式的时候，如果匹配不成功就会跳过 ,使用y模式就不会跳过，匹配到不成功的时候就会返回null

let reg = /(\d+),?/y
reg.lastIndex = 2
// console.log(reg.exec(str));
// console.log(reg.exec(str));

while((res = reg.exec(str))) console.log(res);  // 这样的话就能拿到高效率匹配到想要拿到的内容

禁止贪婪

// 禁止贪婪  如下他会倾向于 少的部分，就是2个 
console.log(a.match(/\d{2,100}?/));

// 什么时候用呢，比如我们匹配有换行的时候，我们设置禁止贪婪就会匹配完一行就不会继续匹配

\1 到 \9的使用，就是拿到前面第几个原子表里面的内容，并且会要求和前面匹配到的内容一样

\1 表示后向引用，是指在正则表达式中，从左往右数，第1个( )中的内容，以此类推，\2表示第2个( )，
\0表示整个表达式。

如代码

//匹配日期格式，表达式中的\1代表前面的（），重复(\-|\/|.)
var rgx = /\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}/;
			a=rgx.test("2019.10.12") //true
			b=rgx.test("2019/10/12") //true
			c=rgx.test("2019-10-12") //true
			d=rgx.test("2019-10/12") //false 说明匹配到的字符必须与前面一致

两者的区别是：\n 只能用在表达式中，而 $n 只能用在表达式之外的地方。

test 与 match

前面的大都是JS正则表达式的语法，而test则是用来检测字符串是否匹配某一个正则表达式，如果匹配就会返回true,反之则返回false

/\d+/.test('123') ; // true
 
/\d+/.test('abc') ; // false
match是获取正则匹配到的结果，以数组的形式返回

'186a619b28'.match(/\d+/g); // ['186', '619','28']

$KaTeX parse error: Expected 'EOF', got '&' at position 1: &̲ %$ ` $ ’ 的使用

//  $& $` $ ' 的使用
let aa = '=傻逼='

console.log(aa.replace(/傻逼/,'$&'));  // $& 代表匹配到的内容
console.log(aa.replace(/傻逼/,'$`'));  // $& 代表匹配到的内容,并且复制匹配到的内容的前面并替换当前内容
console.log(aa.replace(/傻逼/,"$'"));  // $& 代表匹配到的内容,并且复制匹配到的内容的后面并替换当前内容

// 把aa变成 ===傻逼===
console.log(aa.replace(/傻逼/,"$`$`$&$'$'"));

断言的使用

let les = 
`
js,800元,300次
php,200.00元,300次
node,300元,300次
`

let reg = /(\d+)(.00)?(?=元)/gi    // ?=元是判断，如果有元字的就可以进行匹配，可以通过  $& 拿到匹配的内容

  les = les.replace(reg,(v,...args)=>{
    // console.log(v);  // 匹配到的内容
    // console.log(args);
    args[1] = args[1] ||'.00'
  
    console.log(args.splice(0,2).join(""));
  })


    // args是一个数组，使用args.splice(0,2) 能够截断这个数组，只拿序号前面的两位，然后使用join可以把数组内的内容拼接在一起
    // [
    //   '800',
    //   '.00',
    //   4,
    //   '\njs,800元,300次\nphp,200.00元,300次\nnode,300元,300次\n'
    // ]
    // [
    //   '200',
    //   '.00',
    //   18,
    //   '\njs,800元,300次\nphp,200.00元,300次\nnode,300元,300次\n'
    // ]
    // [
    //   '300',
    //   '.00',
    //   36,
    //   '\njs,800元,300次\nphp,200.00元,300次\nnode,300元,300次\n'
    // ]

判断前面的断言的使用

    let str = "href='https://baidu.com'"
    let reg = /(?<=href=(['])).+(?=\1)/gi   //  ?<= 匹配判断前面的内容是否是  ?<= 是判断后面的
    console.log(reg.exec(str));

replace方法

一般用法

			var a="2019-10-12"
			b=a.replace(a,'aabb') //替代掉a
			console.log(b)  //aabb

replace 本身是JavaScript字符串对象的一个方法，它允许接收两个参数：
参数1：可以是一个普通的字符串或是一个正则表达式
如果第1个参数是 RegExp，JS会先提取RegExp匹配出的结果，然后用第2个参数逐一替换匹配出的结果

var a="2019-10-12"
			b=a.replace(/(\d+)-(\d+)-(\d+)/,'$1年$2月$3日')
			console.log(b)  //2019年10月12日

参数2：可以是一个普通的字符串或是一个回调函数
如果第2个参数是回调函数，每匹配到一个结果就回调一次，每次回调都会传递以下参数：
result: 本次匹配到的结果
$1,…$9: 正则表达式中有几个()，就会传递几个参数，$1~$9分别代表本次匹配中每个()提取的结果，最多9个
offset: 记录本次匹配的开始位置
source: 接受匹配的原始字符串
如代码

String.prototype.trim = function(){
				this.replace(/(^\s+)|(\s+$)/g,function(re,$1,$2,offset,source){
					console.log(arguments)
				})
			};
			' abcd '.trim();

结果由于是 | 的关系，因此这个表达式最多会match到两个结果集，然后执行两次替换在这里插入图片描述

正则表达式扩展

一、获取url里面的参数和值

function getUrlParamObj(){
	var obj = {};
	var params = window.location.search.substr(1);
	params.replace(/([^&=]+)=([^&=]*)/gi,function(rs,$1,$2){
		obj[$1] = decodeURIComponent($2);
	});
	return obj;
}
a=getUrlParamObj();
console.log(a)

二、扩展typeof，匹配传进去的数据类型

function getDataType(obj){
	let ret = Object.prototype.toString.call(obj); //执行toString方法，并且返回[object 类型]这样的东西
	ret = ret.replace(/\[object\s(\w+)\]/,"$1"); /$1只能放在引号里面
	console.log(ret.toLowerCase()) 
};
getDataType(1);
getDataType("aa");
getDataType(null)
getDataType([])

三、再具体某位置插入新字符串
代码

String.prototype.insetAt= function(str, offset){
	offset = offset+ 1;  //由于数组从0开始，然后为了计算从第几个字符开始插入，所以加1
	var regx = new RegExp("(^.{"+offset+"})");
	var a= this.replace(regx,"$1"+str); 
	console.log(a)
}
'abcd'.insetAt('xyz',2) //abcxyzd

四、加密电话号码

function telFormat(tel){
	tel= String(tel)
	方式1
	var a = tel.replace(/(\d{3})(\d{4})(\d{4})/,function(rs,$1,$2,$3){
		return $1+'****'+$3
	})
	console.log(a)
	//方式2
	var a = tel.replace(/(\d{3})(\d{4})(\d{4})/,'$1....$3')
	console.log(a)
}
telFormat(12345678910)

五、配合字符串方法search() 查找某个字符子啊字符串的位置

no的征程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端知识体系学习(正则表达式)

正则表达式正则表达式的结构var expression = / pattern / flagspattern 就表示要写的表达式flags 就表示标志，下面就是flags的几个用法g：表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止；i ：表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；...
复制链接

扫一扫