15
查看原文站点,更多扩展内容及更佳阅读体验!
查看原文:正则表达式

正则表达式

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

字符匹配

两种模糊匹配

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

横向模糊匹配

  • 横向模糊指的是,一个正则可匹配的字符串的长度不是固定的
  • 实现方式是使用量词。{m,n},表示连续出现最少m次,最多n
/ab{2,5}c/匹配:第一个字符是a,接下来是25个字符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],表示该字符可以是abc中的任何一个。
var regex = /a[123]b/g;
var string = "a0b a1b a2b a3b a4b";
console.log(string.match(regex));
//[ 'a1b', 'a2b', 'a3b' ]

字符组

虽然叫字符组(字符类),但只是匹配其中一个字符。[abc]表示匹配一个字符,它可以是abc

范围表示法

字符组里的字符比较多,可以使用范围表示法。
  • [123456abcdefGHIJKLM]可以写成[1-6a-fG-M]。用连字符-来省略和简写。
  • 匹配a-z这三者中任意一个字符,可以写成[-az][a\-z]。要么放在开头,要么放在结尾,要么转义。

排除字符组

  • 纵向模糊匹配某位字符不能是abc
  • [^abc]表示一个除abc之外的任意一个字符。字符组的第一位放^(脱字符),表示求反的概念。

常见的简写形式

  • \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 表示25次都行,当2个就够的时候,不再往下匹配。
  • 通过在量词后面加?就能实现惰性匹配,所有的惰性匹配情形

    • {m,n}?
    • {m,}?
    • ??
    • +?
    • *?
  • .* 是贪婪模式
  • .*?是惰性模式

多选分支

  • 一个模式可以实现横向和纵向模糊匹配。而多选分支可以支持多个子模式任选其一。
  • (p1|p2|p3)其中p1p2p3是子模式,用|(管道符)分隔,表示其中任何一个。
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]
  • 其中字符可以出现36次,需要是用量词和分支结构
  • 使用分支结构时,需要注意顺序
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返回的一个数组,第一个元素是整体匹配结果,然后是各个分组(括号)匹配的内容,然后是匹配下标,最后是输入的文本。(正则是否有修饰符gmatch返回的数组格式是不一样)
  • 可以使用正则对象的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表示式匹配abcbcd字符子串
  • 反向引用,比如\2表示引用第2个分组

其中涉及到的操作符有

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

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

/ab?(c|de*)+|fg/
  • 由于括号的存在,(c|de*)是一个整体结构
  • (c|de*)中注意其中的量词,因此e是一个整体结构
  • 因为分支结构|优先级最低,因此c是一个整体,而de*是另一个整体
  • 同理,整个正则分成了ab?(...)+fg。而由于分支的原因,又可以分成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补齐。比如909009
  • 0?\d{2},匹配两位数,包括0补齐,也包括一位数
  • 1\d{2},匹配100199
  • 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

searchmatch的参数问题

  • 字符串实例的4个方法参数都支持正则和字符串
  • searchmatch把字符串转换为正则
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

execmatch更强大

当正则没有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

寒青
10.4k 声望3.8k 粉丝

« 上一篇
函数化组件
下一篇 »
JS思维导图