引言
正则表达式在各种编程语言中，都有广泛的应用。在JavaScript中更是不可或缺，正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。 本文从正则表达式的基本概念入手，讲解了正则表达式的特点和组成，并且详细讲解了正则表达式在JavaScript中的使用，并给出了一些在实际开发中经常用到的实例。
目录
1 正则表达式
1.1 什么是正则表达式
正则表达式是用于匹配规律规则的表达式，它的“鼻祖”可一直追溯到科学家对人类神经系统的工作原理的早期研究。现在在各种编程语言中，正则表达式都有广泛的应用。在JavaScript中，正则表达式也是对象，正则表通常被用来检索、替换那些符合某个模式(规则)的文本。
正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。
1.2 正则表达式的作用
- 给定的字符串是否符合正则表达式的过滤逻辑(匹配)。
- 可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)。
- 强大的字符串替换能力(替换)。
1.3 正则表达式的特点
- 灵活性、逻辑性和功能性非常的强
- 可以迅速地用极简单的方式达到字符串的复杂控制
- 对于刚接触的人来说，比较晦涩难懂
1.4 正则表达式的组成
- 普通字符
- 特殊字符(元字符)：正则表达式中有特殊意义的字符
示例演示：
\d匹配数字ab\d匹配 ab1、ab2
1.5 元字符串
1.5.1 常用元字符串
| 元字符 | 说明 |
|---|---|
| \d | 匹配数字 |
| \D | 匹配任意非数字的字符 |
| \w | 匹配字母或数字或下划线 |
| \W | 匹配任意不是字母，数字，下划线 |
| \s | 匹配任意的空白符 |
| \S | 匹配任意不是空白符的字符 |
| . | 匹配除换行符以外的任意单个字符 |
| ^ | 表示匹配行首的文本(以谁开始) |
| $ | 表示匹配行尾的文本(以谁结束) |
1.5.2 限定符
| 限定符 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ? | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
1.5.3 其它
1.[] 字符串用中括号括起来，表示匹配其中的任一字符，相当于或的意思。
2.[^] 匹配中括号以外的内容，相当于非的意思。
3.\ 转义符。
4.| 或者，选择两者中的一个。注意|将左右两边分为两部分，而不管左右两边有多长多乱。
5.() 从两个直接量中选择一个，分组。 eg：gr(a|e)y匹配gray和grey。
6.[\u4e00-\u9fa5] 匹配汉字。
2 常用正则表达式
验证手机号：
^\d{11}$
验证邮编：
^\d{6}$
验证日期 2012-5-01：
^\d{4}-\d{1,2}-\d{1,2}$
验证邮箱 xxx@qq.cn:
^\w+@\w+\.\w+$
验证IP地址 192.168.1.10
^\d{1,3}\(.\d{1,3}){3}$
3 在JavaScript 中使用正则表达式
3.1 创建正则表达式对象
在 JavaScript 中，有两种方式创建正则表达式对象。
3.1.1 方式1
-
var reg =
new Regex(
'\d',
'i');
-
var reg =
new Regex(
'\d',
'gi');
3.1.2 方式2
-
var reg =
/\d/i;
-
var reg =
/\d/gi;
3.2 参数
| 标志 | 说明 |
|---|---|
| i | 忽略大小写 |
| g | 全局匹配 |
| gi | 全局匹配+忽略大小写 |
3.3 正则表达式匹配
匹配日期：
-
// 匹配日期var dateStr = '2020-10-24';
-
var reg =
/^\d{4}-\d{1,2}-\d{1,2}$/
console.log(reg.test(dateStr));
// true
3.4 实例
3.4.1 验证密码强弱
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>密码强弱：公众号AlbertYang
</title>
-
</head>
-
<style type="text/css">
-
#dv {
-
width:
300px;
-
height:
200px;
-
position: absolute;
-
left:
300px;
-
top:
100px;
-
}
-
-
.strengthLv0 {
-
height:
6px;
-
width:
40px;
-
border:
1px solid
#ccc;
-
padding:
2px;
-
}
-
-
.strengthLv1 {
-
background: red;
-
height:
6px;
-
width:
40px;
-
border:
1px solid
#ccc;
-
padding:
2px;
-
}
-
-
.strengthLv2 {
-
background: orange;
-
height:
6px;
-
width:
80px;
-
border:
1px solid
#ccc;
-
padding:
2px;
-
}
-
-
.strengthLv3 {
-
background: green;
-
height:
6px;
-
width:
120px;
-
border:
1px solid
#ccc;
-
padding:
2px;
-
}
-
</style>
-
<body>
-
<div id="dv">
-
<label for="pwd">密码
</label>
-
<input type="text" id="pwd" maxlength="16">
-
<div>
-
<em>密码强度：
</em>
-
<span id="strength">
</span>
-
<div id="strengthLevel" class="strengthLv0">
</div>
-
</div>
-
</div>
-
<script>
-
// 获取文本框注册键盘抬起事件
-
document.getElementById(
"pwd").onkeyup =
function() {
-
// 每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
-
// 如果密码的长度是小于6的,不判断
-
let level = getLvl(
this.value),
-
levelStr =
"弱";
-
if (level ===
2) {
-
levelStr =
"中等";
-
}
else
if (level ===
3) {
-
levelStr =
"强";
-
}
-
-
if (
this.value.length >=
6) {
-
document.getElementById(
"strengthLevel").className =
"strengthLv" + level;
-
document.getElementById(
"strength").innerHTML = levelStr;
-
}
else {
-
document.getElementById(
"strengthLevel").className =
"strengthLv0";
-
document.getElementById(
"strength").innerHTML =
"";
-
}
-
-
};
-
-
// 根据密码返回对应的级别
-
function getLvl(pwd) {
-
let lvl =
0;
// 默认是0级
-
// 判断密码中是否有数字
-
if (
/[0-9]/.test(pwd)) {
-
lvl++;
-
}
-
// 判断密码中有没有字母
-
if (
/[a-zA-Z]/.test(pwd)) {
-
lvl++;
-
}
-
// 判断密码中是否有特殊符号
-
if (
/[^0-9a-zA-Z_]/.test(pwd)) {
-
lvl++;
-
}
-
return lvl;
// 最小值是1,最大值是3
-
}
-
</script>
-
</body>
-
</html>
-
3.4.2 验证邮箱
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>验证邮箱：微信公众号：AlbertYang
</title>
-
</head>
-
<body>
-
请您输入邮箱地址:
<input type="text" value="" id="email" /> *
<br />
-
<script>
-
//如果输入的是邮箱,那么背景颜色为绿色,否则为红色
-
//获取文本框,注册失去焦点的事件
-
document.getElementById(
"email").onblur =
function() {
-
//判断这个文本框中输入的是不是邮箱
-
let reg =
/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_-]+([.][a-zA-Z]+){1,2}$/;
-
if (reg.test(
this.value)) {
-
this.style.backgroundColor =
"green";
-
}
else {
-
this.style.backgroundColor =
"red";
-
}
-
};
-
</script>
-
-
</body>
-
</html>
-
3.4.3 验证中文名字
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>验证中文名字：微信公众号AlbertYang
</title>
-
-
</head>
-
<body>
-
请输入您的名字:
<input type="text" value="" id="userName" />*
<br />
-
<script>
-
// 是中文名字,则绿色,否则红色
-
document.getElementById(
"userName").onblur =
function() {
-
var reg =
/^[\u4e00-\u9fa5]{2,6}$/;
-
if (reg.test(
this.value)) {
-
this.style.backgroundColor =
"green";
-
}
else {
-
this.style.backgroundColor =
"pink";
-
}
-
};
-
</script>
-
-
</body>
-
</html>
-
3.5 正则表达式提取
-
// 提取年龄var str = "张三18，李四36，王五60";
-
var array = str.match(
/\d+/g);
-
console.log(array);
-
-
// 提取email地址var str = "4645354@qq.com,fangfang@usa.cn 256469312@qq.com,28265432@qq.com";
-
var array = str.match(
/\w+@\w+\.\w+(\.\w+)?/g);
-
console.log(array);
-
-
// 分组提取
-
// 提取日期中的年 2020-10-24var dateStr = '2020-10-24';
-
// 正则表达式中的()作为分组来使用，获取分组匹配到的结果使用Regex.$1 $2 $3...
-
var reg =
/(\d{4})-\d{1,2}-\d{1,2}/;
-
if (reg.test(dateStr)) {
-
console.log(
RegExp.$
1);
-
}
-
-
// 提取邮件中的每一部分var reg = /(\w+)@(\w+)\.(\w+)(\.\w+)?/;
-
var str =
"932errewerrw@126.com";
-
if (reg.test(str)) {
-
console.log(
RegExp.$
1);
-
console.log(
RegExp.$
2);
-
console.log(
RegExp.$
3);
-
}
3.6 正则表达式替换
-
// 1.替换所有空白字符var str = " reeed asafdre56df 3rfereww rtere ";
-
str = str.replace(
/\s/g,
"***");
-
console.log(str);
-
-
// 2.替换所有,或，var str = "abc,efg,123，abc,123，a";
-
str = str.replace(
/,|，/g,
":");
-
console.log(str);
4 案例
4.1 表单验证案例
演示地址：https://www.albertyy.com/2020/10/validate.html
-
<!DOCTYPE html>
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>表单验证：微信公众号AlbertYang
</title>
-
<style type="text/css">
-
body {
-
background:
#ccc;
-
}
-
-
label {
-
width:
40px;
-
display: inline-block;
-
}
-
-
span {
-
color: red;
-
}
-
-
.container {
-
margin:
100px auto;
-
width:
400px;
-
padding:
50px;
-
line-height:
40px;
-
border:
1px solid
#999;
-
background:
#efefef;
-
}
-
-
span {
-
margin-left:
30px;
-
font-size:
12px;
-
}
-
-
.wrong {
-
color: red
-
}
-
-
.right {
-
color: green;
-
}
-
-
.defau {
-
width:
200px;
-
height:
20px;
-
}
-
-
.de1 {
-
background-position:
0 -
20px;
-
}
-
</style>
-
-
</head>
-
-
<body>
-
<div class="container" id="dv">
-
<label for="qq">Q Q
</label>
<input type="text" id="qq">
<span>
</span>
<br />
-
<label>手机
</label>
<input type="text" id="phone">
<span>
</span>
<br />
-
<label>邮箱
</label>
<input type="text" id="e-mail">
<span>
</span>
<br />
-
<label>座机
</label>
<input type="text" id="telephone">
<span>
</span>
<br />
-
<label>姓名
</label>
<input type="text" id="fullName">
<span>
</span>
<br />
-
</div>
-
<script>
-
// qq
-
checkInput(
document.getElementById(
"qq"),
/^\d{5,11}$/);
-
// 手机
-
checkInput(
document.getElementById(
"phone"),
/^\d{11}$/);
-
// 邮箱
-
checkInput(
document.getElementById(
"e-mail"),
/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
-
// 座机号码
-
checkInput(
document.getElementById(
"telephone"),
/^\d{3,4}[-]\d{7,8}$/);
-
// 中文名字
-
checkInput(
document.getElementById(
"fullName"),
/^[\u4e00-\u9fa5]{2,6}$/);
-
-
// 根据文本框和这个文本框相应的正则表达式，验证当前文本框中的值，与给出的正则表达式否匹配
-
function checkInput(input, reg) {
-
// 文本框失去焦点的事件
-
input.onblur =
function() {
-
if (reg.test(
this.value)) {
-
this.nextElementSibling.innerText =
"正确";
-
this.nextElementSibling.style.color =
"green";
-
}
else {
-
this.nextElementSibling.innerText =
"错误,请您重新输入";
-
this.nextElementSibling.style.color =
"red";
-
}
-
};
-
}
-
</script>
-
</body>
</html>
-
4.2 过滤敏感词汇案例
演示地址：https://www.albertyy.com/2020/10/filter.html
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>过滤敏感词汇：公众号AlbertYang
</title>
-
</head>
-
<body>
-
<textarea name="" id="message">
</textarea>
<button>提交
</button>
-
<div>
</div>
-
<script>
-
var text =
document.querySelector(
'textarea');
-
var btn =
document.querySelector(
'button');
-
var div =
document.querySelector(
'div');
-
btn.onclick =
function() {
-
div.innerHTML = text.value.replace(
/激情|gay|AV/g,
'**');
-
}
-
</script>
-
</body>
-
</html>
5 总结
本文从正则表达式的基本概念入手，讲解了正则表达式的特点和组成，并且详细讲解了正则表达式在JavaScript中的使用，并给出了一些在实际开发中经常用到的实例。对于刚接触的人来说，正则表达式比较晦涩难懂。比如：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$。在实际开发中，我们一般都是在网上搜索好的正则表达式，能够根据实际情况修改正则表达式即可。比如用户名: /^[a-z0-9_-]{3,16}$/。
今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。如果想继续学习提高，欢迎关注我，每天学习进步一点点，就是领先的开始。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！
转载：https://blog.csdn.net/qq_23853743/article/details/109267876
查看评论