携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
正则表达式的标识符
标识符是写在正则表达式的外面, 用来修饰整个正则表达式的
标识符
1. i 忽略大小写
/ /1. i 忽略大小写 、
const reg = /^[abcd]*$/;
console.log(reg.test('abcdacbd'));
console.log(reg.test('abcdA'));
2. g 全局
匹配和捕获的时候, 都是只能找到第一个
当他有全局标识符的时候, 你捕获第二次会从第一次的结束位开始查找
知道找不到了, 返回 null
再后面依次的时候, 又回到 [0] 位置开始捕获
匹配和捕获都是影响下一次开始位的
const str = 'abc123abc456abc789abc'
const reg = /\d{3}/g
console.log(reg.exec(str))
// 结束位是 [5]
console.log(reg.exec(str))
// 开始位就是 [6]
console.log(reg.test(str))
// 开始位就是 [12]
3. y 粘性全局
使用方法:
/abcd/igy
new RegExp('abcd', 'igy')
const str = '123456abc789abc'
const reg = /\d{3}/y
console.log(reg.exec(str)) // g 123
console.log(reg.exec(str)) // g 456
两种创建正则表达式的区别
1. 字面量创建
使用方法: var reg = /abcd/igy
不能进行字符串拼接
书写基础元字符的时候直接写 \xx
// 1. 进行字符串拼接
var str = 'hello'
// 字符串拼接完毕就变成了字符串, 不是正则, 不能使用 test 和 exec 方法
var reg = '/' + str + '/'
console.log(reg.test())
// 因为 RegExp 的第一个参数就是传递一个字符串类型
var reg = new RegExp(str + ' world')
console.log(reg)
2. 内置构造函数创建
+ 语法: var reg = new RegExp('abcd', 'igy')
+ 可以进行字符串拼接
+ 书写基础元字符的时候要书写 \xx
// 2. 书写基础元字符
var reg = /\d\s\w/
console.log(reg)
var reg = new RegExp('\s\d\w')
console.log(reg)
3.字符串
字符串里面也有转义符号
是 \（反斜杠）
书写 n 的时候, 就表示文本 n
书写 \n 的时候, 就表示换行的意思
字符串里面书写 \s 的时候, 他会把 s 转换成有意义的内容
但是 \s 确实没有实际意义
变成了一个普通 s 文本
当你再字符串里面书写 \ 的时候, 表示转义符号
但是当你书写 \ 的时候, 表示一个 \ 文本
4.字符串和正则合作的方法
都是字符串的常用方法, 只不过参数位置可以写正则
1. search()
使用方法:
1. 字符串.search(字符串片段)
2. 字符串.search(正则表达式)
返回值:
如果有就是对应的索引
如果没有就是 -1
// 1. search
const str = 'sada123sjdk'
console.log(str.search('123'))
console.log(str.search(/\d{3}/))
2. replace()
使用方法:
1. 字符串.replace(字符串片段, 要替换的内容)
2. 字符串.replace(正则表达式, 要替换的内容)
返回值:
1. 只能替换第一个查找到的内容, 返回替换好的字符串
2. 没有全局标识符 g 的时候, 只能替换第一个查找到的内容, 返回替换好的字符串
有全局标识符 g 的时候, 会把字符串内所有满足正则规则的内容全部替换, 返回替换好的字符串
// 2. replace()
const str = 'abcd123abcd123abcd123abcd'；
console.log(str.replace('123', '**'))；
console.log(str.replace(/\d{3}/, '**'))；
console.log(str.replace(/\d{3}/g, '**'))；
3. match()
语法:
1. 字符串.match(字符串片段)
2. 字符串.match(正则表达式)
返回值:
1. 查找到字符串内一个满足字符串片段的内容返回, 返回格式和 exec 一模一样
2. 当正则表达式没有全局标识符 g 的时候, 返回值和 exec 方法一模一样
当正则表达式有全局标识符 g 的时候, 返回一个数组, 里面是所有满足条件的内容
// 3. match()
const str = 'hello 你好 world hello 世界 world hello 我不好 world hello 还行 world'
console.log(str.match('你好'))
console.log(str.match(/你好/))
console.log(str.match(/[\u4e00-\u9fa5]+/g))
表单验证
需求:
随着用户输入, 随时进行表单验证
文本框最右边有一个字体图标, 对勾或者叉子
当用户输入的满足条件时, 显示对勾, 不满足条件时显示叉子
假定用户名规则 非下划线开头, 只能由数字字母下划线组成, 6 ~ 12 位
有一段文本提示, 当不满足要求的时候, 显示出文本内容
实现原理
1. 获取 input 文本框绑定事件
input 事件, 因为要随着输入随时验证
2. 随时拿到用户输入的内容进行正则验证
//引入图标
<link rel="stylesheet" href="//at.alicdn.com/t/font_2035193_jb4j6bvdrw.css">
//CSS 部分
* {
margin: 0;
padding: 0;
}
form {
width: 500px;
padding: 20px;
border: 3px solid pink;
border-radius: 15px;
margin: 30px auto;
}
form > label {
position: relative;
width: 100%;
height: 30px;
display: block;
padding: 10px 0 20px;
}
form > label > span {
position: absolute;
left: 10px;
bottom: 5px;
font-size: 12px;
color: red;
display: none;
}
form > label > span.error {
display: block;
}
form > label > i {
position: absolute;
left: 250px;
width: 20px;
height: 20px;
}
form > label > i.icon-cuowu {
color: red;
}
form > label > i.icon-zhengque {
color: green;
}
//HTML 部分
<form>
<label>
用户名: <input type="text">
<!-- <i class="iconfont icon-cuowu"></i> -->
<i class="iconfont"></i>
<span>只能由数字字母下划线组成, 6 ~ 12 位, 不能以 _ 开头</span>
</label>
</form>
// 0. 准备正则
const reg = /^[0-9a-zA-Z]\w{5,11}$/
let timer = 0
const i = document.querySelector('i')
const span = document.querySelector('span')
// 1. 获取元素绑定事件
const inp = document.querySelector('input')
inp.addEventListener('input', function () {
clearTimeout(timer) timer = setTimeout(() => {
// 2. 随时进行正则验证
if (reg.test(this.value)) {
// 对勾显示
i.classList.add('icon-zhengque')
i.classList.remove('icon-cuowu')
span.classList.remove('error')
} else {
// 叉子 和 文本显示
i.classList.add('icon-cuowu')
i.classList.remove('icon-zhengque')
span.classList.add('error') }
}, 300)
})
今天是七夕 ，发现今年秀的人比往年少多了 不知道是大家都没钱了 还是今年又换了新的另一半 我们拭目以待吧
