JavaScript中的正则表达式
前言
正则表达式是前端开发过程中不可或缺的一部分,当我们处理各种表单时,都会遇到数据格式校验的问题。
相较于通过各种判断实现的校验,正则表达式的校验更加优雅也更加灵活。
这篇文章就来介绍一下JavaScript中正则表达式的那些事儿~
一、创建正则表达式
1、字面量创建
let reg = /-(\w)/g; // 匹配所有的 -[a-z]
2、构造函数创建
let reg = new RegExp("\-(\\w)", "g");
let reg = new RegExp(/-(\w)/, "g");
转义字符:\
特殊符号在字符串中使用时需要在前面加转义字符。另外转义字符还可以用来进行字符串的换行。
二、常用方法
正则表达式常用方法:
- reg.test(str):判断字符串是否匹配正则表达式,返回布尔值。
- reg.exec(str):找到第一个匹配的值,返回其位置。
字符串正则相关常用方法:
- str.match(reg):返回一个符合正则条件的数组。
三、修饰符
- i:忽略大小写
let reg = /abc/i;
let str = 'aBC';
console.log(reg.test(str)) //true
- g:全局匹配
let reg = /abc/g;
let str = 'abcdddabc';
console.log(reg.test(str)) //true
console.log(str.match(reg)) //[ 'abc', 'abc' ]
- m:多行匹配
let reg1 = /abc$/m;
let reg2 = /abc$/;
let str = 'aabc\nbbb';
console.log(reg1.test(str)) //true
console.log(reg2.test(str)) //false
注意:可以多个修饰符同时使用,比如
let reg = /abc/ig
四、表达式
一个表达式代表一位字符。
[abc]
:表示查找中括号之间的任何字符。例如:[0-9]、[A-z]、[0-9A-z][^abc]
:表示查找任何不在中括号之间的字符。这里^
代表非的意思。(abc|cba)
:这里|
代表或的意思。()
和数学中的作用类似,会优先计算。
五、元字符
和表达式是一个东西,通过一些特定的字符来表示一些常用的表达式。
-
.
:非换行的任何字符。 -
\s
:space,任何为空的字符。 -
\d
:[0-9]
,digit,任何数字。 -
\w
:[0-9A-z_]
,word,数字字母_。 -
\b
:border,单词边界。 -
[\w\W]
:类似这种代表所有字符。 -
\1
:代表反向引用第一个小括号包裹的表达式中的值。-
let reg = /(\w)\1(\w)\2/g let str = "aabb123aabb" console.log(str.match(reg)) // [ 'aabb', 'aabb' ]
-
-
\u0000
:查找Unicode字符集。比如[\u4e00-\u9fa5]
是中文字符集。
元字符用小写字母来代表一类字符,对应的大写字母代表与之相反的字符。
比如:\d 代表数字,\D 代表非数字。
六、量词
-
n+
:包含至少一个n的字符串 -
n*
:包含零个或多个n的字符串 -
n?
:包含零个或一个n的字符串 -
n{X}
:包含X个n的字符串 -
n{X,Y}
:包含X至Y个n的字符串,贪婪匹配原则 -
n{X,}
:包含至少X个n的字符串,惰性匹配原则 -
^n
:以 n 开头的字符串 -
n$
:以 n 结尾的字符串 -
?=n
:正向查找,匹配后一个字符串为n的字符-
let reg = /\w(?=&)/g let str = "1&321&1" console.log(str.match(reg)) // [ '1', '1' ]
-
-
?!n
:正向查找,匹配后一个字符串不为n的字符。 -
?<=n
:反向查找,匹配前一个字符串为n的字符。-
let reg = /(?<=&)\w/g let str = "1&321&1" console.log(str.match(reg)) // [ '3', '1' ]
-
-
?!=n
:反向查找,匹配前一个字符串不为n的字符。
正则表达式默认是贪婪匹配原则,能多则多。
量词后面加 ?变为惰性匹配原则,能少则少。使用两个?,能取0不取1。
let reg1 = /n+/g let reg2 = /n+?/g let str = "nnnn" console.log(str.match(reg1)) // [ 'nnnn' ] console.log(str.match(reg2)) // [ 'n', 'n', 'n', 'n' ]
七、常用的正则表达式汇总
结尾
以上就是我对JavaScript中的正则表达式的一些知识总结,更多内容请看 MDN