正则回顾总结
- 邮箱验证
- 用户名验证
- 替换字符串某一部分
- 信息采集 用来分析有效的代码段
1.2 字符串应用正则
-
string.match(reg)正则查找字符串 -
string.search(reg)正则查找位置 -
string.replace(reg,'newstr')正则替换 -
string.split（reg）正则拆分
1.3 正则表达式3句话
1.3.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.3.2 从哪里找,找到哪？
-
/b单词边界/bhi从单词边界开始匹配hi -
/B单词的非边界 把单词的中间某一部分取出来 把中间含有hi的单词取出来 即hi不能再两端 -
^从字符串的起始位置开始匹配 -
$匹配到字符串的额结束位置
1.3.3 找多少
-
*表示匹配0-无穷==等价(0,) -
+表示匹配1-无穷==等价(1,) -
?表示[0,1] ==等价(0,1) -
a(n): 字符a准确出现n次 -
a(n,):字符a至少出现n次 -
a(n,m):n到m次
1.3 贪婪模式
- 个数修饰符默认是贪婪模式 尽量多找
-
是指在上面的个数修饰符后面加
?，则为非贪婪模式，尽量少的找
模式：
- 以匹配为例默认情况 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: 全局搜索 记忆方式global -
i：不区分大小写 记忆方式 ignore -
m：多行搜索
三、match，test，exec，search的返回值
3.1 match的用法
在不加全局“g”的情况下
var str="wo shi zhong guo ren"; console.log(str.match(/o/)); // 返回的结果是：["o", index: 1, input: "wo shi zhong guo ren"]；
在加全局“g”的情况下
var str="wo shi zhong guo ren"; console.log(str.match(/o/g)); 返回的结果是：["o", "o", "o"]；
3.2 exec的用法
var str="wo shi zhong guo ren"; var re=/o/; console.log(re.exec(str)); // 返回的结果是：["o", index: 1, input: "wo shi zhong guo ren"]； // exec返回的和match不加全局“g”’一样
3.3 test的用法
var str="wo shi zhong guo ren"; var re=/o/; console.log(re.test(str)); // 返回的结果是：true（如果找不到返回的则是false）
3.4 search的用法
- 关于search用法其实很简单，它和indexOf是一样的，就是找到index，而且是从前往后数的。
var str="wo shi zhong guo ren"; var re=/o/; console.log(str.search(re)); 返回的结果是：1；
四、应用
4.1 例1
在线演示 https://codepen.io/poetries/pen/xWMRxR
<html>
<head>
<meta charset="UTF-8">
<title>正则-例子1</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="匹配hi" onclick="t1();"></p>
<p><input type="button" value="正匹配单词hi" onclick="t2();"></p>
<p><input type="button" value="匹配hi开头的单词但不是hi" onclick="t3();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /hi/;//仅仅是看字符串中有没有hi
alert(reg.test(cv));//满足 返回true 不满足 返回false
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //bhi/b/;//正则测试单词hi
alert(reg.test(cv));//满足 返回true 不满足 返回false
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //bhi/b/;//正则测试hi开头的单词但不是hi
alert(reg.test(cv));//满足 返回true 不满足 返回false
}
</script>
</body>
</html>
4.2 例2-要找什么字符串
在线演示 https://codepen.io/poetries/pen/oqmYNw
<html>
<head>
<meta charset="UTF-8">
<title>要找什么字符</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="找不好的数字" onclick="t1();"></p>
<p><input type="button" value="有没有数字" onclick="t2();"></p>
<p><input type="button" value="有没有大写字母" onclick="t3();"></p>
<p><input type="button" value="是否全为数字" onclick="t4();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /[347]/;// 匹配347任意一个字符的集合[abcd] 匹配abdc任意一个
alert(reg.test(cv));
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
//var reg = /[0123456789]/;
//var reg = /[0-9]/;// 匹配有没有数字
var reg = //d/;// /d 表示[0-9]
alert(reg.test(cv));
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /[A-Z]/;// 匹配有没有数字
alert(reg.test(cv));
}
function t4(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /[^0-9]/;// 匹配非数字 0-9之外的字符 对于网上发布手机号之类的很有用 比如1300 把00换成OO 就没法认出
if(reg.test(cv)){
alert('有非数字存在');
}else{
alert('全是数字');
}
}
</script>
</body>
</html>
4.3 例3-从哪里开始匹配
在线演示 https://codepen.io/poetries/pen/jzdVOo
<html>
<head>
<meta charset="UTF-8">
<title>74-从哪里开始匹配</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="匹配hi" onclick="t1();"></p>
<p><input type="button" value="匹配hi开头及hi开头的单词" onclick="t2();"></p>
<p><input type="button" value="匹配hi开头的单词但不是hi" onclick="t3();"></p>
<p><input type="button" value="匹配进行时的单词" onclick="t4();"></p>
<p><input type="button" value="匹配un前缀的反义词" onclick="t5();"></p>
<p><input type="button" value="匹配单词中间的hi部分" onclick="t6();"></p>
<p><input type="button" value="匹配输入的名字是不是lisi" onclick="t7();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /hi/;//仅仅是看字符串中有没有hi
alert(reg.test(cv));//满足 返回true 不满足 返回false
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
//var reg = //bhi.+/;// 错误1 匹配hi开头的单词
////var reg = //bhi/w+/;// 错误2
var reg = //bhi/w*/;
alert(reg.exec(cv));//exec返回一个对象 没找到返回none
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //bhi/;//正则测试hi开头的单词但不是hi
alert(reg.exec(cv));//exec返回一个对象 没找到返回none
}
function t4(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //b[/w]+ing/b/;//*表示匹配0-无穷 +表示匹配1-无穷
alert(reg.exec(cv));
}
function t5(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //bun[/w]+/b/;//匹配un前缀的反义词
alert(reg.exec(cv));
}
function t6(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //Bhi/B/;//匹配单词中间的hi部分
alert(reg.exec(cv));
}
function t7(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /^lisi$/;//匹配输入的名字是不是lisi
alert(reg.exec(cv));
}
</script>
</body>
</html>
4.4 例4 正则应用字符串
在线演示 https://codepen.io/poetries/pen/dmaOPz
<html>
<head>
<meta charset="UTF-8">
<title>正则应用字符串</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="查找中间含有hi的单词" onclick="t1();"></p>
<p><input type="button" value="查找所有中间含有hi的单词" onclick="t2();"></p>
<p><input type="button" value="查找所有中间含有hi的单词，不区分大小写" onclick="t3();"></p>
<p><input type="button" value="替换JavaScript标签" onclick="t4();"></p>
<p><input type="button" value="把连接换成空连接" onclick="t5();"></p>
<p><input type="button" value="把每一行的结尾的数字换成#" onclick="t6();"></p>
<p><input type="button" value="替换goods中多余的O" onclick="t7();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //Bhi/B/;//查找中间含有hi的单词
alert(cv.match(reg));
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //Bhi/B/g;//查找所有中间含有hi的单词
alert(cv.match(reg));
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //Bhi/B/gi;//查找所有中间含有hi的单词 g是全局 i ignore 忽略大小写
alert(cv.match(reg));
}
function t4(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /<script.*<//script>/;//替换JavaScript标签
alert(cv.replace(reg,'哈哈哈'));
}
function t5(){
var cont = document.getElementById('cont');
var cv = cont.value;
/*
. 代表任意,但不包括换行
可以用一对反义词来匹配所有. /d/D等
不能跨行（贪婪模式）
*/
var reg = /<a[/s]+[/d/D]*<//a>/; //正则替换链接
alert(cv.replace(reg,'<a href="#">文字</a>'));
}
function t6(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //d+$/gm;//把每一行的结尾的数字换成# m 多行模式
alert(cv.replace(reg,'#'));
}
function t7(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /go{3,}?ds/;//替换goods中多余的O
alert(cv.replace(reg,'goods'));
}
</script>
</body>
</html>
4.5 例5-预查
在线演示 https://codepen.io/poetries/pen/MVLbwW
<html>
<head>
<meta charset="UTF-8">
<title>预查</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="匹配进行时的单词" onclick="t1();"></p>
<p><input type="button" value="匹配进行时的单词的词根部分,正向预查" onclick="t2();"></p>
<p><input type="button" value="查找winxp,负向预查" onclick="t3();"></p>
<p><input type="button" value="找出un*系列单词的词根" onclick="t4();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //b[/w]+ing/b/;
alert(cv.match(reg));
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //b[/w]+(?=ing)/g;//匹配进行时的单词的词根部分 不要ing结尾 预查不消耗字符
alert(cv.match(reg));
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //bwin(?!95)/g;//win98 win97 win95 win32 winxp win2003要求把win95过滤
alert(cv.match(reg));
}
function t4(){
var cont = document.getElementById('cont');
var cv = cont.value;
//var reg = //w+(?<=un)/g;//找出un*系列单词的词根 js不支持向前正向预查
alert(cv.match(reg));
}
</script>
</body>
</html>
4.6 例6-反向引用
在线演示 https://codepen.io/poetries/pen/LdqbVL
<html>
<head>
<meta charset="UTF-8">
<title>反向引用</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="把连接换成空连接，保留文字" onclick="t1();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /<a[/s]+[^>]+>([^<>]+)<//a>/; //链接表达式 这个一部分是子表达式 ([^<>]+)
// alert(reg.exec(cv));
alert(cv.replace(reg,'<a href="#"">$1</a>'));
}
</script>
</body>
</html>
4.7 例7-正则练习
在线演示 https://codepen.io/poetries/pen/dmaOYV
<html>
<head>
<meta charset="UTF-8">
<title>正则练习</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="1-找首尾相同的单词" onclick="t1();"></p>
<p><input type="button" value="2-手机号第4位到第七位换成*" onclick="t2();"></p>
<p><input type="button" value="3-统一空格" onclick="t3();"></p>
<p><input type="button" value="4-把名字中的,去掉" onclick="t4();"></p>
<p><input type="button" value="5-把aaabb换成ab" onclick="t5();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //b([/w])[/w]*/1/b/g;// /1注意引用方式 [/w]任意一个 [/w]*任意多个 找首尾相同的单词
/**
* *如何引用子表达式所匹配的结果？
*
* 答： 在表达式内部 反向引用时 /n来匹配第N个子表达式的结果 子表达式当成变量来传递时，$N来匹配第N个子表达式的匹配结果
*
*/
alert(cv.match(reg));
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /(1(3|5|8|)/d)/d{4}(/d{4})/;//字表达式(3|5|8|) (/d{4}) {4}代表任意4个
// alert(cv.match(reg));//打印结果18878553070，188，3070
alert(cv.replace(reg,'$1****$3'));//188****4070
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /[ /t/u3000]+/g;//找空白符 第一个是半角的空格 /s包含所有空白符 /u3000表示 全角空格的16进制Unicode编码
alert(cv.replace(reg,','));//
}
function t4(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /([/u4E00-/u9FA0]),([/u4E00-/u9FA0])/g; // 找中文用Unicode编码表的中文范围
alert(cv.replace(reg,','));
}
function t5(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //;
alert(cv.replace(reg,','));
}
</script>
</body>
</html>
4.8 例8-常用正则
在线演示 https://codepen.io/poetries/pen/GxzNoG
<html>
<head>
<meta charset="UTF-8">
<title>常用正则解答</title>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /(/w)/1+/g; //查找连续多个字符 把aaabbccdd换成abcd这个格式
/**/1 后向引用，表示表达式中，从左往右数，第一个左括号对应的括号内的内容。
以此类推，/2表示第二个，/0表示整个表达式**/
alert(cv.replace(reg,'$1'));
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
//手机号正则：
//1开头
//358第二位
//后九位
var reg = /1[358]/d{9}/g; // 这种情况适合在一段文本中分析出手机号
alert(cv.match(reg));//分析手机号
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /^1[358]/d{9}$/g;
alert(reg.test(cv));// test 验证手机号
}
function t4(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /^/s+|/s+$/g; // | 并列 或者 去除两端空格
alert('--'+cv.replace(reg,'')+'--');
}
//借助正则限制在一个有限范围内 防止sql注入
function t5(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /^[/w/u4E00-/u9FA0]{4,16}$/; // /u4E00-/u9FA0 中文对应的Unicode编码 验证由字母数字下划线中文组合的4-16位用户名
alert(reg.test(cv));
}
function t6(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /^[0-9a-zA-Z]/w*(/.[/w]+)*@[0-9a-zA-Z/-]+(/.[/w]+)+$/;
alert(reg.test(cv));
}
function t7(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //;
alert(cv.replace(reg,''));
}
</script>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="1-替换相同字符串" onclick="t1();"></p>
<p><input type="button" value="2-分析出手机号" onclick="t2();"></p>
<p><input type="button" value="3-验证手机号" onclick="t3();"></p>
<p><input type="button" value="4-去除两端空格" onclick="t4();"></p>
<p><input type="button" value="5-验证由字母数字下划线中文组合的4-16位用户名" onclick="t5();"></p>
<p><input type="button" value="6-验证邮箱" onclick="t6();"></p>
<p><input type="button" value="7-清空script代码" onclick="t7();"></p>
</body>
</html>
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
