目录
正则表达式
语法与基本使用
元字符
正则表达式
@jarringslee
//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
exec()方法
用来在字符串中执行正则搜索并返回
第一个匹配结果的信息
如果匹配成功,返回一个数组(含下标、分组等);如果失败,返回
null
用for循环遍历检查数组:
用
for
循环或
some
一行就能搞定:
// 待检查数组
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]/
边界符
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符
^ 表示匹配行首的文本(从谁开始)
$ 表示匹配行尾的文本(从谁结束)
如果 ^ 和 $ 在一起,表示必须是精确匹配
量词
量词用来设定某个模式重复次数
注意: 逗号左右两侧千万不要出现空格
范围
表示字符的范围,定义的规则限定在某个范围,比如只能是英文字母,或者数字等等,用表示范围
字符类
某些常见模式的简写方式,区分字母和数字
字符类
示例:
//只能出现一个元素且只能出现一次
/[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
语法:
/[abc]/
含义:只要待测字符串
包含
a
、
b
、
c
中任意一个字符,即返回
true
。
连字符类
示例:
/^[a-z]$/.test('c'); // true
应用示例:
/^[1-9][0-9]{4,}$/ // 首字符 1-9,后面位字符 0-9,后面至少 4 位数字(整体至少五位)
// 字符类
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]
→ 26 个小写字母
[a-zA-Z]
→ 大小写字母
[0-9]
→ 0~9 任一数字
腾讯 QQ 号(≥10000)
在 [ ] 里面加上 ^ 取反符号
[^a-z] 匹配除了小写字母以外的字符
注意要写到中括号中
小点点
.
匹配除了换行符以外的任何
单个
字符
用户名验证案例
需求
用户名只能由英文字母、数字、下划线或短横线组成,且长度 6~16 位。
实现步骤
正则表达式
/^[a-zA-Z0-9_-]{6,16}$/
验证时机
表单失去焦点时立即验证。
结果反馈
符合规范 → 给后面的
添加
right
类
不符合规范 → 给后面的
添加
wrong
类
预定义
指的是某些常见模式的简写方式
日期格式示例:
^\d{4}-\d{1,2}-\d{1,2}
\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]
修饰符
示例:
console.log(/a/i.test('a')); // true
console.log(/a/i.test('A')); // true
修饰符应用:替换全局
过滤敏感词小实例:
输入:
你很有激情
点击后变成:
你很有**
约束正则执行的某些细节行为
语法:
/表达式/修饰符
i
(ignore):匹配时
不区分大小写
g
(global):查找
全部
满足正则表达式的匹配结果
到此这篇关于JS中正则表达式的运用的文章就介绍到这了,更多相关js正则表达式运用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
到此这篇关于JS中正则表达式的运用解析的文章就介绍到这了,更多相关js正则表达式运用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
js编写trim()函数及正则表达式的运用
JavaScript中正则表达式的实际应用详解
浅谈Javascript常用正则表达式应用
JavaScript中正则表达式的概念与应用
JavaScript正则表达式之multiline属性的应用
JS应用正则表达式转换大小写示例
JavaScript 正则表达式之RegExp属性、方法及应用分析
JS 正则表达式中小括号的应用
JS的replace方法与正则表达式结合应用讲解
