正则表达式
正则表达式
什么是正则表达式
正则表达式（regular expression）描述了字符串的“构成模式”，经常被用于检查字符串是否符合预定的格式要求。
正则表达式的创建
- 使用/内容/的语法形式，可以快速创建正则表达式
- 也可以使用new RegExp('内容')的形式，创建正则表达式
- 使用typeof运算符检查正则表达式的类型，结果是object
字符的转义：
- 在特殊字符之前的反斜杠
\表示下一个字符不是特殊字符，应该按照字面理解 - 不管一个符号有没有特殊意义，都可以在其之前加上一个
\以确保它表达的是这个符号本身
var regexp1 = /^\d{6}$/;
var regexp2 = new RegExp('^\\d{6}$');
注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠\）。
元字符
“元字符”是指一位指定类型的字符。
| 元字符 | 功能 |
|---|---|
| \d | 匹配一个数字 |
| \D | 匹配一个非数字字符 |
| \w | 匹配一个单字字符（字母、数字或者下划线） |
| \W | 匹配一个非单字字符 |
| \s | 匹配一个空白字符，包括空格、制表符和换行符 |
| . | 任意字符 |
| ^ | 匹配开头 |
| $ | 匹配结尾 |
方括号表示法
- 使用方括号，比如[xyz]，可以创建一个字符集合，表示匹配方括号中的任意字符
- 可以使用短横-来指定一个字符范围，^表示否定
| 元字符 | 等价的方括号表示法 |
|---|---|
| \d | [0-9] |
| \D | [^0-9] |
| \w | [A-Za-z0-9_] |
| \W | [^A-Za-z0-9_] |
量词
| 量词 | 意义 |
|---|---|
| * | 匹配前一个表达式0次或多次。等价于{0,} |
| + | 匹配前面一个表达式1次或者多次。等价于{1,} |
| ? | 匹配前面一个表达式0次或者1次。等价于{0,1} |
| {n} | n是一个正整数，匹配了前面一个字符刚好出现了n次 |
| {n,} | n是一个正整数，匹配前一个字符至少出现了n次 |
| {n,m} | n和m都是整数。匹配前面的字符至少n次，最多m次 |
修饰符
修饰符也叫作标志(flags)，用于使用正则表达式实现高级搜索
| 修饰符 | 意义 |
|---|---|
| i | 不区分大小写搜索 |
| g | 全局搜索 |
修饰符的使用
var regexp1 = /m/gi;
var regexp2 = new RegExp('m', 'gi');
相关方法
| 方法 | 简介 |
|---|---|
| test() | 测试某字符串是否匹配正则表达式，返回布尔值 |
| exec() | 根据正则表达式，在字符串中进行查找，返回结果数组或者null |
var str = 'abc123def456ghi789';
var regexp = /\d+/g; // 这里加g参数后正则表达式是有状态的
var result;
while (result = regexp.exec(str)) {
console.log(result[0]);
}
在字符串中使用正则表达式
| 方法 | 简介 |
|---|---|
| search() | 在字符串中根据正则表达式进行查找匹配，返回首次匹配到的位置索引，测试不到则返回-1 |
| match() | 在字符串中根据正则表达式进行查找匹配，返回一个数组，找不到则返回null |
| replace() | 使用替换字符串替换掉匹配到的子字符串，可以使用正则表达式 |
| split() | 分隔字符串为数组，可以使用正则表达式 |
let str = 'abc123def4567';
let regexp = /\d+/g;
// search()方法
let result1 = str.search(regexp);
console.log(result1);
// match()方法
let result2 = str.match(regexp);
console.log(result2);
// replace()方法
let result3 = str.replace(/[a-z]+/g, '*');
console.log(result3);
// split()方法
let result4 = str.split(/\d+/g);
console.log(result4);
正则表达式应用
1. 手机号中间四位隐藏
const tel = '12345678901';
const reg = /^(\d{3})\d{4}(\d{4})$/;
const str = tel.replace(reg, '$1****$2');
2. 模板解析
let str = '我是{{name}},年龄{{age}},性别{{sex}}'
let person = {
name: '张三',
age: 18,
sex: '男'
}
// 方式一：使用展开运算符
function compile(template, data) {
let reg = /\{\{([a-z]+)\}\}/g
return template.replace(reg,(...args)=>{
return data[args[1]]
})
}
// 方式二：直接传并且判断path是否还需要替换
function compile(template, data) {
let reg = /\{\{([a-z]+)\}\}/g
return template.replace(reg,(match,path) => {
console.log(match,path);
return path in data ? data[path] : ''
})
}
// 方式三：使用递归
function compile(template, data) {
let reg = /{{(\w+)}}/;
if (reg.test(template)) {
let key = reg.exec(template)[1];
let value = data[key] || '';
template = template.replace(reg, value);
return compile(template, data); // 递归调用
} else {
return template;
}
}
compile(str, person);
3. 驼峰命名转短横线命名
function styleHyphenFormat(propertyName) {
function upperToHyphenLower(match, offset, string) {
return (offset > 0 ? "-" : "") + match.toLowerCase();
}
return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}
styleHyphenFormat('borderTop') // border-top