正则表达式
部分例子转自http://blog.poetries.top/2018/04/10/js-reg-review/
字符串应用正则
string.match(reg)正则查找字符串string.search(reg)正则查找位置string.replace(reg,'newstr')正则替换string.split（reg）正则拆分
1. 正则表达式3句话
1.1 要找什么字符？（5种方法）
- 字面值 比如：
hi就是找hi - 字符的集合
[abcd]匹配abdc任意一个 - 用范围来表示字符
[0-9] [a-z][A-Z] - 字符簇 就是系统为常用的字符集合创建的一个简写
- 例如：
\d表示[0-9]\w代表[0-9a-zA-Z_]\s代表[\t\v\f\r\n]（空白符）
- 例如：
- 补集的形式来表示字符集合
- 例如：
[0-9]补集[^0-9] - 对于字符簇只需把字母大写即可表示补集
\d-->\D（非数字）\w-->\W（代表a-z0-9A-Z之外的东西）\s-->\S(代表非空白字符)
- 例如：
- 点代表 任意字符 (不包括换行符)
1.2从哪里找,找到哪？
\b单词边界\bhi从单词边界开始匹配hi\B单词的非边界 把单词的中间某一部分取出来 把中间含有hi的单词取出来 即hi不能再两端^从字符串的起始位置开始匹配$匹配到字符串的额结束位置
1.3 找多少
*表示匹配0-无穷==等价(0,)+表示匹配1-无穷==等价(1,)?表示[0,1] ==等价(0,1)a(n): 字符a准确出现n次a(n,):字符a至少出现n次a(n,m):n到m次
1.4 贪婪模式
- 个数修饰符默认是贪婪模式 尽量多找
- 是指在上面的个数修饰符后面加
?，则为非贪婪模式，尽量少的找
模式：
- 以匹配为例默认情况 match找到一次就结束 能否告诉匹配过程 一直找 在全文范围内一直找
g表示全局模式 global 找所有的 而不是就找一行就结束iignore 忽略大小写s单行模式（把整篇文章看成一行）js不支持单行模式m多行模式
二、语法
2.1 基本元字符
.： 匹配除了换行符之外的任何单个字符\： 在非特殊字符之前的反斜杠表示下一个字符是特殊的|： 逻辑或操作符[]：定义一个字符集合，匹配字符集合中的一个字符，在字符集合里面像.，\这些字符都表示其本身[^]：对上面一个集合取非-：定义一个区间，例如[A-Z]，其首尾字符在ASCII字符集里面
2.2 数量元字符
{m,n}：匹配前面一个字符至少m次至多n次重复，还有{m}表示匹配m次，{m,}表示至少m次+： 匹配前面一个表达式一次或者多次，相当于{1,}，记忆方式追加(+)，起码得有一次*： 匹配前面一个表达式零次或者多次，相当于{0,}，记忆方式乘法(*)，可以一次都没有?： 单独使用匹配前面一个表达式零次或者一次，相当于{0,1}
2.3 位置元字符
^： 单独使用匹配表达式的开始\$： 匹配表达式的结束\b：匹配单词边界\B：匹配非单词边界(?=p)：匹配p前面的位置(?!p)：匹配不是p前面的位置
2.4 特殊元字符
\d：[0-9]，表示一位数字，记忆方式 digit\D：[^0-9]，表示一位非数字\s：[\t\v\n\r\f]，表示空白符，包括空格，水平制表符（\t），垂直制表符（\v），换行符（\n），回车符（\r），换页符（\f），记忆方式 space character\S：[^\t\v\n\r\f]，表示非空白符\w：[0-9a-zA-Z]，表示数字大小写字母和下划线，记忆方式 word\W：[^0-9a-zA-Z]，表示非单词字符
2.5 标志字符
g: 全局搜索 记忆方式globali：不区分大小写 记忆方式 ignorem：多行搜索
3 match,test,exec,search的返回值
3.1 match的用法
var str = "wo shi zhong" console.log(str.match(/o/)) ["o", index: 1, input: "wo shi zhong", groups: undefined]
3.2 exec的用法
var str = "wo shi zhong" var re =/o/ console.log(re.exec(str)) ["o", index: 1, input: "wo shi zhong", groups: undefined]
3.3 test的用法
var str="wo shi zhong guo ren"; var re=/o/; console.log(re.test(str)); // 返回的结果是：true（如果找不到返回的则是false）
3.4 search的用法
1 var str="wo shi zhong guo ren"; 2 var re=/o/; 3 4 //console.log(str.search(re)); 5 //1 6 7 var re = /3/ 8 //console.log(str.search(re)) 9 //-1
四、应用
4.1 例1
在线演示 https://codepen.io/poetries/pen/xWMRxR
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>正则-例子1</title> 5 <style type="text/css"> 6 textarea{ 7 width: 400px; 8 height: 200px; 9 } 10 </style> 11 </head> 12 <body> 13 <textarea id='cont'></textarea> 14 <p><input type="button" value="匹配hi" onclick="t1();"></p> 15 <p><input type="button" value="正匹配单词hi" onclick="t2();"></p> 16 <p><input type="button" value="匹配hi开头的单词但不是hi" onclick="t3();"></p> 17 18 <script type="text/javascript"> 19 function t1(){ 20 var cont = document.getElementById('cont'); 21 var cv = cont.value; 22 var reg = /hi/;//仅仅是看字符串中有没有hi 23 alert(reg.test(cv));//满足 返回true 不满足 返回false 24 } 25 function t2(){ 26 var cont = document.getElementById('cont'); 27 var cv = cont.value; 28 var reg = /\bhi\b/;//正则测试单词hi 29 alert(reg.test(cv));//满足 返回true 不满足 返回false 30 } 31 function t3(){ 32 var cont = document.getElementById('cont'); 33 var cv = cont.value; 34 var reg = /\bhi\b/;//正则测试hi开头的单词但不是hi 35 alert(reg.test(cv));//满足 返回true 不满足 返回false 36 } 37 </script> 38 </body> 39 </html>
4.2例2-要找什么字符串
在线演示 https://codepen.io/poetries/pen/oqmYNw
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>要找什么字符</title> 5 6 <style type="text/css"> 7 textarea{ 8 width: 400px; 9 height: 200px; 10 } 11 </style> 12 </head> 13 <body> 14 <textarea id='cont'></textarea> 15 <p><input type="button" value="找不好的数字" onclick="t1();"></p> 16 <p><input type="button" value="有没有数字" onclick="t2();"></p> 17 <p><input type="button" value="有没有大写字母" onclick="t3();"></p> 18 <p><input type="button" value="是否全为数字" onclick="t4();"></p> 19 20 <script type="text/javascript"> 21 function t1(){ 22 var cont = document.getElementById('cont'); 23 var cv = cont.value; 24 var reg = /[347]/;// 匹配347任意一个字符的集合[abcd] 匹配abdc任意一个 25 alert(reg.test(cv)); 26 } 27 function t2(){ 28 var cont = document.getElementById('cont'); 29 var cv = cont.value; 30 //var reg = /[0123456789]/; 31 //var reg = /[0-9]/;// 匹配有没有数字 32 var reg = /\d/;// \d 表示[0-9] 33 alert(reg.test(cv)); 34 } 35 function t3(){ 36 var cont = document.getElementById('cont'); 37 var cv = cont.value; 38 var reg = /[A-Z]/;// 匹配有没有数字 39 alert(reg.test(cv)); 40 } 41 function t4(){ 42 var cont = document.getElementById('cont'); 43 var cv = cont.value; 44 var reg = /[^0-9]/;// 匹配非数字 0-9之外的字符 对于网上发布手机号之类的很有用 比如1300 把00换成OO 就没法认出 45 if(reg.test(cv)){ 46 alert('有非数字存在'); 47 }else{ 48 alert('全是数字'); 49 } 50 } 51 </script> 52 </body> 53 </html>
4.3例子3-从哪里开始匹配
在线演示 https://codepen.io/poetries/pen/jzdVOo
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>74-从哪里开始匹配</title> 5 <style type="text/css"> 6 textarea{ 7 width: 400px; 8 height: 200px; 9 10 } 11 </style> 12 </head> 13 <body> 14 <textarea id='cont'></textarea> 15 <p><input type="button" value="匹配hi" onclick="t1();"></p> 16 <p><input type="button" value="匹配hi开头及hi开头的单词" onclick="t2();"></p> 17 <p><input type="button" value="匹配hi开头的单词但不是hi" onclick="t3();"></p> 18 <p><input type="button" value="匹配进行时的单词" onclick="t4();"></p> 19 <p><input type="button" value="匹配un前缀的反义词" onclick="t5();"></p> 20 <p><input type="button" value="匹配单词中间的hi部分" onclick="t6();"></p> 21 <p><input type="button" value="匹配输入的名字是不是lisi" onclick="t7();"></p> 22 23 24 <script type="text/javascript"> 25 function t1(){ 26 var cont = document.getElementById('cont'); 27 var cv = cont.value; 28 var reg = /hi/;//仅仅是看字符串中有没有hi 29 alert(reg.test(cv));//满足 返回true 不满足 返回false 30 } 31 function t2(){ 32 var cont = document.getElementById('cont'); 33 var cv = cont.value; 34 //var reg = /\bhi.+/;// 错误1 匹配hi开头的单词 35 ////var reg = /\bhi\w+/;// 错误2 36 var reg = /\bhi\w*/; 37 alert(reg.exec(cv));//exec返回一个对象 没找到返回none 38 } 39 function t3(){ 40 var cont = document.getElementById('cont'); 41 var cv = cont.value; 42 var reg = /\bhi/;//正则测试hi开头的单词但不是hi 43 alert(reg.exec(cv));//exec返回一个对象 没找到返回none 44 } 45 function t4(){ 46 var cont = document.getElementById('cont'); 47 var cv = cont.value; 48 var reg = /\b[\w]+ing\b/;//*表示匹配0-无穷 +表示匹配1-无穷 49 alert(reg.exec(cv)); 50 } 51 function t5(){ 52 var cont = document.getElementById('cont'); 53 var cv = cont.value; 54 var reg = /\bun[\w]+\b/;//匹配un前缀的反义词 55 alert(reg.exec(cv)); 56 } 57 function t6(){ 58 var cont = document.getElementById('cont'); 59 var cv = cont.value; 60 var reg = /\Bhi\B/;//匹配单词中间的hi部分 61 alert(reg.exec(cv)); 62 } 63 function t7(){ 64 var cont = document.getElementById('cont'); 65 var cv = cont.value; 66 var reg = /^lisi$/;//匹配输入的名字是不是lisi 67 alert(reg.exec(cv)); 68 } 69 </script> 70 </body> 71 </html>
4.4 例4 正则应用字符串
在线演示 https://codepen.io/poetries/pen/dmaOPz
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>正则应用字符串</title> 5 <style type="text/css"> 6 textarea{ 7 width: 400px; 8 height: 200px; 9 } 10 </style> 11 12 </head> 13 <body> 14 <textarea id='cont'></textarea> 15 <p><input type="button" value="查找中间含有hi的单词" onclick="t1();"></p> 16 <p><input type="button" value="查找所有中间含有hi的单词" onclick="t2();"></p> 17 <p><input type="button" value="查找所有中间含有hi的单词，不区分大小写" onclick="t3();"></p> 18 <p><input type="button" value="替换JavaScript标签" onclick="t4();"></p> 19 <p><input type="button" value="把连接换成空连接" onclick="t5();"></p> 20 <p><input type="button" value="把每一行的结尾的数字换成#" onclick="t6();"></p> 21 <p><input type="button" value="替换goods中多余的O" onclick="t7();"></p> 22 23 <script type="text/javascript"> 24 function t1(){ 25 var cont = document.getElementById('cont'); 26 var cv = cont.value; 27 var reg = /\Bhi\B/;//查找中间含有hi的单词 28 alert(cv.match(reg)); 29 } 30 function t2(){ 31 var cont = document.getElementById('cont'); 32 var cv = cont.value; 33 var reg = /\Bhi\B/g;//查找所有中间含有hi的单词 34 alert(cv.match(reg)); 35 } 36 function t3(){ 37 var cont = document.getElementById('cont'); 38 var cv = cont.value; 39 var reg = /\Bhi\B/gi;//查找所有中间含有hi的单词 g是全局 i ignore 忽略大小写 40 alert(cv.match(reg)); 41 } 42 function t4(){ 43 var cont = document.getElementById('cont'); 44 var cv = cont.value; 45 var reg = /<script.*<\/script>/;//替换JavaScript标签 46 alert(cv.replace(reg,'哈哈哈')); 47 } 48 function t5(){ 49 var cont = document.getElementById('cont'); 50 var cv = cont.value; 51 /* 52 . 代表任意,但不包括换行 53 可以用一对反义词来匹配所有. \d\D等 54 不能跨行（贪婪模式） 55 */ 56 57 var reg = /<a[\s]+[\d\D]*<\/a>/; //正则替换链接 58 alert(cv.replace(reg,'<a href="#">文字</a>')); 59 } 60 function t6(){ 61 var cont = document.getElementById('cont'); 62 var cv = cont.value; 63 var reg = /\d+$/gm;//把每一行的结尾的数字换成# m 多行模式 64 alert(cv.replace(reg,'#')); 65 } 66 function t7(){ 67 var cont = document.getElementById('cont'); 68 var cv = cont.value; 69 var reg = /go{3,}?ds/;//替换goods中多余的O 70 alert(cv.replace(reg,'goods')); 71 } 72 </script> 73 </body> 74 </html>
4.5 例5-预查
在线演示 https://codepen.io/poetries/pen/MVLbwW
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>预查</title> 5 6 <style type="text/css"> 7 textarea{ 8 width: 400px; 9 height: 200px; 10 } 11 </style> 12 13 </head> 14 <body> 15 <textarea id='cont'></textarea> 16 <p><input type="button" value="匹配进行时的单词" onclick="t1();"></p> 17 <p><input type="button" value="匹配进行时的单词的词根部分,正向预查" onclick="t2();"></p> 18 <p><input type="button" value="查找winxp,负向预查" onclick="t3();"></p> 19 <p><input type="button" value="找出un*系列单词的词根" onclick="t4();"></p> 20 21 <script type="text/javascript"> 22 function t1(){ 23 var cont = document.getElementById('cont'); 24 var cv = cont.value; 25 var reg = /\b[\w]+ing\b/; 26 alert(cv.match(reg)); 27 } 28 function t2(){ 29 var cont = document.getElementById('cont'); 30 var cv = cont.value; 31 var reg = /\b[\w]+(?=ing)/g;//匹配进行时的单词的词根部分 不要ing结尾 预查不消耗字符 32 alert(cv.match(reg)); 33 } 34 function t3(){ 35 var cont = document.getElementById('cont'); 36 var cv = cont.value; 37 var reg = /\bwin(?!95)/g;//win98 win97 win95 win32 winxp win2003要求把win95过滤 38 alert(cv.match(reg)); 39 } 40 function t4(){ 41 var cont = document.getElementById('cont'); 42 var cv = cont.value; 43 //var reg = /\w+(?<=un)/g;//找出un*系列单词的词根 js不支持向前正向预查 44 alert(cv.match(reg)); 45 } 46 47 </script> 48 </body> 49 </html>
4.6 例6-反向引用
在线演示 https://codepen.io/poetries/pen/LdqbVL
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>反向引用</title> 5 6 <style type="text/css"> 7 textarea{ 8 width: 400px; 9 height: 200px; 10 } 11 </style> 12 13 </head> 14 <body> 15 <textarea id='cont'></textarea> 16 <p><input type="button" value="把连接换成空连接，保留文字" onclick="t1();"></p> 17 18 <script type="text/javascript"> 19 function t1(){ 20 var cont = document.getElementById('cont'); 21 var cv = cont.value; 22 var reg = /<a[\s]+[^>]+>([^<>]+)<\/a>/; //链接表达式 这个一部分是子表达式 ([^<>]+) 23 // alert(reg.exec(cv)); 24 25 alert(cv.replace(reg,'<a href="#"">$1</a>')); 26 } 27 </script> 28 </body> 29 </html>
4.7 例7-正则练习
在线演示 https://codepen.io/poetries/pen/dmaOYV
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>正则练习</title> 5 <style type="text/css"> 6 textarea{ 7 width: 400px; 8 height: 200px; 9 } 10 </style> 11 12 </head> 13 <body> 14 <textarea id='cont'></textarea> 15 <p><input type="button" value="1-找首尾相同的单词" onclick="t1();"></p> 16 <p><input type="button" value="2-手机号第4位到第七位换成*" onclick="t2();"></p> 17 <p><input type="button" value="3-统一空格" onclick="t3();"></p> 18 <p><input type="button" value="4-把名字中的,去掉" onclick="t4();"></p> 19 <p><input type="button" value="5-把aaabb换成ab" onclick="t5();"></p> 20 21 <script type="text/javascript"> 22 function t1(){ 23 var cont = document.getElementById('cont'); 24 var cv = cont.value; 25 var reg = /\b([\w])[\w]*\1\b/g;// \1注意引用方式 [\w]任意一个 [\w]*任意多个 找首尾相同的单词 26 /** 27 * *如何引用子表达式所匹配的结果？ 28 * 29 * 答： 在表达式内部 反向引用时 \n来匹配第N个子表达式的结果 子表达式当成变量来传递时，$N来匹配第N个子表达式的匹配结果 30 * 31 */ 32 alert(cv.match(reg)); 33 } 34 function t2(){ 35 var cont = document.getElementById('cont'); 36 var cv = cont.value; 37 var reg = /(1(3|5|8|)\d)\d{4}(\d{4})/;//字表达式(3|5|8|) (\d{4}) {4}代表任意4个 38 // alert(cv.match(reg));//打印结果18878553070，188，3070 39 alert(cv.replace(reg,'$1****$3'));//188****4070 40 } 41 function t3(){ 42 var cont = document.getElementById('cont'); 43 var cv = cont.value; 44 var reg = /[ \t\u3000]+/g;//找空白符 第一个是半角的空格 \s包含所有空白符 \u3000表示 全角空格的16进制Unicode编码 45 alert(cv.replace(reg,','));// 46 } 47 function t4(){ 48 var cont = document.getElementById('cont'); 49 var cv = cont.value; 50 var reg = /([\u4E00-\u9FA0]),([\u4E00-\u9FA0])/g; // 找中文用Unicode编码表的中文范围 51 alert(cv.replace(reg,',')); 52 } 53 function t5(){ 54 var cont = document.getElementById('cont'); 55 var cv = cont.value; 56 var reg = //; 57 alert(cv.replace(reg,',')); 58 } 59 </script> 60 </body> 61 </html>
4.8 例8-常用正则
在线演示 https://codepen.io/poetries/pen/GxzNoG
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>常用正则解答</title> 5 <script type="text/javascript"> 6 function t1(){ 7 var cont = document.getElementById('cont'); 8 var cv = cont.value; 9 var reg = /(\w)\1+/g; //查找连续多个字符 把aaabbccdd换成abcd这个格式 10 /**\1 后向引用，表示表达式中，从左往右数，第一个左括号对应的括号内的内容。 11 以此类推，\2表示第二个，\0表示整个表达式**/ 12 alert(cv.replace(reg,'$1')); 13 } 14 function t2(){ 15 var cont = document.getElementById('cont'); 16 var cv = cont.value; 17 //手机号正则： 18 //1开头 19 //358第二位 20 //后九位 21 var reg = /1[358]\d{9}/g; // 这种情况适合在一段文本中分析出手机号 22 alert(cv.match(reg));//分析手机号 23 } 24 function t3(){ 25 var cont = document.getElementById('cont'); 26 var cv = cont.value; 27 var reg = /^1[358]\d{9}$/g; 28 alert(reg.test(cv));// test 验证手机号 29 } 30 function t4(){ 31 var cont = document.getElementById('cont'); 32 var cv = cont.value; 33 var reg = /^\s+|\s+$/g; // | 并列 或者 去除两端空格 34 alert('--'+cv.replace(reg,'')+'--'); 35 } 36 //借助正则限制在一个有限范围内 防止sql注入 37 function t5(){ 38 var cont = document.getElementById('cont'); 39 var cv = cont.value; 40 var reg = /^[\w\u4E00-\u9FA0]{4,16}$/; // \u4E00-\u9FA0 中文对应的Unicode编码 验证由字母数字下划线中文组合的4-16位用户名 41 alert(reg.test(cv)); 42 } 43 function t6(){ 44 var cont = document.getElementById('cont'); 45 var cv = cont.value; 46 var reg = /^[0-9a-zA-Z]\w*(\.[\w]+)*@[0-9a-zA-Z\-]+(\.[\w]+)+$/; 47 alert(reg.test(cv)); 48 } 49 function t7(){ 50 var cont = document.getElementById('cont'); 51 var cv = cont.value; 52 var reg = //; 53 alert(cv.replace(reg,'')); 54 } 55 </script> 56 </head> 57 <body> 58 <textarea id='cont'></textarea> 59 <p><input type="button" value="1-替换相同字符串" onclick="t1();"></p> 60 <p><input type="button" value="2-分析出手机号" onclick="t2();"></p> 61 <p><input type="button" value="3-验证手机号" onclick="t3();"></p> 62 <p><input type="button" value="4-去除两端空格" onclick="t4();"></p> 63 <p><input type="button" value="5-验证由字母数字下划线中文组合的4-16位用户名" onclick="t5();"></p> 64 <p><input type="button" value="6-验证邮箱" onclick="t6();"></p> 65 <p><input type="button" value="7-清空script代码" onclick="t7();"></p> 66 67 </body> 68 </html>
常用校验规则
1 /*是否带有小数*/ 2 function isDecimal(strValue ) { 3 var objRegExp= /^\d+\.\d+$/; 4 return objRegExp.test(strValue); 5 } 6 7 /*校验是否中文名称组成 */ 8 function ischina(str) { 9 var reg=/^[\u4E00-\u9FA5]{2,4}$/; /*定义验证表达式*/ 10 return reg.test(str); /*进行验证*/ 11 } 12 13 /*校验是否全由8位数字组成 */ 14 function isStudentNo(str) { 15 var reg=/^[0-9]{8}$/; /*定义验证表达式*/ 16 return reg.test(str); /*进行验证*/ 17 } 18 19 /*校验电话码格式 */ 20 function isTelCode(str) { 21 var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/; 22 return reg.test(str); 23 } 24 25 /*校验邮件地址是否合法 */ 26 function IsEmail(str) { 27 var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 28 return reg.test(str); 29 }
https://any86.github.io/any-rule/常用正则大全
浙公网安备 33010602011771号