正则表达式

**查看 原文站点 ，更多扩展内容及更佳阅读体验！ **
查看原文： 正则表达式

正则表达式

正则表达式是匹配模式，要么匹配字符，要么匹配位置。

字符匹配

两种模糊匹配

• 正则表达式能实现模糊匹配
• 模糊匹配，有两个方向上的模糊：横向和纵向

横向模糊匹配

• 横向模糊指的是，一个正则可匹配的字符串的长度不是固定的
• 实现方式是使用量词。 {m,n} ，表示连续出现最少 m 次，最多 n 次

/ab{2,5}c/ 匹配：第一个字符是 a ，接下来是 2 到 5 个字符 b ，最后是 c 。

var regex = /ab{2,5}c/g;
var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
console.log(string.match(regex));
//[ 'abbc', 'abbbc', 'abbbbc', 'abbbbbc' ]

纵向模糊匹配

纵向模糊，一个正则匹配的字符串，具体到某一位字符时，它可以不是某个确定的字符，可以有多种可能

• 实现方式是使用字符组。 [abc] ，表示该字符可以是 a 、 b 、 c 中的任何一个。

  var regex = /a[123]b/g; var string = "a0b a1b a2b a3b a4b"; console.log(string.match(regex)); //[ 'a1b', 'a2b', 'a3b' ]

字符组

虽然叫字符组（字符类），但只是匹配其中一个字符。 [abc] 表示匹配一个字符，它可以是 a 、 b 、 c 。

范围表示法

字符组里的字符比较多，可以使用范围表示法。

• [123456abcdefGHIJKLM] 可以写成 [1-6a-fG-M] 。用连字符 - 来省略和简写。
• 匹配 a 、 - 、 z 这三者中任意一个字符，可以写成 [-az] 或 [a\-z] 。要么放在开头，要么放在结尾，要么转义。

排除字符组

• 纵向模糊匹配某位字符不能是 a 、 b 、 c
• [^abc] 表示一个除 a 、 b 、 c 之外的任意一个字符。字符组的第一位放 ^ （脱字符），表示求反的概念。

常见的简写形式

• \d 就是 [0-9] 。表示一位数字。 digit
• \D 就是 [^0-9] 。表示除数字外的任意字符
• \w 就是 [0-9a-zA-Z] 。表示数字、大小写字母和下划线。 word
• \W 就是 [^0-9a-zA-Z] 。非单词字符
• \s 就是 [\t\v\n\r\f] 。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。 space
• \S 就是 [^\t\v\n\r\f] 。非空白符
• . 就是 [^\n\r\u2028\u2029] 。通配符，表示所有任意字符。

匹配任意字符，可以使用 [\d\D] 、 [\w\W] 、 [\s\S] 、 [^] 中任意一个。

量词

量词也称重复。 {m,n}

简写形式

• {m,} 表示至少出现 m 次
• {m} 等价于 {m,m} ，表示出现 m 次
• ? 等价于 {0,1} ，表示出现或不出现
• + 等价于 {1,} ，表示出现至少一次。
• * 等价于 {0,} ，表示出现任意次，有可能不出现。

贪婪匹配和惰性匹配

var regex = /\d{2,5}/g;
var string = "123 1234 12345 123456";
console.log(string.match(regex));
//[ '123', '1234', '12345', '12345' ]

• 贪婪匹配，就会尽可能多的匹配。

• 惰性匹配，就会尽可能少的匹配。

  var regex = /\d{2,5}?/g; var string = "123 1234 12345 123456"; console.log(string.match(regex)); //[ '12', '12', '34', '12', '34', '12', '34', '56' ]

/\d{2,5}?/g 表示 2 到 5 次都行，当 2 个就够的时候，不再往下匹配。

• 通过在量词后面加 ? 就能实现惰性匹配，所有的惰性匹配情形

  • {m,n}?
  • {m,}?
  • ??
  • +?
  • *?

• .* 是贪婪模式

• .*? 是惰性模式

多选分支

• 一个模式可以实现横向和纵向模糊匹配。而多选分支可以支持多个子模式任选其一。

• (p1|p2|p3) 其中 p1 、 p2 和 p3 是子模式，用 | （管道符）分隔，表示其中任何一个。

  var regex = /good|nice/g; var string = "good idea, nice try."; console.log(string.match(regex)); //[ 'good', 'nice' ]

  var regex = /good|goodbye/g; var string = "goodbye"; console.log( string.match(regex) ); // => ["good"]

  var regex = /goodbye|good/g; var string = "goodbye"; console.log( string.match(regex) ); // => ["goodbye"]

以上得到的结果各不相同， 分支结构也是惰性的，即当前面的匹配好了，后面的不再尝试 。

案例分析

匹配 16 进制颜色值

要求匹配

#ffbbad
#Fc01DF
#FFF
#ffE

分析

• 表示一个 16 进制字符，可以用字符组 [0-9a-fA-F]

• 其中字符可以出现 3 或 6 次，需要是用量词和分支结构

• 使用分支结构时，需要注意顺序

  var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g; var string = "#ffbbad #Fc01DF #FFF #ffE"; console.log(string.match(regex)); //[ '#ffbbad', '#Fc01DF', '#FFF', '#ffE' ]

匹配时间

要求匹配

23:59
02:07

分析

• 共 4 位数字，第一位数字可以是 [0-2]

• 当第 1 位是 2 时，第 2 位可以是 [0-3] ，其他情况第 2 位是 [0-9]

• 第 3 位数字是 [0-5] ，第 4 位是 [0-9]

  var regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/g;

要求匹配 7:9 ，时分前面的 0 可以省略。

var regex = /^(0?[0-9]|1[0-9]|2[0-3]):(0?[0-9]|[1-5][0-9])$/g;
var string = "7:9";
console.log(regex.test(string));
//true

匹配日期

要求匹配 2017-06-10

分析

• 年 ，四位数字即可 [0-9]{4}

• 月 ，共12个月，分两种情况 01、02、... 和 10、11、12 ， (0[1-9]|1[0-2])

• 年 ，最大31天，可用 (0[1-9]|[12][0-9]|3[01])

  var regex = /^[0-9]{4}-(0[0-9]|1[0-2])-(0[0-9]|[12][0-9]|3[01])$/g; console.log(regex.test("2017-10-20")); //true

window操作系统文件路径

F:\study\javascript\regex\regular expression.pdf
F:\study\javascript\regex\
F:\study\javascript
F:\

分析

• 整体模式是：盘符： \文件夹\文件夹\文件夹\

• 其中匹配 F:\ ，需要使用 [a-zA-Z]:\\ ，其中盘符不区分大小写，注意 \ 字符需要转移

• 文件名或文件夹名，不能包含一些字符字符，此时需要排除字符组 [^\\:*<s>|"?\r\n/] 来表示合法字符。不能为空名，至少有一个字符，也就是要使用量词 + 。

  • 匹配 文件夹\ ，可用 [^\\:*<>|"?\r\n/]+\\

• 另外 文件夹\ ，可以出现任意次。也就是 ([^\\:*<>|"?\r\n/]+\\)* 。其中括号提供子表达式。

• 路径的最后一部分可以是 文件夹 ，没有 \ ，因此需要添加 ([^\\:*<>|"?\r\n/]+)?

  var regex = /^[a-zA-Z]:\([\:<>|"?\r\n/]+\)([^\:*<>|"?\r\n/]+)?$/g;

匹配id

要求从 <div id="container" class="main"></div> 中提取出 id="container"

var regex = /id=".*?"/;
var string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]);
//id="container"

位置匹配

在ES5中共有 6 个锚字符

^$\b\B(?=p)(?!p)

$ 和 ^

• ^ （脱字符）匹配开头，在多行匹配中匹配行开头
• $ （美元符号）匹配结尾，在多行匹配中匹配结尾

把字符串的开头和结尾用 # 替换

var result = "hello".replace(/^|$/g, '#');
console.log(result);
//#hello#

多行匹配模式

var result = "I\nlove\njavascript".replace(/^|$/gm, '#');
console.log(result);
//#I#
// #love#
// #javascript#

\b 和 \B

\b 是单词边界，具体就是 \w 和 \W 之间的位置，也包括 \w 和 \W 之间的位置，也包括 \w 和 $ 之间的位置

• 文件名是 [JS] Lesson_01.mp4 中的 \b

  var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#'); console.log(result); //[#JS#] #Lesson_01#.#mp4#

(?=p) 和 (?!p)

• (?=p) ，其中 p 是一个子模式，即 p 前面的位置

• (?=l) ，表示 l 字符前面的位置

  var result = "hello".replace(/(?=l)/g, '#'); console.log(result); //he#l#lo

(?!p) 是 (?=p) 的反向操作

var result = "hello".replace(/(?!l)/g, '#');
console.log(result);
//#h#ell#o#

分别是正向先行断言和反向先行断言，具体是 (?<=p) 和 (?<!p)

• (?=p) 就是 p 前面的那个位置

位置的特性

var result = /^^hello$$$/.test("hello");
console.log(result); 
// => true

案例

不匹配任何东西的正则

/.^/

数字的千位分隔符表示法

**把12345678 ，变成 12,345,678 **

使用 (?=\d{3}$)

var result = "12345678".replace(/(?=\d{3}$)/g, ',');
console.log(result);
//12345,678

逗号出现的位置，要求后面 3 个数字一组，也就是 \d{3} 至少出现一次

• 可以使用量词 +

  var result = "12345678".replace(/(?=(\d{3})+$)/g, ','); console.log(result); //12,345,678

匹配其他案例

• 匹配位置不是开头 (?!^)

  var string1 = "12345678"; var string2 = "123456789"; var reg = /(?!^)(?=(\d{3})+$)/g; var result1 = string1.replace(reg, ','); console.log(result1); //12,345,678 var result2 = string2.replace(reg, ','); console.log(result2); //123,456,789

验证密码问题

• 密码长度6-12位，由数字、小写字符和大写字母组成，但必须至少包括2种字符。

简化

不考虑“但至少包括2种字符”这个条件

var reg = /^[0-9A-Za-z]{6,12}$/;

判断是否含有某一种字符

如果要求必须包含数字，可以使用 (?=.*[0-9])

var reg = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;

同时包含具有两种字符

同时包含数字和小写字母，可以用 (?=.*[0-9](?=.*[a-z]))

var reg = /(?=.*[0-9])(?=.*[a-z])^(0-9A-Za-z){6,12}$/;

• 同时包含数字和小写字母

• 同时包含数字和大写字母

• 同时包含小写字母和大写字母

• 同时包含数字、小写字母和大写字母

  var reg = /((?=.[0-9])(?=.[a-z])|(?=.[0-9])(?=.[A-Z])|(?=.[a-z])(?=.[A-Z]))^[0-9A-Za-z]{6,12}$/;

括号的作用

• 括号提供分组
• 引用某个分组，有两种情形：在JS中引用，在正则表达式中应用

分组和分支结构

分组

• /a+/ 匹配连续出现的 a ，要匹配连续出现的 ab 时，需要使用 /(ab)+/

• 括号提供分组功能，使量词 + 作用于 ab 这个整体

  var regex = /(ab)+/g; var string = "ababa abbb ababab"; console.log(string.match(regex)); //[ 'abab', 'ab', 'ababab' ]

分支结构

• 多选分支结构 (p1|p2) 中括号的作用是提供了子表达式的所有可能

  I love JavaScript I love Regular Expression

  var regex = /^I love (JavaScript|Regular Expression)$/; console.log( regex.test("I love JavaScript") ); console.log( regex.test("I love Regular Expression") ); // => true // => true

引用分组

• 括号的重要作用，可以进行数据提取，以及更强大的替换操作

**匹配日期yyyy-mm-dd **

提取数据

提取出年、月、日

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2018-06-18";
console.log(string.match(regex));
//[ '2018-06-18', '2018', '06', '18', index: 0, input: '2018-06-18' ]

match 返回的一个数组，第一个元素是整体匹配结果，然后是各个分组（括号）匹配的内容，然后是匹配下标，最后是输入的文本。（正则是否有修饰符 g ， match 返回的数组格式是不一样）

• 可以使用正则对象的 exec 方法

可以使用构造函数的全局属性 $1 至 $9 来获取

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";

regex.test(string); // 正则操作即可，例如
//regex.exec(string);
//string.match(regex);

console.log(RegExp.$1); // "2017"
console.log(RegExp.$2); // "06"
console.log(RegExp.$3); // "12"

替换

把 yyyy-mm-dd 格式，替换成 mm/dd/yyyy

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); 
// => "06/12/2017"

其中 replace 中第二个参数用 $1 、 $2 、 $3 指代相应的分组。等价于 var regex=/(\d{4})-(\d{2})-(\d{2})/

反向引用

写一个正则支持匹配以下三种格式：

2016-06-12
2016-06-12
2016.06.12

• 要求分割符前后一致，使用反向引用

  var regex = /\d{4}(-|/|.)\d{2}\1\d{2}/; var string1 = "2017-06-12"; var string2 = "2017/06/12"; var string3 = "2017.06.12"; var string4 = "2016-06/12"; console.log( regex.test(string1) ); // true console.log( regex.test(string2) ); // true console.log( regex.test(string3) ); // true console.log( regex.test(string4) ); // false

• \1 ，表示的引用之前的分组 (-|\/|\.) 。不管它匹配到什么（比如 - ）， \1 都匹配那个同样的具体某个字符

• \2 和 \3 分别指代第二个和第三个分组

括号嵌套

以左括号（开括号）为准

var regex = /^((\d)(\d(\d)))\1\2\3\4$/;
var string = "1231231233";
console.log( regex.test(string) ); // true
console.log( RegExp.$1 ); // 123
console.log( RegExp.$2 ); // 1
console.log( RegExp.$3 ); // 23
console.log( RegExp.$4 ); // 3

正则匹配模式

• 第一个字符是数字，比如说1，
• 第二个字符是数字，比如说2，
• 第三个字符是数字，比如说3，
• 接下来的是1，是第一个分组内容，那么看第一个开括号对应的分组是什么，是123，
• 接下来的是2，找到第2个开括号，对应的分组，匹配的内容是1，
• 接下来的是3，找到第3个开括号，对应的分组，匹配的内容是23，
• 最后的是4，找到第3个开括号，对应的分组，匹配的内容是3。

引用不存在的分组

反向引用，引用前面的分组，在正则里引用了不存在的分组，正则不会报错，只是匹配反向引用的字符本身

非捕获分组

• 前面出现的分组，都会捕获它们匹配的数据，以便后续引用，因此也称它们是捕获型分组

• 非捕获分组 ?:p

  var regex = /(?:ab)+/g; var string = "ababa abbb ababab"; console.log(string.match(regex)); //[ 'abab', 'ab', 'ababab' ]

案例

字符串 trim 方法模拟

trim 方法是去掉字符串的开头和结尾的空白符

• 第一种，匹配到开头和结尾的空白符，然后替换成空白符

  function trim(str) { return str.replace(/^\s+|\s+$/g, '') }

• 第二种，匹配整个字符串，然后用引用来提取出相应的数据

  function trim(str) { return str.replace(/^\s*(.?)\s$/g, "$1"); }

这里使用了惰性匹配 *? ，不然也会匹配最后一个空格之前的所有空格

将每个单词的首字母转换成大写

function titleize(str) {
    return str.toLowerCase().replace(/(?:^|\s)\w/g, function (c) {
        return c.toUpperCase();
    })
}
console.log(titleize('my name is epeli'));
//My Name Is Epeli

思路是找到每个单词的首字母，这里不适用非捕获匹配也是可以的

驼峰化

function camelize(str) {
    return str.replace(/[-_\s]+(.)?/g, function (match, c) {
        return c ? c.toUpperCase() : '';
    })
}
console.log(camelize('-moz-transform'));
//MozTransform

其中分组 (.) 表示首字母。单词的界定是，前面的字符可以是多个连字符、下划线以及空白符。

正则后面的 ？ 的目的，是为了应对 str 尾部的字符可能不是单词字符。

中划线化

驼峰化的逆过程

function dasherize(str) {
    return str.replace(/([A-Z])/g,'-$1').replace(/[-_\s]+/g,'-').toLowerCase();
}
console.log(dasherize('MozTransform'));
//-moz-transform

html 转义和反转义

匹配成对标签

要求匹配

<title>regular expression</title>
<p>laoyao bye bye</p>

不匹配

<title>wrong!</p>

• 匹配一个开标签，使用正则 <[^>]+>
• 匹配一个闭标签，使用 <\/[^>]+>

要求匹配成对标签，需要使用反向引用

var regex = /<([^>]+)>[\d\D]*<\/\1>/;
var string1 = "<title>regular expression</title>";
var string2 = "<p>laoyao bye bye</p>";
var string3 = "<title>wrong!</p>";
console.log(regex.test(string1)); // true
console.log(regex.test(string2)); // true
console.log(regex.test(string3)); // false

• 其中开标签 <[^>]+> 改成 <([^>]+)> ，使用括号的目的是为了后面使用反向引用，而提供分组
• 闭标签使用了反向引用 <\/\1>
• [\d\D] 这个字符是数字或不是数字，也就是匹配任意字符

正则表达式回溯法

没有回溯的匹配

当目标字符串是 abbbc 时，就没有所谓的“回溯”。

有回溯的匹配

如果目标字符串是 abbc ，中间就有回溯

常见的回溯形式

• 回溯法也称试探法，基本思想：从问题的某一种状态（初始状态）出发，搜索从这种状态出发所能达到的所有“状态”，当一条路走到“尽头”的时候，再后退一步或若干步，从另一种可能状态出发，继续搜索，直到所有的路径（状态）都试探过。这种不断前进、不断回溯寻找解的方法，称作“回溯法”。
• 本质上就是深度优先搜索算法。其中退到之前的某一步这个过程，成为“回溯”。

正则表达式产生回溯的地方

贪婪量词

var string = "12345";
var regex = /(\d{1,3})(\d{1,3})/;
console.log(string.match(regex));
//[ '12345', '123', '45', index: 0, input: '12345' ]

前面的 \d{1,3} 匹配的是 123 ，后面的 \d{1,3} 匹配的是 45

惰性量词

惰性量词就是在贪婪量词后面加个问好。表示尽可能少的匹配。

var string = "12345";
var regex = /(\d{1,3}?)(\d{1,3})/;
console.log( string.match(regex) );
// => ["1234", "1", "234", index: 0, input: "12345"]

• 其中 \d{1,3}? 只匹配到一个字符 1 ，而后面的 \d{1,3} 匹配了 234
• 虽然惰性量词不贪婪，但也会有回溯现象。

分支结构

分支也是惰性的，比如 /can|candy/ ，去匹配字符串 candy ，得到的结果是 can ，因为分支会一个一个尝试，如果前面的满足，后面就不会再试验。
分支结构，可能前面的子模式会形成了局部匹配，如果接下来表达式整体不匹配，仍会继续尝试剩下的分支。

正则表达式的拆分

结构和操作符

在正则表达式中，操作符都体现在结构中，即由特殊字符和匹配字符所代表的一个特殊整体。

JS正则表达式中，都有哪些结构？

• 字符字面量、字符组、量词、锚字符、分组、选择分支、反向引用

具体含义

• 字面量 ，匹配一个具体字符，包括不用转义的和需要转义的。

  • 比如 a 匹配字符 a ， \n 匹配换行符， \. 匹配小数点

• 字符组 ，匹配一个字符，可以是多种可能之一，

  • 比如 [0-9] ，表示匹配一个数字， \d 是简写形式。
  • 另外还有反义字符组，表示可以是除了特定字符之外任何一个字符，比如 [^0-9] 表示一个非数字字符，也有 \D 的简写形式

• 量词 ，表示一个字符连续出现，比如 a{1,3} 表示 a 字符连续出现3次。

  • 常见简写形式， a+ 表示 a 字符连续出现至少一次

• 锚点 ，匹配一个位置，而不是字符。

  • 比如 ^ 匹配字符串的开头，
  • 比如 \b 匹配单词边界
  • 比如 (?=\d) 表示数字前面的位置

• 分组 ，用括号表示一个整体，

  • 比如 (ab)+ 表示 ab 两个字符连续出现多次，也可以使用非捕获分组 (?:ab)+

• 分支 ，多个子表达式多选一

  • 比如 abc|bcd 表示式匹配 abc 或 bcd 字符子串

• 反向引用 ，比如 \2 表示引用第 2 个分组

其中涉及到的操作符有

• 转义符 \
• 括号和方括号 (...) 、 (?:...) 、 (?=...) 、 (?!...) 、 [...]
• 量词限定符 {m} 、 {m,n} 、 {m,} 、 ? 、 * 、 +
• 位置和序列 ^ 、 $ 、 \元字符 、一般字符
• 管道符 |

操作符的优先级从上至下，由高到低

/ab?(c|de*)+|fg/

• 由于括号的存在， (c|de*) 是一个整体结构
• 在 (c|de*) 中注意其中的量词，因此 e 是一个整体结构
• 因为分支结构 | 优先级最低，因此 c 是一个整体，而 de* 是另一个整体
• 同理，整个正则分成了 a 、 b? 、 (...)+ 、 f 、 g 。而由于分支的原因，又可以分成 ab?(c|de*)+ 和 fg 两部分

注意要点

匹配字符串整体问题

• 要匹配整个字符串，在正则前后中加上锚字符 ^ 和 $

量词连缀问题

每个字符为a、b、c任选其一
字符串的长度是3的倍数

• /([abc]{3})/

元字符转义问题

• 元字符，就是正则中特殊含义的字符

• 所有结构里，用到的元字符：

  • ^ 、 $ 、 . 、 * 、 + 、 ? 、 | 、 | 、 / 、 () 、 [] 、 {} 、 = 、 ! 、 : 、 - 、 ,

当匹配上面的字符本身时，可以一律转义：

var string = "^$.*+?|\\/[]{}=!:-,";
var regex = /\^\$\.\*\+\?\|\\\/\[\]\{\}\=\!\:\-\,/;
console.log(regex.test(string));
// => true

• 其中 string 中的 \ 字符也要转义
• 另外在 string 中也可以把每个字符转义，转义后的结果仍然是自身

字符组中的元字符

跟字符组相关的元字符有[] 、 ^ 、 \- ，需要在会引起歧义的地方进行转义。例如开头的 ^必须转义，不然会把整个字符组，看成反义字符组。

var string = "^$.*+?|\\/[]{}=!:-,";
var regex = /[\^$.*+?|\\/\[\]{}=!:\-,]/g;
console.log( string.match(regex) );

案例分析

身份证

/^(\d{15}|\d{17}[\dxX])$/

因为 | 的优先级最低，所以正则分成了两部分 \d{15} 和 \d{17}[\dxX]

• \d{15} 表示 15 位连续数字
• \d{17}[\dxX] 表示 17 位连续数字，最后一位可以是数字或大小写字母 x

IPV4地址

(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])

**它是一个多选结构，分成5 部分 **

• 0{0-2}\d ，匹配一位数，包括 0 补齐。比如 9 、 09 、 009
• 0?\d{2} ，匹配两位数，包括 0 补齐，也包括一位数
• 1\d{2} ，匹配 100 到 199
• 2[0-4]\d ，匹配 200-249
• 25[0-5] ，匹配 250-255

正则表达式编程

四种操作

验证

• 验证时正则表达式最直接的应用，比如表单验证

判断一个字符串中是否有数字

**使用search **

var regex = /\d/;
var string = "abc123";
console.log(!!~string.search(regex));
//true

**使用test **

var regex = /\d/;
var string = "abc123";
console.log( regex.test(string) );
// => true

**使用match **

var regex = /\d/;
var string = "abc123";
console.log( !!string.match(regex) );
// => true

**使用exec **

var regex = /\d/;
var string = "abc123";
console.log( !!regex.exec(string) );
// => true

其中，最常用的是 test

切分

• 切分，就是把目标字符串切成段，例如JS中的 split

  • 比如目标字符串 html,css,javascript ，按逗号来切分

  var regex = /,/; var string = "html,css,javascript"; console.log(string.split(regex)); //[ 'html', 'css', 'javascript' ]

日期格式

2018/06/20
2018.06.20
2018-06-20

可以使用 split 切出年月日

var regex = /\D/;
console.log("2018/06/20".split(regex));
console.log("2018.06.20".split(regex));
console.log("2018-06-20".split(regex));
// [ '2018', '06', '20' ]
// [ '2018', '06', '20' ]
// [ '2018', '06', '20' ]

提取

• 此时正则通常要使用分组引用（分组捕获）功能

**match **

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
console.log(string.match(regex));
//[ '2018-06-20', '2018', '06', '20', index: 0, input: '2018-06-20' ]

**exec **

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
console.log(regex.exec(string));
//[ '2018-06-20', '2018', '06', '20', index: 0, input: '2018-06-20' ]

**test **

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
regex.test(string);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
//2018 06 20

**search **

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
string.search(regex);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
//2018 06 20

**replace **

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
var date = [];
string.replace(regex, function (match, year, month, day) {
    date.push(year, month, day);
});
console.log(date);
//[ '2018', '06', '20' ]

其中最常用的是 match

替换

把日期格式，从 yyyy-mm-dd 替换成 yyyy/mm/dd ：

var string = "2018-06-20";
var today = new Date(string.replace(/-/g, "/"));
console.log(today);
//2018-06-19T16:00:00.000Z

用于正则操作的方法，共有 6 个，字符串实例 4 个，正则实例 2 个

• string#search
• string#split
• string#match
• string#replace
• RegExp#test
• RegExp#exec

**search 和 match 的参数问题 **

• 字符串实例的 4 个方法参数都支持正则和字符串

• 但 search 和 match 把字符串转换为正则

  var string = "2018.06.20";

  console.log(string.search("."));//0 //需要修改成下列形式之一 console.log(string.search("\."));//4 console.log(string.search(/./));//4

  console.log(string.match(".")); //[ '2', index: 0, input: '2018.06.20' ] //需要修改成下列形式之一 console.log(string.match("\.")); //[ '.', index: 4, input: '2018.06.20' ] console.log(string.match(/./)); //[ '.', index: 4, input: '2018.06.20' ]

  console.log(string.split(".")); //[ '2018', '06', '20' ]

  console.log(string.replace(".", "/")); //2018/06.20

**match 返回结果的格式问题 **

match 返回结果的格式，跟正则对象是否有修饰符 g 有关

var string = "2018.06.20";
var regex1=/\b(\d+)\b/;
var regex2=/\b(\d+)\b/g;
console.log(string.match(regex1));
//[ '2018', '2018', index: 0, input: '2018.06.20' ]
console.log(string.match(regex2));
//[ '2018', '06', '20' ]

• 没有 g ，返回的是标准匹配格式，数组的第一个元素时整体匹配的内容，接下来是分组捕获的内容，然后是整体匹配的第一个下标，最后的输入的目标字符串
• 有 g ，返回的是所有匹配的内容
• 当没有匹配时，不管有没有 g 都返回 null

**exec 比 match 更强大 **

当正则没有 g 时，使用 match 返回的信息比较多。但是有 g 后，就没有关键信息 index
而 exec 方法就能解决这个问题，它能接着上一次匹配后继续匹配

var string = "2018.06.20";
var regex = /\b(\d+)\b/g;
console.log(regex.exec(string));
//[ '2018', '2018', index: 0, input: '2018.06.20' ]
console.log(regex.lastIndex);//4
console.log(regex.exec(string));
// [ '06', '06', index: 5, input: '2018.06.20' ]
console.log(regex.lastIndex);//7
console.log(regex.exec(string));
//[ '20', '20', index: 8, input: '2018.06.20' ]
console.log(regex.lastIndex);//10
console.log(regex.exec(string));//null
console.log(regex.lastIndex);//0

**test 整体匹配时需要使用 ^ 和 $ **

test 是看目标字符串中是否有子串匹配正则，即有部分匹配即可。

• 要整体匹配，正则前后需要添加开头和结尾

  console.log( /123/.test("a123b") ); // => true console.log( /^123$/.test("a123b") ); // => false console.log( /^123$/.test("123") ); // => true

**split 相关注意事项 **

1. 第一，它可以有第二个参数，表示结果数组的最大长度

var string = "html,css,javascript";
console.log( string.split(/,/, 2) );
// =>["html", "css"]

1. 第二，正则使用分组时，结果数组中是包含分隔符的

var string = "html,css,javascript";
console.log( string.split(/(,)/) );
// =>["html", ",", "css", ",", "javascript"]

**replace 是很强大的 **

replace 有两种使用形式，它的第二个参数，可以是字符串，也可以是函数。

当第二个参数是字符串时，如下的字符有特殊的含义：

• $1 , $2,...,$99 匹配第 1~99 个分组里捕获的文本
• $& 匹配到的子串文本
• $ ` 匹配到的子串的左边文本
• $' 匹配到的子串的右边文本
• $$ 美元符号

例如，把" 2,3,5 "，变成" 5=2+3 "：

var result = "2,3,5".replace(/(\d+),(\d+),(\d+)/, "$3=$1+$2");
console.log(result);
// => "5=2+3"

当第二个参数是函数时，该回调函数的参数具体：

"1234 2345 3456".replace(/(\d)\d{2}(\d)/g, function(match, $1, $2, index, input) {
    console.log([match, $1, $2, index, input]);
});
// => ["1234", "1", "4", 0, "1234 2345 3456"]
// => ["2345", "2", "5", 5, "1234 2345 3456"]
// => ["3456", "3", "6", 10, "1234 2345 3456"]

修饰符

• g 全局匹配，即找到所有匹配的，单词是 global
• i 忽略字母大小写，单词 ingoreCase
• m 多行匹配，只影响 ^ 和 $ ，二者变成行的概念，即行开头和行结尾。单词是 multiline