文章目录
正则表达式
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 =`
javascript
web
`;
console.log(hd.match(/[\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
```
```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
$2 $2 ${p2}
java
```
这样时， 正则中的.就失去了作用，因此可以用
```javascript
var body = document.body;
var reg =/<(h[1-6])>[\s\S]*<\/\1>/gi;
body.innerHTML=body.innerHTML.replace(reg,"");
```
或者\\D\\d都可以
##### mail案例测试
```html
```
```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=`
javas
web
webspring
`;
var reg =/<(h[1-6])>([\s\S]+)<\/\1>/ig;
console.log(hd.match(reg));
// hd.replace(reg,"${p1}
`;
});
console.log(main.innerHTML);
```
main.innerHTML=main.innerHTML.replace(...) 中中的main.innerHTML=main...很重要
##### 打印标签内容
```html
woaixuejava.com
woaixuescript.com
woaixueweb.com
wwww...