当前位置：首页 > news >正文

JS中正则表达式的运用

news 2025/9/5 7:46:12

正则表达式

@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

<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

<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 一行就能搞定：

// 待检查数组
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]/

边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

^ 表示匹配行首的文本（从谁开始）
$ 表示匹配行尾的文本（从谁结束）

如果 ^ 和 $ 在一起，表示必须是精确匹配

<body><script>// 元字符之边界符// 1. 匹配开头的位置 ^const reg = /^web/console.log(reg.test('web前端'))  // trueconsole.log(reg.test('前端web'))  // falseconsole.log(reg.test('前端web学习'))  // falseconsole.log(reg.test('we'))  // false// 2. 匹配结束的位置 $const reg1 = /web$/console.log(reg1.test('web前端'))  //  falseconsole.log(reg1.test('前端web'))  // trueconsole.log(reg1.test('前端web学习'))  // falseconsole.log(reg1.test('we'))  // false  // 3. 精确匹配 ^ $const reg2 = /^web$/console.log(reg2.test('web前端'))  //  falseconsole.log(reg2.test('前端web'))  // falseconsole.log(reg2.test('前端web学习'))  // falseconsole.log(reg2.test('we'))  // false console.log(reg2.test('web'))  // trueconsole.log(reg2.test('webweb'))  // flase </script>
</body>

量词

量词用来设定某个模式重复次数

注意：逗号左右两侧千万不要出现空格

<body><script>// 元字符之量词// 1. * 重复次数 >= 0 次const reg1 = /^w*$/console.log(reg1.test(''))  // trueconsole.log(reg1.test('w'))  // trueconsole.log(reg1.test('ww'))  // trueconsole.log('-----------------------')// 2. + 重复次数 >= 1 次const reg2 = /^w+$/console.log(reg2.test(''))  // falseconsole.log(reg2.test('w'))  // trueconsole.log(reg2.test('ww'))  // trueconsole.log('-----------------------')// 3. ? 重复次数  0 || 1 const reg3 = /^w?$/console.log(reg3.test(''))  // trueconsole.log(reg3.test('w'))  // trueconsole.log(reg3.test('ww'))  // falseconsole.log('-----------------------')// 4. {n} 重复 n 次const reg4 = /^w{3}$/console.log(reg4.test(''))  // falseconsole.log(reg4.test('w'))  // flaseconsole.log(reg4.test('ww'))  // falseconsole.log(reg4.test('www'))  // trueconsole.log(reg4.test('wwww'))  // falseconsole.log('-----------------------')// 5. {n,} 重复次数 >= n const reg5 = /^w{2,}$/console.log(reg5.test(''))  // falseconsole.log(reg5.test('w'))  // falseconsole.log(reg5.test('ww'))  // trueconsole.log(reg5.test('www'))  // trueconsole.log('-----------------------')// 6. {n,m}   n =< 重复次数 <= mconst reg6 = /^w{2,4}$/console.log(reg6.test('w'))  // falseconsole.log(reg6.test('ww'))  // trueconsole.log(reg6.test('www'))  // trueconsole.log(reg6.test('wwww'))  // trueconsole.log(reg6.test('wwwww'))  // false// 7. 注意事项： 逗号两侧千万不要加空格否则会匹配失败</script>

范围

表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围

<body><script>// 元字符之范围  []  // 1. [abc] 匹配包含的单个字符， 多选1const reg1 = /^[abc]$/console.log(reg1.test('a'))  // trueconsole.log(reg1.test('b'))  // trueconsole.log(reg1.test('c'))  // trueconsole.log(reg1.test('d'))  // falseconsole.log(reg1.test('ab'))  // false// 2. [a-z] 连字符 单个const reg2 = /^[a-z]$/console.log(reg2.test('a'))  // trueconsole.log(reg2.test('p'))  // trueconsole.log(reg2.test('0'))  // falseconsole.log(reg2.test('A'))  // false// 想要包含小写字母，大写字母 ，数字const reg3 = /^[a-zA-Z0-9]$/console.log(reg3.test('B'))  // trueconsole.log(reg3.test('b'))  // trueconsole.log(reg3.test(9))  // trueconsole.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'))  // trueconsole.log(reg4.test('ABcd12'))  // trueconsole.log(reg4.test('ABcd12_'))  // true// 3. [^a-z] 取反符const reg5 = /^[^a-z]$/console.log(reg5.test('a'))  // false console.log(reg5.test('A'))  // trueconsole.log(reg5.test(8))  // true</script>
</body>

字符类

某些常见模式的简写方式，区分字母和数字

字符类

语法：/[abc]/
含义：只要待测字符串包含 a、b、c 中任意一个字符，即返回 true。

示例：

//只能出现一个元素且只能出现一次
/[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 任一数字

示例：

/^[a-z]$/.test('c'); // true

应用示例：

腾讯 QQ 号（≥10000）

/^[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] 匹配除了小写字母以外的字符
- 注意要写到中括号中
小点点 .
- 匹配除了换行符以外的任何单个字符

用户名验证案例

需求
用户名只能由英文字母、数字、下划线或短横线组成，且长度 6~16 位。

实现步骤

正则表达式 /^[a-zA-Z0-9_-]{6,16}$/
验证时机
表单失去焦点时立即验证。
结果反馈
- 符合规范 → 给后面的 <span> 添加 right 类
- 不符合规范 → 给后面的 <span> 添加 wrong 类

<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.nextElementSiblinginput.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）：查找全部满足正则表达式的匹配结果

示例：

console.log(/a/i.test('a')); // true
console.log(/a/i.test('A')); // true

修饰符应用：替换全局

<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>

过滤敏感词小实例：

输入：你很有激情

点击后变成：你很有**

<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>