正则表达式

文章目录

正则表达式

1.正则表达式趣味

javascript 复制代码
var  hd = "tiantianxuexi2020qianduan2021"
console.log(hd);

现在需要只取出数字部分

javascript 复制代码
var  hd = "tiantianxuexi2020qianduan2021"
	console.log(hd);
	var hd1=[...hd].filter(a=>!Number.isNaN(parseInt(a)));
	console.log(hd1.join(""));
	

filter 过滤

a=>为方法简写

方法解析

首先parseInt(a) 解析这个a传入的参数是否为数值,是正常返回,不是返回NaN

然后使用Number类下的isNaN进行判断,是返回true,不是返回false;

filter()方法会创建一个新数组,原数组的每个元素传入回调函数中,回调函数中有return返回值,若返回值为true,这个元素保存到新数组中;若返回值为false,则该元素不保存到新数组中;原数组不发生改变。

所以我们需要取出数字部分,数字部分在此为false,因此我们需要取反进行。

然后最后通过join进行连接在一起,如不使用,返回的是一个数组

正则表达式取值

javascript 复制代码
 var  hd = "tiantianxuexi2020qianduan2021"
	console.log(hd);
console.log(hd.match(/\d/g).join(""));

结果相同

2.正则表达式入门

正则表达式书写位置

/这里面书写正则表达式/

举一个栗子

/\d/g 其中 \d就是正则表达式 代表着数字数值 g代表全局查找

部分一

test()方法

test方法作用是判断是否字符串里是否包括某些字符串

格式

正则表达式.test(字符串);

举一个栗子

javascript 复制代码
var str ="ourstudyjavascript.com"

console.log(/o/.test(str));

结果返回true;

判断o是否在str这个字符串里面

以上会有一个问题

它不能将变量包括在内进行判断

javascript 复制代码
var str ="ourstudyjavascript.com";
var str2 ="o";
console.log(/str2/.test(str));    //结果返回false

但是这样也可以用另一种方法进行解决

eval()方法

eavl方法它可以将字符串转换为代码运行

javascript 复制代码
var str ="ourstudyjavascript.com"

var str2 ="o";
console.log(eval(`/${str2}/`).test(str));  //结果返回true
部分二

使用对象创建正则表达式

new RegExp();

创建RegExp()对象的语法

new RegExp(pattern,attributes);

参数 作用
pattern 书写正则表达式
attributes 书写参数,g w i 等正则表达式的查找方式
javascript 复制代码
var str ="ourstudyjavascript.com"

var str2 =new RegExp("a","g");		//通过全局查找方式,查找a,在此a不必要写成/a/

console.log(str2.test(str));		//结果返回true

同样,这个对象也可以查找变量

javascript 复制代码
var str ="ourstudyjavascript.com"
var st ="u";
var str2 =new RegExp(st,"g");	

console.log(str2.test(str));	//结果返回ture

举个小栗子

要求根据用户输入结果来改变字符串的颜色变化

回顾代替replace函数

javascript 复制代码
var hd="abc";
	var av=hd.replace(/\w/g,"@");	//当然,第二个参数可以书写方法
	console.log(av)				//记过返回@@@三个@@@

/\w/g代表全局查找字母数字下划线

html 复制代码
<div class="abc">
		studyjavascript.com
	</div>
javascript 复制代码
var user=prompt("请输入查找的内容,支持正则");
var con =new RegExp(user,"g");
var div =document.querySelector("div"); 
div.innerHTML=div.innerHTML.replace(con,search=>{
	return `<span style="color:red">${search}</span>`;	//`是Tab上的票
});

查找a

查找字母下划线

部分三(字符转换符号&|)
javascript 复制代码
var str ="studyjavascript.com"

	console.log(/a|@/.test(str));

判断是否包含a或者@

电话号检测

javascript 复制代码
var tel ="010-9999999";

console.log(/(010|020)\-\d{7,8}/.test(tel));

其中(010|020)是为了保证两侧都有检测

\d{7,8} 表示随机数字7-8位

javascript 复制代码
   \-转义为普通的字符。
原子表或者原字符

\[\] 原子表 相当于或 123456 相当于1或2或3或4...

javascript 复制代码
var tel =/[123456]/;
var t="3";
console.log(t.match(tel));  //这个时候就是匹配全部的123456了   结果返回索引

() 原子符 相当于与

javascript 复制代码
var tel =/(123|456)/;
var t="3211214";
console.log(t.match(tel));  //返回null

表示匹配123 或者456 这两个整体。

边位符
^ $
表示必须以此为开头的匹配 表示必须以此为结尾的匹配
javascript 复制代码
var hd ="woaixuejavascript 2020";
	var hs ="2020 woaixuejavascript";
	console.log(hd.match(/\d+/));  //正常匹配数字     
	console.log(hs.match(/^\d+/));	//匹配开头为数字的字符
	console.log(hd.match(/\d+$/));	//匹配结尾为数字的字符

其中+代表匹配多个 和/g全局查找一个效果

数值和空白字符

数字既是/\d/用来匹配字符

javascript 复制代码
var hd ="张三:010-33333333,李四:020-55555555";

	//获取电话号码
	 console.log(hd.match(/\d+-\d{7,8}/g));

	//获取特定字符,使用原子表----匹配原子表内的元素
	 console.log(hd.match(/[:\d-,]/g)); 
	
	//获取特定字符,除原子表内的元素
	console.log(hd.match(/[^:\d,]/g));
	
javascript 复制代码
	var hd =`
	张三:010-33333333,李四:020-55555555
	`;
	//判断是否有空  \s
	console.log(/\s/.test(hd));

	// 判断是否有空
	var hs ="\nwoaixuejava";
	console.log(/\s/.test(hs));

	var hh ="";
	//判断除了空还有其他元素么
	console.log(/\S/.test(hh));
\w 与 \W

\w字符指的是匹配字母数字下划线

javascript 复制代码
	var hd ="abc@123_";

	console.log(hd.match(/\w/g));

/W是匹配除了字母数字下划线

javascript 复制代码
	var hd ="abc@123_";

	console.log(hd.match(/\W/g));	

匹配email小栗子

javascript 复制代码
	var email ="1582183834@qq.com";

	console.log(email.match(/\w+@\w+\.\w+/));

匹配用户名 (以字母开头,右数字字母下划线组成)

javascript 复制代码
	var input = prompt("请输入用户名");
	console.log(input);
	var hs=/^[a~z]\w{5,9}$/i;
	console.log(hs.test(input));
点元字符的使用 .

/./ 元字符匹配表示除了换行符以外全部匹配

javascript 复制代码
var hd ="woaixuejavascript_1da@#954&*)";

	console.log(hd.match(/.+/)); 

现在使用模板匹配

javascript 复制代码
var hd =`
	woaixuejava.com
	`;
	console.log(hd.match(/./g));

注意 + 和全局变量g有区别

例如上面的例子使用+和g的区别

+:

g:

/s单行模式,使之为一行

javascript 复制代码
var hd =`
	woaixuejava.com
	javascript
	`;
	console.log(hd.match(/.+/)[0]);
javascript 复制代码
var hd =`
woaixuejava.com
	javascript
	`;
console.log(hd.match(/.+/s)[0]);

效果就是将多行的元素放在一行 然后打印后还原

因为.元字符不能匹配换行符,当匹配后遇到换行符时,将会结束,所以需要将其换成一行,这样就可以取得第一个元素了

匹配网址

javascript 复制代码
//匹配网址
	var url ="http://www.15821838384qq.com";

	console.log(url.match(/^https?:\/\/www\.\w+\.\w+/));
匹配全部字符

原子表匹配字符

\\d\\D \d 表示匹配所有数字,\D表示匹配除数字以外的数字

另外还有\s\S 空格

\\w\\W等等

javascript 复制代码
var hd =`
	<span>
	javascript
	web
	</span>
	`;
	console.log(hd.match(/<span>[\d\D]+<\/span>/))
多行匹配m
javascript 复制代码
//多行匹配
var hd=`
#1 javas,6000元 #
#42 web,6000元 #
#444 js,8000元 # 正则表示
#432 node,7000元 #
`;
console.log(hd.match(/\s+#\d+\s+.+\s+#\s/g));

第三行不符合规则,所以我们不需要他,因此我们进一步去除

javascript 复制代码
hd.match(/^\s+#\d+\s+.+\s+#$/gm)

多行匹配一行一行进行测试

javascript 复制代码
var less=hd.match(/^\s+#\d+\s+.+\s+#$/gm).map(v=>{
	var v=v.replace(/\s+#\d+\s+/,"").replace(/\s+#/,"");
	[name,price]=v.split(",");
	return [name,price];
})
console.log(less);
汉字与字符属性 /u
javascript 复制代码
//汉字与字符属性 
	//
	var  hd ="woaixuejs,2020.!";
//获取字符
console.log(hd.match(/\p{L}/ug));  
//获取标点符号
console.log(hd.match(/\p{P}/ug));
lastIndex属性 (不会)
javascript 复制代码
var hd = "woaixuejava";
var reg =/\w/g;
// console.log(hd.match(/\w/));
// console.log(/\w/g.lastIndex);
console.log(reg.exec(hd));
console.log("===================");
while((res=reg.exec(hd))){
	console.log(res);
}
有效y使用

y使用方法是联合lastIndex配合使用。

javascript 复制代码
	
	var hd="欢迎拨打以下电话: 111111,222222,333333,拨打电话可获得vip课程会员";
	//根据lastindex获取电话号码 ,不需要使用g全局查找,使用y有效连续查询即可
	 
	// var reg =/\d{6}/g;
	// console.log(hd.match(reg));

	var regg=/\d+,?/y;
	var sa=[];

	regg.lastIndex=10;
	// console.log(hd.match(regg));
	while((reg=regg.exec(hd))){
		console.log(reg);
		sa.push(reg[0]);
	}
	console.log(sa);
原子表的基本使用
javascript 复制代码
var hd ="2021-02-03";
//匹配查出日期
console.log(hd.match(/\d+-\d+-\d+/));

有时候日期格式也为

2021/02/03 这样格式也是正确的,为此

javascript 复制代码
var hd ="2021-02-03";
//匹配查出日期
console.log(hd.match(/\d+-\d+-\d+/));

var hd1="2021/02/03";
console.log(hd1.match(/\d+[-\/]\d+[-\/]\d+/));
console.log(hd.match(/\d+[-\/]\d+[-\/]\d+/));

a,b原子表的意思是为当匹配a或者b都为ture;

当然也可能会出现2021-02/03这种情况,这显然是不符合标准的,为此

javascript 复制代码
console.log(hd.match(/\d+([-\/])\d+\1\d+/));

可以使间隔符号与前面保持一致;格式(a,b) \1 与前面括号内保持一致;

原子表区间的特性
html 复制代码
<input type="text" name="usename">
javascript 复制代码
var usename=document.querySelector(`[name="usename"]`); //获取名字为usename的标签
usename.addEventListener("keyup",function(){  			//添加键盘抬起事件
	console.log(this.value.match(/^[a-z]\w{5,7}$/g));	//用户名6~8位
});
原子表排除匹配
javascript 复制代码
//排除匹配

var hd ="woaixuejavascript";

console.log(hd.match(/[iu]/g));   //全局查找iu这两个字符

//排除^ ,除了iu
console.log(hd.match(/[^iu]/g));	//全局查找除了iu的其他字符

小栗子

javascript 复制代码
var hd="张三:010-123456,李四:020-123456";
	console.log(hd.match(/[^:,\d-]+/g));
原子表注意

() .+ 在原子表内的()表示普通的括号,.和+也是普通的标点字符,

()在原子表外表示原子组。在原子表外需要转义

正则操作DOM元素

删除body中的h标签

javascript 复制代码
var body = document.body;

var  reg =/<(h[1-6])>.+<\/\1>/gi;
body.innerHTML=body.innerHTML.replace(reg,"");

但是h3并没有删除

javascript 复制代码
var body = document.body;

var  reg =/<(h[1-6])>.*<\/\1>/gi;
body.innerHTML=body.innerHTML.replace(reg,"");

将+换成*就可以将

删除

这是因为*代表0个或者多个

值得注意的是,当

html 复制代码
<h1>
	java
	</h1>

这样时, 正则中的.就失去了作用,因此可以用

javascript 复制代码
var body = document.body;

var  reg =/<(h[1-6])>[\s\S]*<\/\1>/gi;
body.innerHTML=body.innerHTML.replace(reg,"");

或者\D\d都可以

mail案例测试
html 复制代码
  <input type="text" name="mail">
javascript 复制代码
//mail
var mail =document.querySelector("[name='mail']");
mail.addEventListener("keyup",function(){
	var hd =mail.value;
	//1582183834@qq.com
	//1582183834@span.qq.com
	// var reg = /^\w+@\w+\.\w+$/i;   // 满足一
	var reg =/^\w+@(\w+\.)+\w+$/;	 //满足条件二
	console.log(hd.match(reg));
});

原子组在mail中的使用

原子组引用完成替换

操作要求,将标签替换成

标签

javascript 复制代码
//原子组的替换使用

var hd=`
	<h1>javas</h1>
	<span>web</span>
	<h2>webspring</h2>
`;

var reg =/<(h[1-6])>([\s\S]+)<\/\1>/ig;
console.log(hd.match(reg));
// hd.replace(reg,"<p>$2</p>");
console.log(hd.replace(reg,"<p>$2</p>"));

替换参数

hd.replace(reg,(p0,p1,p2,p3)=>{})

参数 实质
p0 ## javas
p1 h1
p2 javas
javascript 复制代码
var reg =/<(h[1-6])>([\s\S]+)<\/\1>/gi;
var hs =hd.replace(reg,(p0,p1,p2)=>{
	return `<p>${p2}</p>`;
});
console.log(hs);
嵌套分组和不记录分组
嵌套分组
javascript 复制代码
var hd="https://www.xianzhe.com";

var reg=/https?:\/\/\w+\.\w+\.(com|org|cn)/;
console.log(hd.match(reg));

将www.xianzhe.com网址部分取出

javascript 复制代码
var hd="https://www.xianzhe.com";

var reg=/https?:\/\/(\w+\.\w+\.(com|org|cn))/;
console.log(hd.match(reg));

如果不想让com加入,那么这就要使它进行不记录分组

?:

javascript 复制代码
var reg=/https?:\/\/(\w+\.\w+\.(?:com|org|cn))/;
console.log(hd.match(reg));

举一个小栗子

javascript 复制代码
var hd="http://www.xuejava.com https://xueweb.com www.xuewenwang.com";

var reg=/((?:\w+\.)?\w+\.(?:com|cn|org))/gi;
console.log(hd.match(reg));
javascript 复制代码
var hd="http://www.xuejava.com https://xueweb.com https://www.xuewenwang.com";

var reg=/https?:\/\/((?:\w+\.)?\w+\.(?:com|cn|org))/gi;
var h=[];
while((res=reg.exec(hd))){
	h.push(res[1]);
}
console.log(h);

正则表达式应用

用户名验证
html 复制代码
<input type="text" name="usename">
javascript 复制代码
document.querySelector("[name='usename']").addEventListener("keyup",function(){
	var value =this.value;
	var reg =/^[a-z]\w{5,8}$/ig;
	console.log(reg.test(value));
})
密码验证
javascript 复制代码
document.querySelector("[name='password']").addEventListener("keyup",(e)=>{
	var regs=[/^[a-z]\w{4,7}$/i,/[A-Z]/,/[0-9]/];
	var pss=e.target.value;
	var s=regs.every(e=>e.test(pss));
	console.log(s);
})

多密码验证,必须是字母开头,必须有大写字母,必须有数字组成

获取value新方法 e.target.value;

every(function());

every方法必须满足数组内的所有条件才为true;否者全为false;

every更多介绍→https://www.runoob.com/jsref/jsref-every.html

禁止贪婪
javascript 复制代码
var hd ="hdddd";
var reg =/hd+/;
console.log(hd.match(reg));

当开始匹配时,+会趋向于最大化,例如在上述+的例子,+表示一个或者多个,它默认贪婪,所以会匹配出后面所有的d

为此我们可以使它禁止贪婪

javascript 复制代码
var hd ="hdddd";
var reg =/hd+?/;
console.log(hd.match(reg));

除此之外还有+*?等多种可以使用

符号 作用
+ 表示多个
* 表示1个或多个
? 表示0个或一个
禁止贪婪应用

将<span标签换成h标签,并将颜色改为红色

html 复制代码
	<main>
		<span>woaixuejava.com</span>
		<span>woaixuescript.com</span>
		<span>woaixueweb.com</span>
	</main>
javascript 复制代码
var main =document.querySelector("main");
var reg = /<span>([\S\s]+?)<\/span>/gi;
main.innerHTML=main.innerHTML.replace(reg,(v,p1)=>{
	return `<h4 style="color:red;">${p1}</h4>`;
});
console.log(main.innerHTML);

main.innerHTML=main.innerHTML.replace(...) 中中的main.innerHTML=main...很重要

打印标签内容
html 复制代码
	<main>
		<h1>woaixuejava.com</h1>
		<h2>woaixuescript.com</h2>
		<h1>woaixueweb.com</h1>
	</main>

打印出woaixuejava.comwoaixuescript.com 和woaixueweb.com

javascript 复制代码
var main =document.querySelector("main");
var reg =/<(h[1-6])>([\s\S]+?)<\/\1>/gi;
var s=main.innerHTML.match(reg);
var shu=[];
for(var i=0;i<=s.length-1;i++){
	var target=s[i].replace(/<(h[1-6])>/,"").replace(/<\/(h[1-6])>/,"");
	shu.push(target);	
}
 console.log(shu);
matchAll

高版本浏览器使用,低版本使用不了

在matchAll属于迭代器,需要进行遍历输出才能获取内容

javascript 复制代码
for(var iterator of hd){
    console.log(iterator)
}

搜索方法

字符串的方法在,支持正则表达式

javascript 复制代码
var hd ="woaixuejavas";
hd.search("o");
//hd.search(/o/gi);
split

拆分方法

字符串的方法,支持正则

javascript 复制代码
var hd ="2021-02-06";
hd.split("-");
//hd.split(/[\/-]/); 无论分隔符是-还是/都是可以拆分的
$在正则表达式中的应用

将一下电话号码格式替换为010-00000000格式

javascript 复制代码
var hd ="(010)99999999 (020)88888888";

var reg=/\((\d{3,4})\)(\d{7,8})/g;

console.log(hd.replace(reg,"$1-$2"));

1代表第一个原子组,2代表弟二个原子组

$& 代表内容本身

javascript 复制代码
var hd="%java=";
reg=/java/g;
console.log(hd.replace(reg,"$&"));

$` 内容前一个

javascript 复制代码
var hd="%java=";
	reg=/java/g;
	console.log(hd.replace(reg,"$`"));

!

$' 内容后一个

javascript 复制代码
var hd="%java=";
reg=/java/g;
console.log(hd.replace(reg,"$'"));

将目标成%%%java===

javascript 复制代码
var hd="%java=";
reg=/java/g;
console.log(hd.replace(reg,"$`$`$&$'$'"));

为百度加上超链接

javascript 复制代码
var main =document.querySelector("main");
main.innerHTML=main.innerHTML.replace(/百度/,"<a href='www.baidu.com'>$&</a>");

为超链接加上http中的s,并且没有www加上www,并且第三超链接不变

html 复制代码
<main>
	<a style="color:red;" href="http://www.baidu.com">百度</a>
	<a href="http://hello.com">你好</a>
	<a href="http://www.puter.com">皮套</a>
	<h5>wwww...</h5>
</main>
javascript 复制代码
var main=document.querySelector("main");
var reg =/(<a.*href=")(http)(:\/\/)(\w+\.)?(baidu|hello)/g;
main.innerHTML=main.innerHTML.replace(reg,(v,...args)=>{
	console.log(args);
	args[1]+="s";
	args[3]=args[3]|| "www.";
	// console.log(args.splice(0,5));
	return args.splice(0,5).join("");
});
断言匹配

?=

相当于条件语句,以为后面为。。。的

在下面我们只想找啊前面的这个你好。所以我们的目的就是要找到后面为啊的这个你好

javascript 复制代码
var hd ="你好呀还是你好啊更有礼貌!"
var reg=/你好(?=啊)/g

举一个例子

百度是一个非常有用的网址,百度旗下有很多有用的内容。

我们需要为后面为旗下的百度加上百度的超链接。

javascript 复制代码
var main =document.querySelector("main");
var reg=/百度(?=旗下)/g;
main.innerHTML=main.innerHTML.replace(reg,"<a href='www.baidu.com'>$&</a>");

?<=

意味前面为某某的什么

百度是一个非常有用的网址,12345百度旗下有很多有用的内容。

javascript 复制代码
   var main =document.querySelector("main");
var reg=/(?<=\d)百度/g;
main.innerHTML=main.innerHTML.replace(reg,"<a href='www.baidu.com'>$&</a>");

查询

?!后面不为。。的某元素

javascript 复制代码
var reg =/百度(?!旗下)/g;

百度后面不是旗下的将会被选中。

?<!前面不为...的某元素

javascript 复制代码
var reg =/(?<!\d)百度/g;

百度前面不是数字的百度将会被选中。

模糊电话号码查询

后四位数用*号代替

javascript 复制代码
var hd=`
 张三: 12345678910,
 里斯: 15566677780
`;

var reg =/(?<=\d{7})\d+/g;
var h=hd.replace(reg,()=>{
	return "*".repeat(4);
});
console.log(h);

限制用户名关键词,不能包含"外挂"这两个字

html 复制代码
<main>
	<input type="text" name="username">	
</main>
javascript 复制代码
var username =document.querySelector("[name='username']");
username.addEventListener("keyup",(e)=>{
	var value=e.target.value;
	var reg=/^(?!.*外挂.*).*?\d{2,4}$/g;
	var hd=value.match(reg);
	console.log(hd);
});

使用断言排除选择

html 复制代码
<main>
	<a href="https://orc.woaixuejava.com">1</a>
	<a href="https://oss.woaixueweb.com">2</a>
	<a href="https://sins.woaixuejava.com">3</a>
	<a href="https://woaixuejava.com">4</a>
</main>
javascript 复制代码
	var data=document.querySelector("main");
	var reg =/https:\/\/(\w+)?(?<!oss)\..+?(?=")/gi;
	data.innerHTML.replace(reg,(v)=>{
		console.log(v);
	});

其他替换就可以

=/(?<=\d)百度/g;

main.innerHTML=main.innerHTML.replace(reg,"$&");

复制代码
查询

?!后面不为。。的某元素



~~~javascript
var reg =/百度(?!旗下)/g;

百度后面不是旗下的将会被选中。

?<!前面不为...的某元素

javascript 复制代码
var reg =/(?<!\d)百度/g;

百度前面不是数字的百度将会被选中。

模糊电话号码查询

后四位数用*号代替

javascript 复制代码
var hd=`
 张三: 12345678910,
 里斯: 15566677780
`;

var reg =/(?<=\d{7})\d+/g;
var h=hd.replace(reg,()=>{
	return "*".repeat(4);
});
console.log(h);

限制用户名关键词,不能包含"外挂"这两个字

html 复制代码
<main>
	<input type="text" name="username">	
</main>
javascript 复制代码
var username =document.querySelector("[name='username']");
username.addEventListener("keyup",(e)=>{
	var value=e.target.value;
	var reg=/^(?!.*外挂.*).*?\d{2,4}$/g;
	var hd=value.match(reg);
	console.log(hd);
});

使用断言排除选择

html 复制代码
<main>
	<a href="https://orc.woaixuejava.com">1</a>
	<a href="https://oss.woaixueweb.com">2</a>
	<a href="https://sins.woaixuejava.com">3</a>
	<a href="https://woaixuejava.com">4</a>
</main>
javascript 复制代码
	var data=document.querySelector("main");
	var reg =/https:\/\/(\w+)?(?<!oss)\..+?(?=")/gi;
	data.innerHTML.replace(reg,(v)=>{
		console.log(v);
	});

其他替换就可以

相关推荐
Patrick在香港9 小时前
Python正则表达式实战:解析和验证香港身份证、车牌、电话格式
开发语言·python·正则表达式
吴声子夜歌2 天前
正则指引——Ruby
开发语言·正则表达式·ruby
吴声子夜歌2 天前
正则指引——Golang
开发语言·golang·正则表达式
吴声子夜歌3 天前
正则指引——PHP
开发语言·正则表达式·php
吴声子夜歌5 天前
正则指引——断言
正则表达式
吴声子夜歌5 天前
正则指引——匹配原理
java·正则表达式
吴声子夜歌7 天前
正则表达式——环视
开发语言·正则表达式
吴声子夜歌7 天前
正则表达式——边界
正则表达式
营养充电站7 天前
C++23 新特性在 CLion 中的实战体验
macos·docker·jupyter·正则表达式