正则表达式
@jarringslee
文章目录
js
//6-16位字母数字下划线
/^[a-zA-Z0-9_-]{6,16}$/
// 手机号验证(11 位)
/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
// 6 位数字验证码
/^\d{6}$/
// 密码:6--20 位,仅字母、数字、下划线或短横线
/^[a-zA-Z0-9_-]{6,20}$/
语法与基本使用
正则表达式(Regular Expression)是一种字符串匹配的模式(规则)
使用场景:
- 例如验证表单:手机号表单要求用户只能输入11位的数字 (匹配)
- 过滤掉页面内容中的一些敏感词(替换 ),或从字符串中获取我们想要的特定部分(提取)等
-
使用正则
exec()方法
用来在字符串中执行正则搜索并返回第一个匹配结果的信息- 如果匹配成功,返回一个数组(含下标、分组等);如果失败,返回
null
html
<body>
<script>
// 正则表达式的 exec 使用
const str = 'web前端开发'
// 1. 定义规则
const reg = /web/
// 2. 使用正则 exec()
console.log(reg.exec(str))
// 结果:["web", index: 0, input: "web前端开发", groups: undefined]
console.log(reg.exec('java开发'))
// 结果:null
</script>
</body>
exec()方法
用来在字符串中执行正则搜索并返回第一个匹配结果的信息- 如果匹配成功,返回一个数组(含下标、分组等);如果失败,返回
null
html
<body>
<script>
// 正则表达式的 exec 使用
const str = 'web前端开发'
// 1. 定义规则
const reg = /web/
// 2. 使用正则 exec()
console.log(reg.exec(str))
// 结果:["web", index: 0, input: "web前端开发", groups: undefined]
console.log(reg.exec('java开发'))
// 结果:null
</script>
</body>
用for循环遍历检查数组:
用 for
循环或 some
一行就能搞定:
js
// 待检查数组
const arr = ['apple', 'banana', 'cat'];
// 要检查的子串
const key = 'a';
// 方法1:for 循环
for (let i = 0; i < arr.length; i++) {
if (arr[i].includes(key)) {
console.log(`第${i}项 "${arr[i]}" 包含 "${key}"`);
}
}
// 方法2:一行 some
const has = arr.some(str => str.includes(key));
console.log('数组里至少有一项包含:', has);
includes()
判断字符串是否包含子串。some()
只要有一项满足就返回true
;全部不满足返回false
。
元字符
- 普通字符:
- 大多数的字符仅能够描述它们本身,这些字符称作普通字符,例如所有的字母和数字。
- 普通字符只能够匹配字符串中与它们相同的字符。
- 比如,规定用户只能输入英文26个英文字母,普通字符的话 /[abcdefghijklmnopqrstuvwxyz]/
- 元字符(特殊字符)
- 是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能。
- 比如,规定用户只能输入英文26个英文字母,换成元字符写法: /[a-z]/
边界符
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符
- ^ 表示匹配行首的文本(从谁开始)
- $ 表示匹配行尾的文本(从谁结束)
如果 ^ 和 $ 在一起,表示必须是精确匹配
html
<body>
<script>
// 元字符之边界符
// 1. 匹配开头的位置 ^
const reg = /^web/
console.log(reg.test('web前端')) // true
console.log(reg.test('前端web')) // false
console.log(reg.test('前端web学习')) // false
console.log(reg.test('we')) // false
// 2. 匹配结束的位置 $
const reg1 = /web$/
console.log(reg1.test('web前端')) // false
console.log(reg1.test('前端web')) // true
console.log(reg1.test('前端web学习')) // false
console.log(reg1.test('we')) // false
// 3. 精确匹配 ^ $
const reg2 = /^web$/
console.log(reg2.test('web前端')) // false
console.log(reg2.test('前端web')) // false
console.log(reg2.test('前端web学习')) // false
console.log(reg2.test('we')) // false
console.log(reg2.test('web')) // true
console.log(reg2.test('webweb')) // flase
</script>
</body>
量词
量词用来设定某个模式重复次数
注意: 逗号左右两侧千万不要出现空格
html
<body>
<script>
// 元字符之量词
// 1. * 重复次数 >= 0 次
const reg1 = /^w*$/
console.log(reg1.test('')) // true
console.log(reg1.test('w')) // true
console.log(reg1.test('ww')) // true
console.log('-----------------------')
// 2. + 重复次数 >= 1 次
const reg2 = /^w+$/
console.log(reg2.test('')) // false
console.log(reg2.test('w')) // true
console.log(reg2.test('ww')) // true
console.log('-----------------------')
// 3. ? 重复次数 0 || 1
const reg3 = /^w?$/
console.log(reg3.test('')) // true
console.log(reg3.test('w')) // true
console.log(reg3.test('ww')) // false
console.log('-----------------------')
// 4. {n} 重复 n 次
const reg4 = /^w{3}$/
console.log(reg4.test('')) // false
console.log(reg4.test('w')) // flase
console.log(reg4.test('ww')) // false
console.log(reg4.test('www')) // true
console.log(reg4.test('wwww')) // false
console.log('-----------------------')
// 5. {n,} 重复次数 >= n
const reg5 = /^w{2,}$/
console.log(reg5.test('')) // false
console.log(reg5.test('w')) // false
console.log(reg5.test('ww')) // true
console.log(reg5.test('www')) // true
console.log('-----------------------')
// 6. {n,m} n =< 重复次数 <= m
const reg6 = /^w{2,4}$/
console.log(reg6.test('w')) // false
console.log(reg6.test('ww')) // true
console.log(reg6.test('www')) // true
console.log(reg6.test('wwww')) // true
console.log(reg6.test('wwwww')) // false
// 7. 注意事项: 逗号两侧千万不要加空格否则会匹配失败
</script>
范围
表示字符的范围,定义的规则限定在某个范围,比如只能是英文字母,或者数字等等,用表示范围
html
<body>
<script>
// 元字符之范围 []
// 1. [abc] 匹配包含的单个字符, 多选1
const reg1 = /^[abc]$/
console.log(reg1.test('a')) // true
console.log(reg1.test('b')) // true
console.log(reg1.test('c')) // true
console.log(reg1.test('d')) // false
console.log(reg1.test('ab')) // false
// 2. [a-z] 连字符 单个
const reg2 = /^[a-z]$/
console.log(reg2.test('a')) // true
console.log(reg2.test('p')) // true
console.log(reg2.test('0')) // false
console.log(reg2.test('A')) // false
// 想要包含小写字母,大写字母 ,数字
const reg3 = /^[a-zA-Z0-9]$/
console.log(reg3.test('B')) // true
console.log(reg3.test('b')) // true
console.log(reg3.test(9)) // true
console.log(reg3.test(',')) // flase
// 用户名可以输入英文字母,数字,可以加下划线,要求 6~16位
const reg4 = /^[a-zA-Z0-9_]{6,16}$/
console.log(reg4.test('abcd1')) // false
console.log(reg4.test('abcd12')) // true
console.log(reg4.test('ABcd12')) // true
console.log(reg4.test('ABcd12_')) // true
// 3. [^a-z] 取反符
const reg5 = /^[^a-z]$/
console.log(reg5.test('a')) // false
console.log(reg5.test('A')) // true
console.log(reg5.test(8)) // true
</script>
</body>
字符类
某些常见模式的简写方式,区分字母和数字
-
字符类
- 语法:
/[abc]/
- 含义:只要待测字符串包含
a
、b
、c
中任意一个字符,即返回true
。
示例:
js//只能出现一个元素且只能出现一次 /[abc]/.test('andy'); // true /[abc]/.test('baby'); // true /[abc]/.test('cry'); // true /[abc]/.test('die'); // false //任意字符必须出现n次 /[abc]{n}/ /[abc]{2}/.test('andy'); // false /[abc]{2}/.test('abef'); // true
- 语法:
-
连字符类
- 语法:
[起始-结束]
- 含义:匹配 起始到结束 之间的任意一个 字符。
[a-z]
→ 26 个小写字母[a-zA-Z]
→ 大小写字母[0-9]
→ 0~9 任一数字
示例:
js/^[a-z]$/.test('c'); // true
应用示例:
- 腾讯 QQ 号(≥10000)
js/^[1-9][0-9]{4,}$/ // 首字符 1-9,后面位字符 0-9,后面至少 4 位数字(整体至少五位)
js// 字符类 console.log(/^[A-Z]$/.test('p')); // false console.log(/^[A-Z]$/.test('P')); // true console.log(/^[0-9]$/.test(2)); // true console.log(/^[a-zA-Z0-9]$/.test(2)); // true console.log(/^[a-zA-Z0-9]$/.test('p')); // true console.log(/^[a-zA-Z0-9]$/.test('p')); // true
- 语法:
-
在 [ ] 里面加上 ^ 取反符号
-
\^a-z\] 匹配除了小写字母以外的字符
-
-
小点点 .
- 匹配除了换行符以外的任何单个字符
用户名验证案例
需求
用户名只能由英文字母、数字、下划线或短横线组成,且长度 6~16 位。
实现步骤
-
正则表达式
/^[a-zA-Z0-9_-]{6,16}$/
-
验证时机
表单失去焦点时立即验证。
-
结果反馈
- 符合规范 → 给后面的
<span>
添加right
类 - 不符合规范 → 给后面的
<span>
添加wrong
类
- 符合规范 → 给后面的
html
<head>
<style>
span {
display: inline-block;
width: 250px;
height: 30px;
vertical-align: middle;
line-height: 30px;
padding-left: 15px;
}
.error {
color: red;
background: url(./images/error1.png) no-repeat left center;
}
.right {
color: green;
background: url(./images/right.png) no-repeat left center;
}
</style>
</head>
<body>
<input type="text">
<span></span>
<script>
const reg = /^[a-zA-Z0-9_-]{6,16}$/
const input = document.querySelector('input')
const span = input.nextElementSibling
input.addEventListener('blur', function () {
//input的下一个元素
if (reg.test(this.value)) {
span.innerHTML = '输入正确'
span.className = 'right'
} else {
span.innerHTML = '请输入6~16位的英文 / 数字 / 下划线!'
span.className = 'error'
}
})
</script>
</body>
-
预定义 指的是某些常见模式的简写方式
\d
匹配任意 0--9 数字,等价于[0-9]
\D
匹配任意非数字字符,等价于[^0-9]
\w
匹配字母、数字或下划线,等价于[A-Za-z0-9_]
\W
匹配除字母、数字、下划线外的任意字符,等价于[^A-Za-z0-9_]
\s
匹配任意空白符(空格、Tab、换行等),等价于[ \t\r\n\v\f]
\S
匹配任意非空白符,等价于[^ \t\r\n\v\f]
日期格式示例:
^\d{4}-\d{1,2}-\d{1,2}
-
修饰符
- 约束正则执行的某些细节行为
- 语法:
/表达式/修饰符
i
(ignore):匹配时不区分大小写g
(global):查找全部满足正则表达式的匹配结果
示例:
jsconsole.log(/a/i.test('a')); // true console.log(/a/i.test('A')); // true
修饰符应用:替换全局
html<body> <script> console.log(/^java$/.test('java')) console.log(/^java$/i.test('JAVA')) console.log(/^java$/i.test('Java')) const str = 'java是一门编程语言, 学完JAVA工资很高' // const re = str.replace(/java|JAVA/g, '前端') const re = str.replace(/java/ig, '前端') console.log(re) // 前端是一门编程语言, 学完前端工资很高 </script> </body>
过滤敏感词小实例:
输入:
你很有激情
点击后变成:
你很有**
html<body> <textarea name="" id="" cols="30" rows="10"></textarea> <button>发布</button> <div></div> <script> const tx = document.querySelector('textarea') const btn = document.querySelector('button') const div = document.querySelector('div') btn.addEventListener('click', function () { // console.log(tx.value) div.innerHTML = tx.value.replace(/激情|基情/g, '**') tx.value = '' }) </script> </body>