正则表达式任意字符

最近再一次重温老姚大佬的《JavaScript 正则表达式迷你书》 ， 并将核心知识点整理一遍，方便复习。
原书写得非常棒，建议看下原书啦。  地址：https://github.com/qdlaoyao/js-regex-mini-book
前端自习课 每日清晨，享受一篇前端优秀文章。 125篇原创内容 –> 公众号 原书这么一句话，特别棒：正则表达式是匹配模式，要么匹配字符，要么匹配位置，要记住。
1. 两种模糊匹配正则表达式的强大在于它的模糊匹配，这里介绍两个方向上的“模糊”：横向模糊和纵向模糊。
横向模糊匹配即一个正则可匹配的字符串长度不固定，可以是多种情况。
如 /ab{2,5}c/ 表示匹配：第一个字符是 “a” ，然后是 2 – 5 个字符 “b” ，最后是字符 “c” ：
let r = /ab{2,5}c/g;
let s = “abc abbc abbbc abbbbbbc”;
// [“abbc”, “abbbc”]
纵向模糊匹配即一个正则可匹配某个不确定的字符，可以有多种可能。
如 /[abc]/ 表示匹配 “a”, “b”, “c” 中任意一个。
let r = /a[123]b/g;
let s = “a0b a1b a4b”;
// [“a1b”]
2. 字符组范围表示法可以指定字符范围，比如 [1234abcdUVWXYZ] 就可以表示成 [1-4a-dU-Z] ，使用 – 来进行缩写。
如果要匹配 “a”, “-“, “z” 中任意一个字符，可以这么写：[-az] 或 [a-z] 或 [az-] 。
排除字符组即需要排除某些字符时使用，通过在字符组第一个使用 ^ 来表示取反，如 [^abc] 就表示匹配除了 “a”, “b”, “c” 的任意一个字符。
常见简写形式

然后表示任意字符，就可以使用 [dD]、[wW]、[sS] 和 [^] 任意一个。
3. 量词量词也称重复，常用简写如下：

贪婪匹配和惰性匹配在正则 /d{2,4}/ ，表示数字连续出现 2 – 4 次，可以匹配到 2 位、 3 位、4 位连续数字。
但是在 贪婪匹配 如 /d{2,4}/g ，会尽可能多匹配，如超过 4 个，就只匹配 4 个，如有 3 个，就匹配 3 位。
而在 惰性匹配 如 /d{2,4}?/g ，会 尽可能少 匹配，如超过 2 个，就只匹配 2 个，不会继续匹配下去。
let r1 = /d{2,4}/g;
let r2 = /d{2,4}?/g;
let s  = “123 1234 12345”; 
// [“123”, “1234”, “1234”]
// [“12”, “12”, “34”, “12”, “34”]

4. 多选分支即提供多个子匹配模式任选一个，使用 |(管道符)分隔，由于分支结构也是惰性，即匹配上一个后，就不会继续匹配后续的。
格式如：(r1|r2|r3)，我们就可以使用 /leo|pingan/ 来匹配 “leo” 和 “pingan”。
let r = /leo|pingan/g;
let s = “leo cool,pingan good.”;
// [“leo”, “pingan”]
// 多选分支的惰性表现
let r1 = /leo|leooo/g;
let r2 = /leooo|leo/g;
let s  = “leooo”;
// [“leo”]
// [“leooo”]
5. 分组命名 (ES9)ES9 之前的分组是通过数字命名的：
const pattern = /(d{4})-(d{2})-(d{2})/u;
const result = pattern.exec(‘2020-01-05’);
console.log(result[0]); // 打印”2020-01-05″
console.log(result[1]); // 打印”2020″
console.log(result[2]); // 打印”01″
console.log(result[3]); // 打印”05″
现在可以通过指定分组的名称，增加代码可读性，便于维护：
const pattern = /(?<year>d{4})-(?<month>d{2})-(?<day>d{2})/u;
const result = pattern.exec(‘2020-01-05’);
console.log(result.groups.year);         // 打印”2020-01-05″
console.log(result.groups.month);        // 打印”01″
console.log(result.groups.day);          // 打印”05″
分组命名还可以和 String.prototype.replace 方法结合：
const reDate = /(?<year>d{4})-(?<month>d{2})-(?<day>d{2})/;
const d = ‘2020-01-05’;
const USADate = d.replace(reDate, ‘$<month>-$<day>-$<year>’);
console.log(USADate);                        // 01-05-2020
6. 忽略分组如果不希望捕获某些分组，在分组内加上 ?: 即可。比如 (?:tom).(ok) 那么这里 $1 指的就是 ok。
7. 案例分析匹配字符，无非就是字符组、量词和分支结构的组合使用。
十六进制颜色值匹配let r = /#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}/g;
let s = “#ffaacc #Ff00DD #fFF #01d #9Gd”;
// [“#ffaacc”, “#Ff00DD”, “#fFF”, “#01d”]
时间和日期匹配// 时间 12:23 或 01:09
let r = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/;  
“23:25”); // true
“03:05”); // true
// 时间 12:23 或 1:9
let r = /^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/;  
“23:25”); // true
“03:05”); // true
“3:5”);   // true
// 日期 yyyy-mm-dd
let r = /^[0-9]{4}-(0[1-9]|[1][0-2])-(0[1-9]|[12][0-9]|3[01])$/;
“2019-09-19”); // true
“2019-09-32”); // false
Windows操作系统文件路径匹配盘符使用 [a-zA-Z]:\ ，这里需要注意 字符需要转义，并且盘符不区分大小写；
[^\:*<>|”?rn/] 表示合法字符；
([^\:*<>|”?rn/]+\)* 匹配任意个 文件夹；
文件夹 ，即没有 于是表示成 ([^\:*<>|”?rn/]+)?。
let r = /^[a-zA-Z]:\([^\:*<>|”?rn/]+\)*([^\:*<>|”?rn/]+)?$/;
“C:\document\leo\a.png”); // true
“C:\document\leo\”);      // true
“C:\document”);             // true
“C:\”);                     // true
id匹配如提取 <div id=”leo” class=”good”></id> 中的 id=”leo” ：
let r1 = /id=”.*”/;    // tips1
let r2 = /id=”.*?”/;   // tips2
let r3 = /id=”[^”]*”/; // tips3
let s  = ‘<div id=”leo” class=”good”></id>’;
0];  // id=”leo” class=”good”
0];  // id=”leo”
0];  // id=”leo”
tips1：由于 . 匹配双引号，且 * 贪婪，就会持续匹配到最后一个双引号结束。
tips2：使用惰性匹配，但效率低，有回溯问题。
tips3：最终优化。

1. JavaScript 重温系列（22篇全）
2. ECMAScript 重温系列（10篇全）
3. JavaScript设计模式 重温系列（9篇全）4. 正则 / 框架 / 算法等 重温系列（16篇全）5. Webpack4 入门（上）|| Webpack4 入门（下）6. MobX 入门（上） ||  MobX 入门（下）7. 120+篇原创系列汇总
回复“加群”与大佬们一起交流学习~
点击“阅读原文”查看 120+ 篇原创文章

正则表达式任意字符相关文章