JS正则表达式
正则表达式的创建
- new regExp()
let reg=new regExp() - 字面量创建
let reg=/“正则表达式”/ - 正则测试用方法:test()
reg.test(“待测字符串”),其返回一个布尔类型
正则元字符
- \d: 匹配数字0-9
- \D: 匹配飞数字
- \w: 匹配单词字符(英文字母数字和下划线)
- \ W: 匹配非单词字符
- \ s: 匹配不可见字符
- \ S: 匹配可见字符
- .: 点,匹配所有字符,.表示点
- [ ]: 占用一个字母位置,表示匹配可以出现的字符
- ^: 在中括号内表示非,在中括号外表示以……开始
- $: 表示以……结束
- *: 出现0次以上
- +: 出现1次以上
- ?: 出现0或1次
- { }: 表示出现的次数
常用正则校验
<script>
//座机校验
let reg = /^0\d{2,3}-\d{7,8}$/
//校验名字
let name = /^[\u4e00-\u9fa5]{3,4}$/
//校验qq号
let qq = /^[1-9]\d{4,10}$/
//手机号校验
let phone = /^1[3-9]\d{9}$/
//邮箱校验
let mail = /^\w{1,}@\w{1,}(\.[a-zA-Z]{2,}){1,2}$/
let mail = /^\w+@\w+(\.[a-zA-Z]{2,}){1,2}$/
</script>
正则进阶
-
正则的提取 可以从字符串中提取符合规则的内容
reg.exec() -
正则的替换 字符串的方法,但是支持正则
str.replace()
let str=‘你真是个sb啊,sb’
str=str.replace(‘sb’,’****’)
//可以使用正则强化
str=str.replace(/s.?b/g,’**’)
//正则后面可以跟g,(global)将全部替换
正则综合案例
<body>
<div>
<div>
<input type="text" placeholder="请输入你的用户名" name="username">
<span class="span1"></span>
</div>
<div>
<input type="text" placeholder="请输入你昵称" name="nickname">
<span class="span2"></span>
</div>
<div>
<input type="text" placeholder="请输入你的邮箱" name="usermail">
<span class="span3"></span>
</div>
<div>
<input type="text" placeholder="请输入你的手机号" name="usermobile">
<span class="span4"></span>
</div>
</div>
<script>
//定义一个数组用于存放正则表达式和显示的错误信息
let arr = [{
reg: /^[a-zA-Z0-9]{5,12}$/,
message: '用户格式错误'
}, {
reg: /^[\u4e00-\u9fa5]{2,5}$/,
message: '昵称必须式2-5位的中文'
}, {
reg: /^\w+@\w+(\.[a-zA-Z]{2,}){1,2}$/,
message: '邮箱格式错误'
}, {
reg: /^1[3-9]\d{9}$/,
message: '手机格式错误'
}]
//获取标签
let inputs = Array.from(document.querySelectorAll('input[type=text]'))
let spans = document.querySelectorAll('span')
//循环添加Input的响应事件
for (let i = 0; i < spans.length; i++) {
inputs[i].addEventListener('change', e => {
//将正则表达式从数组中取出来
//测试输入框中的值并赋值给result
let result = arr[i].reg.test(inputs[i].value)
if (result === true) {
spans[i].innerText = '√'
spans[i].style.color = 'green'
} else {
spans[i].innerText = arr[i].message
spans[i].style.display = 'inline-block'
spans[i].style.color = 'red'
}
})
}
</script>
</body>