Vue中的正则表达式

正则修饰符：

i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m	执行多行匹配。

方括号用于查找某个范围内的字符：

[abc]	查找方括号之间的任何字符
[^abc]	查找任何不在方括号之间的字符，反向字符集。
[0-9]	查找任何从0到9的数字
[a-z]	查找任何从小写a到小写z的字符
[A-Z]	查找任何从大写A到大写Z的字符
[adgk]	查找给定集合内的任何字符
[^adgk]	查找给定集合外的任何字符
(red|blue|green)	查找任何指定的选项
(x|y)	查找任何以|分割的选项

拥有特殊含义的字符：

.	查找单个字符，除了换行和行结束符（换行符为 \n和 \r）
\w	查找数字、字母及下划线，包括：a-z、A-Z、0-9及下划线
\W	查找非单词字符
\d	查找数字字符
\D	查找非数字字符
\s	查找空白字符。空白字符包括：空格、\n、\f、\r、\t、\v
\S	查找非空白字符
\b	匹配单词边界，通常匹配单词开头和结尾。如：/\bcd/匹配cdkey
\B	匹配非单词边界。如：/\Bcd/匹配abcd
\0	查找NULL字符
\n	查找换行符
\f	查找换页符
\r	查找回车符
\t	查找制表符
\v	查找垂直制表符
\xxx	查找以八进制数xxx规定的字符
\xdd	查找以十六进制数dd规定的字符
\uxxxx	查找以十六进制数xxxx规定的unicode字符

量词：

n+	匹配任何包含至少一个 n 的字符串。如：/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"
n*	匹配任何包含零个或多个 n 的字符串
n?	匹配任何包含零个或一个 n 的字符串。如：/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"
n{X}	匹配包含 X 个 n 的序列的字符串。如：/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"
n{X,}	X是一个正整数，前面的模式n连续出现至少X次时匹配。如：/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"
n{x,y}	X和Y为正整数，前面的模式n连续出现至少X次，至多Y次时匹配。如：例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。
n$	匹配任何结尾为n的字符串
^n	匹配任何开头为n的字符串
?=n	匹配任何其后紧接指定字符串n的字符串
?!n	匹配任何其后没有紧接指定字符串n的字符串

特殊字符：

\	将字符变为特殊或非特殊字符。如n变为换行符\n，特殊符号(变为字符\(
(?:x)	匹配并不记住匹配项。如：/(?:foo){1,2}/  ，这里将foo作为一个整体进行匹配1到2次。
x(?=y)	匹配x仅仅在x后面跟y的时候。?=y表示字符串末尾是y
x(?!y)	匹配x仅仅在x后面不跟着y的时候。?!y表示字符串末尾不是y
x|y	匹配x或y，如 jack|rose就可以匹配到jack和rose两个字符串。
[xyz]

 

支持正则的String对象的方法

1、search()方法：检索与正则相匹配的值，搜索“regular”字符串，且不区分大小写

let n = "Welcome to my page about regular expression page!".search(/page/i);
console.log(n);  // 14

2、replace()方法：将接收字符串作为参数

<div id="demo">Welcome to my page about regular expression page</div>
<button id="btn">点我</button>
<script>
var aBtn = document.getElementById("btn");
let oDemo = document.getElementById("demo");
aBtn.onclick = function(){
  var txt = oDemo.innerHTML.replace(/page/i,"home");
  oDemo.innerHTML = txt;
}
</script>

3、match()方法：替换与正则匹配的字串

console.log("Welcome to my page aPAout expression page!".match(/pa/gi));    //["pa", "PA", "pa"]

4、split()方法：把字符串分割为字符串数组

console.log("Welcome to my page!".split(" "))    // ["Welcome", "to", "my", "page!"]

 

 

正则对象方法：

1、test()方法：用于检测字符串中指定的值，返回true或false

let m = /e/.test("Welcome")
console.log(m)    //true

2、exac()方法：用于检索字符串中的正则匹配，会返回一个数组，其中存放匹配的结果，如果未找到匹配，则返回值为null

console.log(/e/.exec("welcome"))    //["e", index: 1, input: "welcome", groups: undefined]

3、toString()方法：返回正则表达式的字符串

 

 

常用的例子整理：

1、判断字符串是否为数字、字母、下划线组成

function isValid(str) { return /^\w+$/.test(str); }
console.log(isValid("1234abd_#_"));    // false
console.log(isValid("1234abd_"));      // true
//或者写成
console.log(/^\w+$/.test("1234abd_#_"));

2、判断字符串是否全部为字母

function isLetter(str) { return /^[a-zA-Z]+$/.test(str); }
console.log(isLetter("1234abd_"));    //false
console.log(isLetter("abd"));         //true
//或者写成
console.log(/^[a-zA-Z]+$/.test("1234abd_")); 

3、判断字符串是否全部为数字

function isNum(str) { return /^\d+$/.test(str); }
console.log(isNum("1234abd_"));    //false
console.log(isNum("1234"));        //true
// 或者写成
console.log(/^\d+$/.test("1234abd_"));

/^[0-9]*$/	0-9范围内0到多个数字的组合，且字符开头结尾都是0-9的数字。即表示整数。如：23、0
/^\d{m,n}$/	匹配m-n位的数字。由于开头结尾都是数字，所以是一个固定长度的纯数字
/^\-[1-9][0-9]*$/	匹配-开头，数字结尾，第一个字符为1-9，随后0-n个字符为0-9的字符。即非零负整数。

console.log(/^[0-9]*$/.test("894532.23"))    // false
console.log(/^[0-9]*$/.test("89453223"))     // true

 

4、是否带有小数

function isDecimal(strValue){ return /^\d+\.\d+$/.test(strValue); }
console.log(isDecimal(1245.6))    //true

5、校验是否中文名称组成：

function ischina(str) { return /^[\u4E00-\u9FA5]{2,4}$/.test(str); }
console.log(ischina('我的中文'))    //true

6、校验是否全由8位数字组成：

function isNum(str) { return /^[0-9]{8}$/.test(str); }
console.log(isNum(34355465))    //false

7、校验电话号码格式：

function isTelCode(str) { return /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/.test(str); }
console.log(isTelCode(18017349082))    //true

//开头匹配手机号前三位是 13[0-9] 或 14[5|7] 或者 15[0|1|2|3|5|6|7|8|9] 或 18[0|1|2|3|5|6|7|8|9]；匹配后八位数字为0-9的字符；
console.log(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test("13456724567"))    //true

8、校验邮件地址是否合法：

function isEmail(str) { return /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(str); }
console.log(isEmail("345@qq.com"))    //true 不够严谨，还需修改

let m = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
console.log(m.test("32@qq.com"))    //true

9、校验身份证：

开头为一个1-9的数字；加上五位0-9的数字；加上一位1-9的数字；加上三位0-9的数字；加上 0/d 或者 1[0-2]，即月份 01、02……12；加上 ([0|1|2]\d) 或者 3[0-1]，即日起，01、13、25、31；加上身份证末四位；

let str = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/
console.log(str.test("234051198405054021"))    //true

 

正则小工具：https://regex101.com/#javascript