正则表达式的标识符
标识符是写在正则表达式的外面, 用来修饰整个正则表达式的
标识符
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) })
复制代码
评论