创建正则表达式
-
使用构造函数创建
let reg = new RegExp(/[a-z]/);
let reg = new RegExp(/[A-Z]/,'g');
-
使用字面量创建
let reg = /[a-z]/;
let reg = /A-Z/g
正则中常用的方法
-
test()
检索字符串是否匹配正则表达式，匹配则返回true，不匹配返回false
/abc/.test("abc"); //true
/abc/.test("123"); //false
-
exec()
检索字符串是否匹配正则表达式，匹配成功返回一个包含匹配内容、索引值、检索的字符串的数组，不匹配则返回null
/[a-z]/g.exec("123abc"); // ["a", index: 3, input: "123abc", groups: undefined]
/[abc]/.exec(“”)
-
match()
检索字符串将匹配的所有内容返回一个数组
"123a456b789".match(/\d+/g); //["123", "456", "789"]
"123a456b789".match(/\d+/); // ["123", index: 0, input: "123a456b789", groups: undefined]
// 不加全局匹配，和exec() 方法返回值一样
-
replace()
将正则匹配到的内容去替换掉字符串中的内容，并返回替换完成的字符串
"abc".replace(/\w/g,"6"); // "666"
常用的元字符
-
\d
匹配一个数字字符。等价于[0-9]
-
\D
匹配一个非数字字符。等价于[^0-9]
-
\w
匹配字母、数字、下划线。等价于[A-Za-z0-9_]
-
\W
匹配非字母、数字、下划线。等价于 [^A-Za-z0-9_]
-
\s
是匹配所有空白符
-
\S
匹配所有非空白符
-
.
匹配除了换行之外的任何单个字符
-
*
匹配前面的子表达式零次或多次。例如，zo*能匹配 z 以及 zoo。* 等价于{0,}
-
+
匹配前面的子表达式一次或多次。例如，zo+ 能匹配 zo 以及 zoo，但不能匹配 z。+ 等价于 {1,}
-
?
匹配前面的子表达式零次或一次。例如，do(es)? 可以匹配do 或 does 。? 等价于 {0,1}
-
{n}
匹配确定的n次
"abcaaabbb".match(/a{4}/g); //null
-
{n,}
至少匹配n次
"aabcaaabbb".match(/a{2,}/g); //[ 'aa', 'aaa' ]
-
{n,m}
至少n次 最多m次
"aabcaaabbbaaaa".match(/a{2,3}/); //[ 'aa', 'aaa', 'aaa' ]
-
[...]
匹配[...]中的所有字符
"abc".match(/abc/g); // ["abc"]
"abc".match(/[abc]/g); // ["a","b","c"]
//[A-Z] 匹配所有区间内的大写字母 [a-z]表示所有小写字母
"abc".match(/[a-z]/g); // ["a","b","c"]
"abc".match(/[A-Z]/g); // null
-
[^...]
匹配除了[...]中的所有字符
"abc123".match(/[^abc]/g); // ["1", "2", "3"]
-
^
匹配以此开头的
/^a/.test("abc"); // true
/^a/.test("123abc"); // false
-
$
匹配以此结尾的
/c$/.test("abc"); // true
-
\b
匹配一个单词边界
"hi hello world".replace(/o\b/,"*"); // "hi hell* world"
"hi hello world".replace(/\bh/,"*"); // "*i hello world"
-
\B
匹配一个非单词边界
"hello world".replace(/o\B/,"*"); // "hello w*rld"
"hello world".replace(/\Bo/,"*"); // "hell* world"
-
(?=pattern)
正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。
// 匹配kg前面的所有数字
"1000kg".match(/\d+(?=kg)/g); // ["1000"]
-
(?<=pattern)
反向肯定预查，与正向肯定预查类似，只是方向相反。
// 匹配1000后面的所有字母
"1000kg".match(/(?<=1000)\w+/g); //["kg"]
-
(?!pattern)
正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。
// 匹配后面不是字母的所有数字
"1111abc9999".match(/\d+(?!\w)/g); // 9999
-
(?<!pattern)
反向否定预查，与正向否定预查类似，只是方向相反。
// 匹配所有前面没有字母的数字
"123abc456edf".match(/(?<!\w+)\d+/g); // ["123"]
注意
// * 和 + 限定符都是贪婪的，因为它们会尽可能多的匹配文字，只有在它们的后面加上一个 ? 就可以实现非贪婪或最小匹配。
/<.*>/.exec('<a>hahaha</a>'); //<a>hahaha</a>
/<.*?>/.exec('<a>hahaha</a>'); //<a>
/(<a>)(.+?)(<\/a>)/.exec('<a>hahaha</a>'); // ["<a>hahaha</a>", "<a>", "hahaha", "</a>", index: 0, input: "<a>hahaha</a>", groups: undefined]
实例
// 给定一个标签字符串，使用正则获取 data-img-url 和 data-img-url2 属性中的网址
const str = '<img crossorigin src="https://jianshu.com" data-img-url="https://baidu.com" data-img-url2="https://dsy.com">'
// 这里使用了反向否定预查和正向肯定预查
str.match(/(?<!src=")https.*(?=")/g); //[ 'https://baidu.com" data-img-url2="https://dsy.com' ]
// 这里的结果明显和我们预期有偏差，是因为上面提到的 * 是贪婪的，它会尽可能多的匹配文字
// 我们需要给它在后面加上一个？，实现非贪婪匹配，这样就得到我们想要的结果了
str.match(/(?<!src=")https.*?(?=")/g); //[ 'https://baidu.com" , 'https://dsy.com' ]
