本文介绍了JavaScript中的正则表达式，包括通过构造函数和字面量两种方式创建，模式修正符的使用，以及正则中的或、数量词、边界修饰符、单字修饰符、匹配和贪婪禁止等核心概念。此外，还探讨了正则在字符串操作中的应用，如test、split、match、search和replace方法。
12.正则表达式
正则表达式(regular[规则 expression[表达式])：
作用：用来对字符串进行增、删、改、查的操作
正则表达式创建方式：
- 构造函数创建：new RegExp
- 字面量创建：var reg = /ab/img;
12-1. new RegExp
语法：
var reg = new RegExp(规则,模式修正符);(1)模式修正符：
i 忽略大小写
m 换行也能匹配
g global 全局匹配
注意：模式修正符可以同时使用多个，且部分先后顺序
var reg1 = new RegExp('a');// 字符串中是否有a
var str1 = 'abcad';
var result = reg1.test(str1);//检查字符串str1中是否有a，true
reg1 = new RegExp('ab');// 是否有ab，并且ab是连续出现的
str1 = 'cdeabfg';
str2 = 'degacb123';
result = reg1.test(str1);// 检查str1字符串中是否有连续的小写ab==》true
console.log('result: ', result);
result = reg1.test(str2);
console.log('result: ', result);// 检查str2字符串中是否有连续小写ab==>false
reg = new RegExp('ab','i');// i ignore 忽略大小写,只要有ab就行，部分大小写
str1 = 'Abcdefg';
console.log(reg.test(str1));//true
12-2. 字面量创建正则
语法：
var reg = /规则/模式修正符;例如：
var reg = /ab/img;
var reg = /ab/i; // 字符串中是否有连续的ab子串，不区分大小写
var reg2 = /"ab"/i;// 字符串中是否有连续的 "ab"子串，不区分大小写
var str1 = 'des"ab"wer';
console.log(reg.test(str1));
console.log(reg2.test(str1));
var reg3 = new RegExp('ab', 'i');
console.log(reg3.test(str1));
12-3. 字面量创建和构造函数创建区别
规则中的变量：
字面量创建规则中不能解析变量
构造函数创建：规则中可以解析变量
转义符数量不同
- 字面量： 单杠转义
- 构造函数：双杠转义
// opacity:0.5; var str = 'filter:alpha(opacity=10)';// IE678; // 字面量方式 // var reg = /filter:alpha\(opacity=(\d+)\)/; // 构造函数模式： var reg = new RegExp('filter:alpha\\(opacity=(\\d+)\\)'); var result = str.match(reg); console.log(result);
var p = 'ab';
var reg = /p/; // 检测子传中是否有p字符，而不是p变量中存的 ab值
// 要求规则是 abc
var reg2 = new RegExp(p + 'c');// 规则是abc，p会当做变量解析
console.log(reg2.test('abc123')); // true
console.log(reg.test('abc123')); // false
12-4. 正则中的或
两种语法：
- |
- []
例如：规则是a 或 b 或 c
- (a|b|c)
- [abc]
- [a-c]
- [abc]：查找方括号内任意一个字符。
- [^abc]：查找不在方括号内的字符。
- [0-9]：查找从 0 至 9 范围内的数字，即查找数字。
- [a-z]：查找从小写 a 到小写 z 范围内的字符，即查找小写字母。
- [A-Z]：查找从大写 A 到大写 Z 范围内的字符，即查找大写字母。
- [A-z]：查找从大写 A 到小写 z 范围内的字符，即所有大小写的字母。
- [0-9A-z]：数字或字母[不分大小写]都可以
/**
* 需求：字符串中是否有 abc 或 aec 或 afc
*
*/
var reg = /(abc)|(aec)|(afc)/;// abc aec 或 afc
reg = /a(b|e|f)c/; // abc aec 或 afc
reg = /a[bef]c/; // abc 或 aec 或 afc []中的字符都是或的关系
var str = 'afc123';
console.log(reg.test(str));
/**
* 需求：只要是有字母就可以
* var reg = /[abcdefghijklmnopqrstuvwxyz]/
*/
var reg = /[a-z]/; // 只要有小写字母就可以
var str = '1123b234';
console.log(reg.test(str));
var reg = /[A-Z]/; // 只要有大写字母就可以
console.log(reg.test(str));
// 只要是字母就可以，不管是大写还是小写
var reg = /[a-zA-Z]/;
var reg = /[A-z]/; // 大小写字母都可以 A 65 a 97
console.log(reg.test(str));
// 只要是数字就可以
var reg = /[0-9]/;
// 只要是数字和字母就可以
var reg = /[0-9A-z]/;
// 只要是数字或字母或@符都可以
var reg = /[0-9A-z@]/;
var reg = /[^abc]/;
var str = 'aabcd';
console.log(reg.test(str));
var reg = /[^0-9]/; // 除了数字就可以 ==> 全是数字才是false，但凡有一个不是数字就是true
console.log(reg.test('1235433'));// false
console.log(reg.test('1235433@'));// true
var reg = /[^0-9A-z]/; // 除了字母和数字都可以
12-5. 正则相关方法
test:
split:
match:
search:
replace:
split
var str = "1a2b3c4d5e6f7";
/*
* split()
* - 可以将一个字符串拆分为一个数组
* - 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
* - 这个方法即使不指定全局匹配，也会全都拆分
*/
/*
* 根据任意字母来将字符串拆分
*/
var result = str.split(/[A-z]/);
console.log(result);
search
/*
* search()
* - 可以搜索字符串中是否含有指定内容
* - 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
* - 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
* - serach()只会查找第一个，即使设置全局匹配也没用
*/
str = "hello abc hello aec afc";
/*
* 搜索字符串中是否含有abc 或 aec 或 afc
*/
result = str.search(/a[bef]c/);
//console.log(result);
match[匹配]
/*
* match()
* - 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
* - 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
* 我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
* 可以为一个正则表达式设置多个匹配模式，且顺序无所谓
* - match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
* 如果没有符合规则的，返回null
*
*/
str = "1a2a3a4a5e6f7A8B9C";
result = str.match(/[a-z]/ig);
console.log(result[2]);
replace[替换]
增删改 test match 查
/*
* replace()
* - 可以将字符串中指定内容替换为新的内容
* - 参数：
* 1.被替换的内容，可以接受一个正则表达式作为参数
* 2.新的内容
* - 默认只会替换第一个
*/
str = "1a2a3a4a5e6f7A8B9C";
//result = str.replace(/[a-z]/gi , "@_@");
result = str.replace(/[a-z]/gi , "");
console.log(result);
// 增
/**
* item: 标识正则匹配到的当前字符
* index: 标识正则匹配到的当前字符对应的索引
*
*/
result = str.replace(/[a-z]/ig, function(item,index){
// 返回值就是替换的新内容
// 原值 + 新增加的值
return item + '@';
})
console.log(result);
12-6. 数量词
1. 通过量词可以设置一个内容出现的次数 2. 量词只对它前边的一个内容起作用 3. {n} 正好出现n次 4. {m,n} 出现m-n次 5. {m,} m次以上 6. + 至少一个，相当于{1,} 横竖都是一 所以是一次或一次以上 7. * 0个或多个，相当于{0,} 8. ? 0个或1个，相当于{0,1}
var reg = /a{3}/; aaa
var reg = /(ab){3}/; ababab
var reg = /b{3}/; bbb
var reg = /ab{1,3}c/; abc abbc abbbc
var reg = /ab{3,}c/; abbbbbbbbbbbc
var reg = /ab+c/; abc abbc abbbbbbbc
var reg = /ab*c/; ac abc abbbbc
var reg = /ab?c/; ac abc
12-7. 边界修饰符
- ^ 以…开始
- $ 以…结尾
eg:
‘^abc’ 匹配以abc开头
‘abc$’ 匹配以abc结尾
var phoneStr = "13067890123";
// ^ 1. 在[]中表示除了 [^abc]
// 2. 写在正则规则的最前面：表示开头
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));
// 需求：6位的密码 由 字母、数字、@_组成
var reg = /^[0-9A-z@_]{6}$/;
12-8. 单字修饰符
1. . 匹配任意字符，除了换行符 2. [] 用来表示一组字符,单独列出：[abc] 匹配 'a'，'b'或'c' 3. \d 匹配任意数字，等价于 [0-9]. 4. \D 匹配任意非数字 [^0-9] 5. \w 匹配字母数字及下划线 [A-z0-9_] 6. \W 匹配非字母数字及下划线 [^A-z0-9_] 7. \s 匹配任意空白字符，等价于 [\t\n\r\f] 8. \S 匹配任意非空字符 [^\t\n\r\f]
12-9. \b
英文单词匹配：
// \b 按照单词匹配 var className = "bg1 border2 wrapper" var reg = /\bborder2\b/; console.log(reg.test(className));
12-10. 贪婪禁止贪婪
贪婪模式：在整个表达式匹配成功的前提下，尽可能多的匹配 ( * )；
非贪婪模式：在整个表达式匹配成功的前提下，尽可能少的匹配 ( ? )；
/**
* 正则表达式也是默认贪婪的
*
* 贪婪模式：只要符合条件，尽可能匹配多的内容
*
* 禁止贪婪：?
* ? 有两层含义：
* 1. 数量词： 0 或 1个
* 2. 贪婪模式中，标识禁止贪婪： 尽可能匹配少的内容
*/
var str = '<div><div>1111ad</div><div>2222</div></div>';
// \正则中的转义字符
var reg = /<div>(.*)<\/div>/;
var result = str.match(reg);
console.log(result);
// 禁止贪婪模式
var reg2 = /<div>(.*?)<\/div>/;
var result2 = str.match(reg2);
console.log(result2);
12-11. 原子
完整匹配中的子匹配
// () 原子：完整匹配后，继续做子匹配，获得子匹配中的内容
var str123 = "marginTop:50px;fontSize:80px;";
var reg = /marginTop:(\d+)px;fontSize:(\d+)px;/;
var result = str123.match(reg);
// ['marginTop:50px;fontSize:80px;', '50', '80', index: 0, input: 'marginTop:50px;fontSize:80px;', groups: undefined]
console.log('result: ', result);
12-12. 模板解析
将模板中的 插值表达式，替换成真实的数据
/**
* ejs:
* vue:
* react:
*
*/
var data = {
name:'atguigu',
age:19
}
var template = '<div><p>姓名：{{name}}</p><p>年龄：{{age}}</p></div>';
var reg = /{{(.*?)}}/g;
var result = template.replace(reg, function(item,son){
// son 1 name
// son 2 age
return data[son];
})
console.log(result);
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
