1）正则的创建
2）正则的匹配方法
3）元字符
4）字符集合
5）边界
6）分组
7）反向引用
8）数量词汇
9）匹配模式
目标
- 理解正则中的基础知识
- 理解正则中的各种概念
- 会使用正则查找替换字符
- 能使用正则在实际中运用
字符串操作：
- 查找字符串中的数字；
- 正则如何实现；
正则的创建：
- 字面量创建
- 通过构造函数
正则的匹配方法：
1.字符串方法
- match
- search
- replace
- split
2.正则对象下的方法
- test
- exec
元字符：
- 正则表达式中有特殊含义的非bs字母字符；
字符类别（Character Classes）
- . （点）
- 匹配行结束符（\n \r \u2028 或 \u2029）以外的任意单个字符
- 在
字符集合（Character Sets）中，. 将失去其特殊含义，表示的是原始值
- \ （划线）
- 转义符，它有两层含义
- 表示下一个具有特殊含义的字符为字面值
- 表示下一个字符具有特殊含义（转义后的结果是元字符内约定的）
- 表示下一个具有特殊含义的字符为字面值
- 转义符，它有两层含义
- \d 匹配任意一个阿拉伯数字的字符
- \D 匹配任意一个非阿拉伯数字的字符
- \w 匹配任意一个（字母、数字、下划线）的字符
- \W 匹配任意一个非（字母、数字、下划线）的字符
- \s 匹配一个空白符，包括空格、制表符、换页符、换行符和其他 Unicode 空格
- \S 匹配一个非空白符
字符集合：
[xyz]
- 一个字符集合，也叫字符组。匹配集合中的任意一个字符。你可以使用连字符’-'指定一个范围
[xyz]是一个反义或补充字符集，也叫反义字符组。也就是说，它匹配任意不在括号内的字符。你也可以通过使用连字符 ‘-’ 指定一个范围内的字符
边界：
- ^
- 匹配输入开始。如果多行（multiline）标志被设为 true，该字符也会匹配一个断行（line break）符后的开始处
- $
- 匹配输入结尾。如果多行（multiline）标志被设为 true，该字符也会匹配一个断行（line break）符的前的结尾处
- \b
- 匹配一个零宽单词边界（zero-width word boundary）
- \B
- 匹配一个非零宽单词边界（zero-width word boundary）
分组：
-
(子项)
- 可以使用 () 对表达式进行分组，类似数学中分组，也称为子项
- 索引分组
- 命名分组
- (?…)
- groups属性
- 捕获匹配
- 具有捕获（capturing）特性，即会把匹配结果保存到（子项结果）中
- (x)
- 非捕获匹配
- 不具有捕获（capturing）特性，即不会把匹配结果保存到（子项结果）中
- (?:x)
- 零宽断言/预查（Assertions）
- 用于指定查找在某些内容(但并不包括这些内容)之前或之后的内容
- 正向零宽断言/预查
- 肯定
- (?=pattern)
- 否定
- (?!pattern)
- 肯定
- 负向零宽断言/预查（注意：ES2018新增）
- 肯定
- (?<=pattern)
- 否定
- (?<!patten)
- 肯定
- 捕获与零宽断言的区别
- 捕获：匹配的内容出现在结果中但不出现在子项结果中
- 零宽断言：完全不会出现在结果
反向引用：
- \n
- 这里的 n 表示的是一个变量，值为一个数字，指向正则表达式中第 n 个括号（从左开始数）中匹配的子字符串
数量词汇：
- x{n}
- n 是一个正整数。前面的模式 x 连续出现 n 次时匹配
- x{n,m}
- n 和 m 为正整数。前面的模式 x 连续出现至少 n 次，至多 m 次时匹配
- x{n,}
- n 是一个正整数。前面的模式 x 连续出现至少 n 次时匹配
- x*
- 匹配前面的模式 x 0 或多次
- x+
- 匹配前面的模式 x 1 或多次。等价于 {1,}
- x?
- 匹配前面的模式 x 0 或 1 次
- x|y
- 匹配 x 或 y
匹配模式：
-
g
- global，全局模式：找到所有匹配，而不是在第一个匹配后停止
-
i
- ignore，忽略大小写模式：匹配不区分大小写
-
m
- multiple，多行模式：将开始和结束字符（^和$）视为在多行上工作，而不只是匹配整个输入字符串的最开始和最末尾处
-
s
- dotAll / singleline模式：. 可以匹配换行符
-
u
-
unicode，unicode模式：匹配unicode字符集
console.log(/^.$/.test("\uD842\uDFB7")); console.log(/^.$/u.test("\uD842\uDFB7"));
-
-
y
- sticky，粘性模式：匹配正则中lastIndex属性指定位置的字符，并且如果没有匹配也不尝试从任何后续的索引中进行匹配
-
正则工具 http://regexper.com
1-为什么学习正则
<script>
// 1.查找；2.替换；3.验证；4分割；
let str = "afdsa234fda231dfsa111fdsaf444";
// 目标 ---> [234,231,111,444]
// function getNumber(str){
// let arr = [];
// let temp = "";
// for(let i=0;i<str.length;i++){
// if(!isNaN(str[i])){
// // 数字
// temp += str[i];
// }else{
// if(temp!=="")
// arr.push(parseInt( temp ));
// temp = "";
// }
// }
// if(temp!=="")
// arr.push(parseInt( temp ));
// return arr;
// }
// console.log(getNumber(str));
let reg = /\d+/g;
let arr = str.match(reg);
console.log(arr);
</script>
2-正则创建
<script>
// 1.字面量创建
// let str = "abc1231dfaf123213fda";
// // let reg = /\d+/g;
// // let abc = "1231"
// let reg = /abc/g;
// let res = str.match(reg);
// console.log(res);
// 2.构造函数创建
let str = "abc1231dfaf123213fda";
// let reg = new RegExp("\\d+","g");
let abc = "1231";
let reg = new RegExp(abc,"g");
let res = str.match(reg);
console.log(res);
</script>
3-正则方法
<script>
//一、 正则对象底下方法；1.test 2.exec;
// let str = "abc123fda123";
// // let reg = /\d+/g;
// let reg = /efg/g;
// console.log( reg.test(str) );
// let str = "abc123fda1234";
// let reg = /\d+/g;
// console.log( reg.exec(str) )
// console.log(reg.lastIndex);
// console.log( reg.exec(str) )
// console.log( reg.exec(str) )
// 字符串方法；1.split 2.search; 3.match;4.replace;
// let str = "abc123fda1234rt";
// // let arr = str.split(1);
// let arr = str.split(/\d+/);
// console.log(arr);
// let str = "abcdefghiejk";
// // let reg = /e/g;
// let reg = /z/;
// console.log( str.search(reg) );
// let str = "abc11defghiej222k";
// let reg = /\d+/g;
// console.log( str.match(reg) );
let str = "abc11defghiej222k";
let reg = /\d/g;
// console.log( str.replace(reg,"*") );
let res = str.replace(reg,function(arg){
console.log(arg)
return "*"
})
console.log(res);
</script>
4-元字符-字符相关
<script>
// 元字符：有特殊函数非字母字符；
/*
1.字符相关；
2.数量相关；
3.位置相关；
4.括号相关；
*/
// 1.字符相关；
// \w \W \d \D \s \S .
// \w :数字、字母、下划线；
// let str = "~123fdfs";
// let reg = /\w+/g;
// console.log( reg.test(str));
// \W ：非数字、字母、下划线；
// let str = "123fdfs";
// let reg = /\W+/g;
// console.log( reg.test(str));
// \s :匹配空格；
// let str = "abcfdsadfs";
// // let reg = /\s+/g;
// let reg = /\S+/g;
// console.log( reg.test(str));
// . : 非 \n \r \u2028 \u2029;
// let str = "\r";
let str = `afb`
let reg = /a.b/;
console.log( reg.test(str));
</script>
5-数量相关
<script>
// 数量相关：
// {} ? + *;
// let str = "abceeeeeeeeeeeffd";
// // let reg = /ce{3}f/g;
// // let reg = /ce{1,4}f/g;
// // let reg = /ce{1,}f/g
// console.log( reg.test(str) );
// ? --> {0,1} + ---> {1,} * ---> {0,};
// let str = "my name is lilei";
// let reg = /my\s+name/g;
// console.log( reg.test(str));
let str = "123456789";
// let reg = /\d{2,4}/g; //贪婪匹配
let reg = /\d{2,4}?/g; // 惰性匹配；
let res = str.match(reg);
console.log(res)
</script>
6-位置相关
<script>
// 位置相关；
// ^ $ \b \B;
// let str = "abedef";
// let reg =/^\w/g;
// let res = str.replace(reg,"*");
// console.log(res);
// let str = "abedef";
// let reg =/\w$/g;
// let res = str.replace(reg,"*");
// console.log(res);
// \b ：边界符；
// 边界： 非\w 的 都是边界；
// let str = "this is a book";
// let reg = /\bis\b/g;
// let res = str.match(reg);
// console.log(res);
// \B 非边界；
let str = "this is a book";
let reg = /\B\w{2}\b/g;
let res = str.match(reg);
console.log(res);
</script>
7-括号相关
<script>
// () [] {};
// ():分组；
// let str = "abababfdsafds";
// let reg = /(ab){3}/g;
// console.log(reg.test(str));
// 提取值；
// let str = "2020-01-02";
// let reg = /(\d{4})-(\d{2})-(\d{2})/;
// // console.log( );
// str.match(reg)
// console.log(RegExp.$1)
// console.log(RegExp.$2)
// console.log(RegExp.$3)
// 替换；
// let str = "2020-01-02"; // 01/02/2020
// let reg = /(\d{4})-(\d{2})-(\d{2})/;
// // let res = str.replace(reg,"$2/$3/$1");
// let res = str.replace(reg,function(arg,year,mouth,date){
// return mouth +"/" + date + "/" +year;
// });
// console.log(res)
// 反向引用；
// let className = "news-container-nav"; //news_container_nav
// let reg = /\w{4}(-|_)\w{9}(\1)\w{3}/;
// let res = reg.test(className);
// console.log(res);
// []:字符集合；
// let str = "My name is LiL1ei";
// // let reg = /Li[Ll]ei/g;
// // [a-z] [A-Z]; [a-Z]
// // let reg = /[0-9]/g;
// // console.log( reg.test(str));
// let reg = /[^0-9]/g;
// console.log( reg.test(str));
// \d [0-9]; \w [a-zA-Z0-9_];
</script>
8-匹配模式
<script>
// 匹配模式
// g i m s u y;
// g：全局匹配；
// let str = "abc123fdaf123fdasf";
// let reg = /\d+/g;
// let res = str.match(reg);
// console.log(res);
// i
// let str = "abcABc";
// let reg = /ABC/gi;
// console.log( reg.test(str));
// m ：多行模式；
// let str = `abc
// efg
// hij`;
// let reg = /^\w/gm;
// let res = str.replace(reg,"*");
// console.log(res);
// s : 让"."；
// let str = `abc
// efg`;
// let reg = /^a.*g$/gs;
// console.log( reg.test(str));
// u:匹配unicode编码；
// let str = "a";
// let reg = /\u{61}/gu;
// console.log(reg.test(str));
// y:粘性模式；
let str = "12345fdafdsa4324";
let reg = /\d/gy;
console.log( reg.exec(str));
console.log( reg.exec(str));
console.log( reg.exec(str));
console.log( reg.exec(str));
console.log( reg.exec(str));
console.log( reg.exec(str));
</script>
9-命名分组及零宽断言
<script>
// 命名分组；
// let str = "2020-01-06";
// let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
// console.log( str.match(reg));
// 零宽断言；
// 正向零宽断言；
// let str = "iphone3iphone4iphone5iphonenumber";
// // 肯定
// // let reg = /iphone(?=\d)/g;
// // 否定
// let reg = /iphone(?!\d)/g;
// let res = str.replace(reg,"苹果");
// console.log(res);
// 负向零宽断言；
let str = '10px20px30pxipx';
// 肯定
// let reg = /(?<=\d+)px/g;
// 否定
let reg = /(?<!\d+)px/g;
let res = str.replace(reg,"像素");
console.log(res);
</script>
.
2641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
