+-
首页 专栏 javascript 文章详情
shasha 发布于 1 月 13 日
关注作者
关注作者
0
day13 正则表达式
shasha 发布于 1 月 13 日
1. 正则表达式
正则表达式 (regular expression) 是一个描述字符规则的对象。如：只能出现字母，只能出现数字，前三个必须是数字等。
前端往往有大量的表单数据校验的工作，采用正则表达式会使得数据校验的工作量大大减轻，如邮箱验证，手机号码，等等。比起用字符串的函数来判断，更简单易用。
正则表达式的组成：普通字符 或者 特殊字符。
定义：
（1）字面量
var reg = /普通字符或者特殊字符/【修饰符】
var reg = /a/;//至少包含一个a
console.log(reg.test('ab'));//true（2）构造方法
var reg = new RegExp("普通字符或者特殊字符",【修饰符】);
规则：
普通字符:看起来是啥就是啥；特殊字符:具有特殊含义的字符 ；
a.单个字符^：正则开始
$ : 正则结束
^$同时存在代表只能 . : 元字符, 表示任意一个字符反斜杠: 表示转义字符 反斜杠.表示.
转义字符:对于没有超能力的字符，赋予能力 对于有超能力的字符，取消能力 +： 表示其前面紧挨着的字符至少出现1次 等价{1,} 星号：表示其前面出现的字符至少出现过0次 等价{0,} ?: 表示其前面出现的字符至少出现过0次，至多1次 等价{0,1} | : 表示或者b.各种括号
{m,n}表示括号前面紧挨着的字符至少出现m个，至多出现n个
以b开头 至少3个a 至多5个a /^ba{3,5}&/ {m}表示括号前面紧挨着的字符只能出现m个 {m,}表示括号前面紧挨着的字符至少出现m个 [] 表示括号内的任意一个字符 [a-z]表示任意一个小写字母 [a-zA-Z0-9]1表示非括号内的任意一个字符
()一般与或连用 表示优先级 [u4e00-u9fa5] 任意一个中文字符c.组合字符
d: 0-9之间的任意一个数字 d只占一个位置 D: 除了d w: 数字，字母 ，下划线 0-9 a-z A-Z _ W: 除了w s: 空格或者空白等 S: 除了s注意：
转义字符:对于没有超能力的字符，赋予能力；对于有超能力的字符，取消能力； [ ]另一种或 内部的内容被去掉超能力；<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text"/>
<button type="button">测试</button>
</body>
</html>
<script type="text/javascript">
var oBtn = document.querySelector('button');
var oText = document.querySelector('input');
oBtn.onclick = function(){
var reg= /a/;//至少包含一个a
reg= /asd/;//至少包含一个asd
// 只能包含一个a
reg = /^a$/;
//以b开头 至少3个a 至多5个a
reg = /^ba{3,5}$/;
// 6个5
reg = /^5{6}$/;
//邮编 6位数字
reg = /^\d{6}$/;
//定义一个由字母或数字或下划线组成的用户名 范围在6,18之间
reg= /^\w{6,18}$/;
//定义一个由字母或数字或下划线组成的用户名 开头不能是数字 范围在6,18之间
reg= /^\D\w{5,17}$/;
//定义一个密码 至少6位
reg= /^.{6,}$/;
// www.baidu.com
reg = /^www.baidu.com$/;//此处的.可以是任意字符
//转义字符\:对于没有超能力的字符，赋予能力
// 对于有超能力的字符，取消能力
reg = /^www\.baidu\.com$/;//\.表示真正的点
reg = /^3\+5$/;// //3+5 斜杠+代表真正的+
//以 13 或 15 或17 开头的11位的手机号
reg = /^1(3|5|7)\d{9}$/;
reg = /^(13|15|17)\d{9}$/;
//[]另一种或 去掉超能力
reg = /^[a1,b3+.]$/;//中括号里的点没有超能力 a或1或逗号或b或3或+或点
reg = /^[0-9A-Za-z]$/;//数字或字母 0-9代表0到9
reg = /^1[357]\d{9}$/;
//两个中文
reg = /^[\u4e00-\u9fa5]{2}$/;
// 空格
reg = /^ $/;
//[^ ]表示非括号内的任意一个字符
reg = /^[^1ab3]$/;//方括号里的^代表非
console.log(reg.test(oText.value));
}
</script>
表单验证
action:提交的服务器文件method:提交的方式
get 默认为get 效率高 安全性低 五菱宏光 post 效率低 安全性高 武装押运<form action="ok.html" method="get">
</form><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="ok.html" method="get">
ID:<input type="text"/><span></span><br>
PWD:<input type="text"/><span></span><br>
<input type="submit" value="提交"/>
</form>
</body>
</html>
<script type="text/javascript">
var regId = /^\D\w{5,17}/;
var regPwd = /^.{6,}$/;
var oInputs = document.querySelectorAll('input');
var oF = document.querySelector('form');
var flagId = false;
var flagPwd = false;
oInputs[0].onblur = function(){
if(regId.test(this.value)){
this.nextElementSibling.innerHTML = 'ID格式正确';
flagId = true;
}else{
this.nextElementSibling.innerHTML = 'ID格式错误';
flagId = false;
}
}
oInputs[1].onblur = function(){
if(regPwd.test(this.value)){
this.nextElementSibling.innerHTML = 'PWD格式正确';
flagPwd = true;
}else{
this.nextElementSibling.innerHTML = 'PWD格式错误';
flagPwd = false;
}
}
oF.onsubmit = function(){
if(flagId && flagPwd){
return true;
}else {
return false;
}
}
</script>正则中的相关方法和属性
方法：
test()
检验一个字符串是否符合某一个正则规范，如果符合返回true,否则返回false 用法: reg.test(str)exec()
根据正则表达式查找，结果满足,会返回一个长度为1的数组（数组只有一个值） reg.exec(str) g全局属性 var reg = /\d/g;
var arr = reg.exec('1a2b3c')
console.log(arr[0]);//1
arr = reg.exec('1a2b3c')
console.log(arr[0]);//2 全局属性g 正则中相关字符串的方法:
search方法
返回与正则表达式查找内容匹配的第一个子字符串的位置 用法: str.search(reg) i 忽略字母大小写 var str = "wo shi ge bi de lao wang";
var reg1 =/sh/;
console.log(str.search(reg1));//3
var reg2 = /GE/i;//i忽略大小写
console.log(str.search(reg2));//7match 方法
使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。 用法：str.match(rgExp) var reg = /\d+/g;
var str = "123a4356a987";
console.log(str.match(reg)[0]);//123
console.log(str.match(reg)[1]);//4356
console.log(str.match(reg)[2]);//987replace 方法
返回根据正则表达式进行文字替换后的字符串的复制。 用法：stringObj.replace(rgExp,replaceText) var reg = /laowang/g;
var str = "laowang的隔壁也住着laowang";
console.log(str.replace(reg,"dahuang"));//dahuang的隔壁也住着dahuang javascript
阅读 39 发布于 1 月 13 日
赞 收藏
分享
本作品系原创， 采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
shasha
16 声望
1 粉丝
0 条评论
得票 时间
提交评论
shasha
16 声望
1 粉丝
宣传栏
▲
1. 正则表达式
正则表达式 (regular expression) 是一个描述字符规则的对象。如：只能出现字母，只能出现数字，前三个必须是数字等。
前端往往有大量的表单数据校验的工作，采用正则表达式会使得数据校验的工作量大大减轻，如邮箱验证，手机号码，等等。比起用字符串的函数来判断，更简单易用。
正则表达式的组成：普通字符 或者 特殊字符。
定义：
（1）字面量
var reg = /普通字符或者特殊字符/【修饰符】
var reg = /a/;//至少包含一个a
console.log(reg.test('ab'));//true（2）构造方法
var reg = new RegExp("普通字符或者特殊字符",【修饰符】);
规则：
普通字符:看起来是啥就是啥；特殊字符:具有特殊含义的字符 ；
a.单个字符^：正则开始
$ : 正则结束
^$同时存在代表只能 . : 元字符, 表示任意一个字符反斜杠: 表示转义字符 反斜杠.表示.
转义字符:对于没有超能力的字符，赋予能力 对于有超能力的字符，取消能力 +： 表示其前面紧挨着的字符至少出现1次 等价{1,} 星号：表示其前面出现的字符至少出现过0次 等价{0,} ?: 表示其前面出现的字符至少出现过0次，至多1次 等价{0,1} | : 表示或者b.各种括号
{m,n}表示括号前面紧挨着的字符至少出现m个，至多出现n个
以b开头 至少3个a 至多5个a /^ba{3,5}&/ {m}表示括号前面紧挨着的字符只能出现m个 {m,}表示括号前面紧挨着的字符至少出现m个 [] 表示括号内的任意一个字符 [a-z]表示任意一个小写字母 [a-zA-Z0-9]1表示非括号内的任意一个字符
()一般与或连用 表示优先级 [u4e00-u9fa5] 任意一个中文字符c.组合字符
d: 0-9之间的任意一个数字 d只占一个位置 D: 除了d w: 数字，字母 ，下划线 0-9 a-z A-Z _ W: 除了w s: 空格或者空白等 S: 除了s注意：
转义字符:对于没有超能力的字符，赋予能力；对于有超能力的字符，取消能力； [ ]另一种或 内部的内容被去掉超能力；<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text"/>
<button type="button">测试</button>
</body>
</html>
<script type="text/javascript">
var oBtn = document.querySelector('button');
var oText = document.querySelector('input');
oBtn.onclick = function(){
var reg= /a/;//至少包含一个a
reg= /asd/;//至少包含一个asd
// 只能包含一个a
reg = /^a$/;
//以b开头 至少3个a 至多5个a
reg = /^ba{3,5}$/;
// 6个5
reg = /^5{6}$/;
//邮编 6位数字
reg = /^\d{6}$/;
//定义一个由字母或数字或下划线组成的用户名 范围在6,18之间
reg= /^\w{6,18}$/;
//定义一个由字母或数字或下划线组成的用户名 开头不能是数字 范围在6,18之间
reg= /^\D\w{5,17}$/;
//定义一个密码 至少6位
reg= /^.{6,}$/;
// www.baidu.com
reg = /^www.baidu.com$/;//此处的.可以是任意字符
//转义字符\:对于没有超能力的字符，赋予能力
// 对于有超能力的字符，取消能力
reg = /^www\.baidu\.com$/;//\.表示真正的点
reg = /^3\+5$/;// //3+5 斜杠+代表真正的+
//以 13 或 15 或17 开头的11位的手机号
reg = /^1(3|5|7)\d{9}$/;
reg = /^(13|15|17)\d{9}$/;
//[]另一种或 去掉超能力
reg = /^[a1,b3+.]$/;//中括号里的点没有超能力 a或1或逗号或b或3或+或点
reg = /^[0-9A-Za-z]$/;//数字或字母 0-9代表0到9
reg = /^1[357]\d{9}$/;
//两个中文
reg = /^[\u4e00-\u9fa5]{2}$/;
// 空格
reg = /^ $/;
//[^ ]表示非括号内的任意一个字符
reg = /^[^1ab3]$/;//方括号里的^代表非
console.log(reg.test(oText.value));
}
</script>
表单验证
action:提交的服务器文件method:提交的方式
get 默认为get 效率高 安全性低 五菱宏光 post 效率低 安全性高 武装押运<form action="ok.html" method="get">
</form><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="ok.html" method="get">
ID:<input type="text"/><span></span><br>
PWD:<input type="text"/><span></span><br>
<input type="submit" value="提交"/>
</form>
</body>
</html>
<script type="text/javascript">
var regId = /^\D\w{5,17}/;
var regPwd = /^.{6,}$/;
var oInputs = document.querySelectorAll('input');
var oF = document.querySelector('form');
var flagId = false;
var flagPwd = false;
oInputs[0].onblur = function(){
if(regId.test(this.value)){
this.nextElementSibling.innerHTML = 'ID格式正确';
flagId = true;
}else{
this.nextElementSibling.innerHTML = 'ID格式错误';
flagId = false;
}
}
oInputs[1].onblur = function(){
if(regPwd.test(this.value)){
this.nextElementSibling.innerHTML = 'PWD格式正确';
flagPwd = true;
}else{
this.nextElementSibling.innerHTML = 'PWD格式错误';
flagPwd = false;
}
}
oF.onsubmit = function(){
if(flagId && flagPwd){
return true;
}else {
return false;
}
}
</script>正则中的相关方法和属性
方法：
test()
检验一个字符串是否符合某一个正则规范，如果符合返回true,否则返回false 用法: reg.test(str)exec()
根据正则表达式查找，结果满足,会返回一个长度为1的数组（数组只有一个值） reg.exec(str) g全局属性 var reg = /\d/g;
var arr = reg.exec('1a2b3c')
console.log(arr[0]);//1
arr = reg.exec('1a2b3c')
console.log(arr[0]);//2 全局属性g 正则中相关字符串的方法:
search方法
返回与正则表达式查找内容匹配的第一个子字符串的位置 用法: str.search(reg) i 忽略字母大小写 var str = "wo shi ge bi de lao wang";
var reg1 =/sh/;
console.log(str.search(reg1));//3
var reg2 = /GE/i;//i忽略大小写
console.log(str.search(reg2));//7match 方法
使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。 用法：str.match(rgExp) var reg = /\d+/g;
var str = "123a4356a987";
console.log(str.match(reg)[0]);//123
console.log(str.match(reg)[1]);//4356
console.log(str.match(reg)[2]);//987replace 方法
返回根据正则表达式进行文字替换后的字符串的复制。 用法：stringObj.replace(rgExp,replaceText) var reg = /laowang/g;
var str = "laowang的隔壁也住着laowang";
console.log(str.replace(reg,"dahuang"));//dahuang的隔壁也住着dahuang