在 js中 存在一个内置对象——正则对象/ 正则表达式 ,它是 由一组特定的字符 或 特定字符组合 所组成的表达式 这个表达式 用来指定规则 并使用该表达式 检测字符串 如果字符串 满足正则规 则 检测成功 如果不满足 检测失败
创建正则表达式:
1.字面量创建:var reg = /正则内容/修饰符
2.构造函数创建:var reg = new RegExp("正则内容","修饰符")
正则修饰符:
g:global全局的 如果加了g修饰符 表示正则要进行 全局检测 即 从字符串开头 一直检测到 字符串结尾
var reg = /abc/g;
var str = "abc123abc";
//将两个abc 都替换为 def
var str1 = str.replace(reg,"def");
console.log(str1);
i:ignore忽略 如果加了i修饰符 表示正则在检测的时候 忽略大小写
var reg1 = /abc/i;
var str2 = "ABC123";
var str3 = str2.replace(reg1,"abc");
console.log(str3);
正则的检测方法
正则对象 自己的检测方法
1.test
用法:正则对象.test(要检测的字符串)
作用:使用正则 检测 指定字符串 如果字符串 满足正则条件 得到的值为true 否则 得到false
2.exec
用法:正则对象.exec(要检测的字符串)
作用:使用正则 检测 指定字符串 如果字符串 满足条件 得到的值是数组 否则 得到null
字符串的检测方法
1.replace
用法:字符串.replace(正则,用来替换的字符片段)
作用:使用 字符片段 替换掉 正则 检测到的 字符片段 默认只能替掉 第一个检测到的字符片段 如果想全局替换 需要给正则 添加修饰符g
2.split 切割字符串
用法:字符串.split(正则);
作用:使用 正则检测到的字符或字符片段 作为切割标识 进行切割
3.match
用法:字符串.match(正则)
作用:使用正则 检测字符串 如果检测成功 得到一个数组 检测失败 得到null
4.search
字符串.search(正则)
作用:获取 正则在字符串中 第一次检测到的 字符片段 的索引
正则的元字符
1. . 在正则表达式中 . 表示 要检测 出了换行符(\n)之外的 其他字符
2. [范围] 中括号 在正则中 表示 要检测一个范围内的内容 例如:[0-9a-zA-Z] 表示 检测数字或小写字母或大写字母都可以
3. [^范围] 中括号^ 在正则中 表示 要检测一个范围之外的内容 例如:[^0-9a-zA-Z] 表示 检测特殊字符
4.\d 和 \D : \d 要检测数字 相当于[0-9] \D 要检测所有非数字字符 相当于 [^0-9]
5.\w 和 \W : \w 要检测数字、字母或下划线 \W 要检测非数字,非字母,非下划线
6.\s 和 \S :\s 要检测 空格、\n、\t(制表符)、空字符串等空白字符 \S 要检测 非空白字符
7.\b 和 \B :\b 要检测 字符边界 \B 要检测 非字符边界
说明:字符边界 就是单词的边界 例如 as(由于as在这里是一个独立单词 因此具备字符边界) has(由于has中的as不是独立单词 因此不具 备字符边界)
8.^ 和 $
^写法:/^指定内容/ 表示 这个正则表达式要求 被检测的字符串 必须以指定内容 开头
$写法:/指定内容$/ 表示 这个这则要求 被检测的字符串 必须以 指定内容 结尾
9.^ 和 $组合使用(严格模式)
写法:/^指定内容$/
作用:这种写法 被称为 正则的严格模式 表示 要求检测的字符串必须是 正则指定的内容 既不能多 也不能少
正则的量词
当正则内容 出现 重复内容的时候 我们可以使用量词 来实现效果
1.?
写法:/\d?/
作用:?表示 规定其前面的内容 出现0次或1次 例如上述代码 就表示 要求检测的字符串中 出现0次或1次数字
2.+
写法:/\d+/
作用:+表示 规定其前面的内容 出现至少1次 例如上述代码中 就表示 要求检测的字符串中 至少出现1个数字
3.*
写法:/\d*/
作用:*表示 规定其前面的内容 可以出现 任意多次
4.{x,y}
写法:/\d{x,y}/
说明:x 和 y 都是 数字
作用:{x,y} 表示 规定其前面的内容 至少出现x次 至多出现y次
5{x}
写法:/\d{x}/
说明:x 是 数字
作用:{x} 表示 规定其前面的内容 必须出现x次
正则的特殊操作
1.或运算:
在正则中 或运算的写法 是 |
例如:/^张三|李四|王二$/
表示 该正则 要检测的字符串 必须是 张三或李四或王二 这三个名字中的一个
2.分组
在正则中 如果我们想让 某一部分内容 作为一个整体存在 可以使用小括号 将其包裹 被小括号包起来的部分 称为分组
例如:/^14(5|7|9)\d{8}$/
其中的小括号 就是一个分组
var reg1 = /^([a-zA-Z]+) ([a-zA-Z]+)$/
var str = "Hello world";
console.log(reg1.exec(str));
上述代码的检测结果为
0: "Hello world"
1: "Hello"
2: "world"
groups: undefined
index: 0
input: "Hello world"
length: 3
[[Prototype]]: Array(0)
这个数组的长度为 3
其原因是 当正则表达式中 存在分组的时候 在使用exec检测时 会使用正则进行检测 之后 在使用 每一个分组别进行检测
由于 有分组的正则 可以 使用分组 分别进行验证 因此我们也可以 单独获取分组 验证的结果
写作:RegExp.$n
表示:获取第n个分组的检测结果
注意:如果想 通过这种写法 单独获取 某一分组检测的结果 需要 事先对正则 进行检测
甚至 我们在 使用字符串方法 replace的时候 可以直接使用分组检测的结果
//手机号加密 157****7704
var phoneReg = /^(1[3-9]\d)(\d{4})(\d{4})$/
var str = "15732677704";
var str1 = str.replace(phoneReg,"$1****$3");
//在replace方法中 可以直接使用分组检测结果 写法为:$n 表示第n个分组 检测的结果
console.log(str1);
3.前瞻后顾
?=
写法:/xxx(?=yyy)/
上述正则 表示 要求 xxx内容之后 必须是 yyy内容 如果不是yyy内容 就检测失败
?!
写法:/(?!yyy)xxx/
表示 要求xxx内容的后面 不能是 yyy
?<=
写法:/(?<=yyy)xxx/
表示 要求xxx内容的前面 必须是 yyy
?<!
写法:/(?<!yyy)xxx/;
表示 要求xxx内容前面 不能是 yyy
基本用法案例原生js
<body>
<input type="text">
<span></span>
<script>
//用户在input中 输入密码 当input失去焦点的时候 就用正则检测 用户输入的密码 如果满足条件 就提示对 如果不满足条件 就提示错
//获取元素
var inp = document.getElementsByTagName("input")[0];
var span = document.getElementsByTagName("span")[0];
var pwdReg = /^\d\d\d\d\d\d$/;
//onblur 失去焦点事件
inp.onblur = function(){
//就用正则检测 用户输入的密码 如果满足条件 就提示对 如果不满足条件 就提示错
//获取用户输入的密码
var pwd = this.value;
var res = pwdReg.test(pwd);
if(res){
span.innerText = "对"
}else{
span.innerText = "错"
}
}
</script>
</body>