正则表达式
2022/8/11 6:27:08
本文主要是介绍正则表达式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
正则表达式
1、正则表达式的概述
正则表达式(Regular Expression)是一个描述字符模式的对象, 用于对字符串进行匹配, 一般用在有规律
的字符串匹配中;常用于表单验证以及相关的字符串匹配
2、正则对象的声明
（1）使用//来声明（常用的）
var regx = /a/ //表示匹配a
//字符串支持正则的方法 replace split search match
var str = 'abcdef'
console.log(str.match(regx));
regx = /a/i
console.log('ABC'.match(regx));
（2）使用new关键词来声明
//使用new关键词 参数一是匹配的对应的正则表达式 参数二模式
//i表示不区分大小写 g表示全局搜索
var regx1 = new RegExp('a','i')
var str1 = 'ABC'
console.log(str1.match(regx1));
3、模式修饰
-
g 全局搜索
-
i 不区分大小写
-
m 换行模式
4、正则匹配的元字符
（1）[] 表示里面任意的一个元素
var regx = /[abc]///表示a b c 任意一个
console.log('aaaa'.match(regx));
console.log('bbb'.match(regx));
console.log('ccc'.match(regx));
console.log('dd'.match(regx));
(2)^ 表示开头 $ 表示结尾
var regx1 = /^[abc][123]$///只匹配 a1 a2 a3 b1 b2 b3 c1 c2 c3
console.log('abc1'.match(regx1));
// [a-z]从a到z其中一个 [A-Z]大写的A到大写的Z 所有的字母[A-Za-z] 所有的数字[0-9]
// 数字字母下划线[A-Za-z0-9_]
console.log('abcdef'.match(/^[a-z][a-z]$/));//null
(3){} 表示个数
- {n} 表示n个
- {n,m} 表示n个到m个
- {n,} 表示n个到无穷个
var regx2 = /[a-z]{6}///表示6个小写的字母
regx2 = /[a-z]{0}///表示0个字母
regx2 = /[a-z]{1,3}///表示1到3个
regx2 = /[a-z]{1，}///表示1个到无穷个
（4）+ 表示一个到多个 {1,}
var regx3 = /^[abc]+$/
console.log('aabbcce'.match(regx3));//null
console.log(''.match(regx3));//null
console.log('abbcca'.match(regx3));//匹配
（5）* 表示0个到多个 {0,}
// * 0个到多个 {0，}
regx3 = /^[123]+[456]+[789]$/
console.log('123567'.match(regx3));//匹配
console.log('17867'.match(regx3));//null
console.log('139'.match(regx3));//匹配
console.log('12345'.match(regx3));//null
（6）? 表示0个到一个 {0,1}
// ？ 0个到1个{0,1}
regx3 = /^[1234]?[1234]$/
console.log('1'.match(regx3));//匹配
console.log('1234'.match(regx3));//null
（7）. 表示所有的内容（包括中文字符）
// 表示所有的内容 . （包括中文）
var regx4 = /^.$/
console.log('abc'.match);//null
console.log('h'.match);//匹配
console.log('哈'.match);//匹配
regx4 = /^[.]+$/
console.log('哈'.match(regx4));//null 在[]里面的点识别为. 当前应该匹配多个.
console.log('.'.match(regx4));//null
（8）表示的元字符
- \w 表示对应的字母数字下滑线 \W 就是相反的 不是字母数字下滑线
- \d 表示数字 \D表示非数字
- \s 表示空白字符串（回车 制表 空格） \S就是相反的 不是空白字符
var regx5 = /^\w[123]{2}\w+$/
console.log('abc123123'.match(regx5));//null
console.log('112233'.match(regx5));//匹配
console.log('a12345'.match(regx5));//匹配
console.log('a123'.match(regx5));//匹配
console.log('123'.match(regx5));//null
console.log('1234'.match(regx5));//匹配
（9）() 分组
// ()分组
var regx6 = /^(\w\d\S){3}[0-9]+([123][456])+$/
console.log('123123123123123456'.match(regx6));//null
console.log('1231231231231234'.match(regx6));//匹配
var regx7 =/^[\w]+[123456]+$/
var regx8 = /^[\w]+(123456)+$/
console.log('abc1'.match(regx7));//匹配
console.log('abc1'.match(regx8));//null
（10）| 或者
// | 或者
var regx9 = /^a|b$/
console.log('a'.match(regx9));
console.log('b'.match(regx9));
（11）匹配？ * + .等元字符 转移\
// 匹配？ * + .等元字符 转移\
var regx10 = /^[?]$/
console.log('?'.match(regx10));
var regx10 = /^[*]$/
console.log('*'.match(regx10));
// 用转义字符来
var regx10 = /^\*$/
console.log('*'.match(regx10));
var regx10 = /^\.$/
console.log('.'.match(regx10));
5、正则的检测方法
（1）test 测试 返回一个boolean类型值（是否匹配）
var regx = /\w/
console.log(regx.test('abc')) //true
（2）exec 执行 返回给你一个对应的匹配的数组（如果有就返回一个数组）
var regx = /\d/
console.log(regx.exec('123')) //[1,2,3]
6、字符串支持正则的四个方法
-
split 切割
-
replace 替换
-
search 查找
-
macth 匹配
7、案例
（1） 找出下面字符串中的bag,beg,big,bog, 忽略大小写, 并将其改为bug: ( I am a Big man, I have so mach bag, so veryone call me beg man, bog bog bog, I hate you! )
var str = 'I am a Big man, I have so mach bag, so veryone call me beg man, bog bog bog, I hate you!'
var reg = /(bag|beg|big|bog)/gi
console.log(str.replace(reg,'bug'));
（2）假设有一个多字符的片断重复出现，把"really"、"really really "，以及任意数量连续出现的"really"字符串换成一个简单的"very ” ( Billy tried really hard Sally tried really really hard Timmy tried really really really hard Johnny tried really really really really hard )
var str ='Billy tried really hard Sally tried really really hard Timmy tried really really really hard Johnny tried really really really really hard'
var reg1 = /(really)+/gi
console.log(str.replace(reg1,'very'));
（3）有以下表单, 验证用户名, 密码, 手机号 用户名只包含数字,字母,下划线, 且长度不小于6位 密码长度在8到16位 手机号要合法 保存到cookie中
<style>
.box {
width: 350px;
height: 350px;
background-color: #ccddff;
margin: auto;
}
.boy {
width: 300px;
height: 300px;
background-color: #aabbcc;
position: relative;
left: 5px;
top: 5px;
padding-top: 10px;
}
p {
font-weight: bold;
text-indent: 14px;
}
span {
display: inline-block;
width: 280px;
height: 30px;
background-color: #ffebcd;
position: absolute;
left: 14px;
border-radius: 10px;
display: none;
text-align: center;
font-size: 12px;
line-height: 30px;
}
</style>
<body>
<div class="box">
<div class="boy">
<p>注册</p>
<form action="">
用户名: <input type="text" id="username"> <br> <br>
密 码: <input type="password" id="password"><br> <br>
手机号: <input type="text" id="phone"><br><br>
<button type="submit" id="sub">提交</button>
<button type="reset">重置</button>
<br>
<span></span>
</form>
</div>
</div>
<script>
// 3, 有以下表单, 验证用户名, 密码, 手机号
// 用户名只包含数字, 字母, 下划线, 且长度不小于6位
// 密码长度在8到16位
// 手机号要合法
// 保存到cookie中
// 1.获取页面表单元素
// 2.input 绑定事件监听 失去光标事件
// 3.用户名只包含数字字母下划线 且长度不能少于六位
// ==> /\w{6,}/ 满足 用户名合法 否则 用户名只包含数字,字母,下划线,
// 3.用户名只包含数字字母下划线 且长度不能少于六位
// ==> /\w{6,}/ 满足 用户名合法 否则 用户名只包含数字,字母,下划线,
// 4.密码长度在8到16位
// ==> /\w{8,16}/
// 5.手机号码要合法
// ==>/^[1][3-9][0-9]{8}/
// 6.点击提交时,将获取到的值提保存到cookie中 submit事件
// 1.获取页面表单元素
var form = document.forms[0]
var username = document.getElementById('username')
var password = document.getElementById('password')
var phone = document.getElementById('phone')
var span = document.querySelector("span")
var nameReg = /\w{6,}/
var pawReg = /\d{8,16}/
var telReg = /^[1][3-9][0-9]{8}/
var flag = false;
username.onblur = function () {
if (!nameReg.test(username.value)) {
// console.log(this.value);
// console.log((nameReg.test(this.value)));
flag = false;
this.focus()
span.style.display = "block"
span.innerHTML = `
用户名只包含数字字母下划线 且长度不能少于六位
`
} else {
flag = true;
span.style.display = "block"
span.innerHTML = `
用户可注册
`
}
}
password.onblur = function () {
// 4.密码长度在8到16位
// ==> /\w{8,16}/
if (!pawReg.test(password.value)) {
span.style.display = "block"
flag = false;
this.focus()
span.innerHTML = `
密码长度在8到16位
`
} else {
flag = true;
span.style.display = "none"
}
}
phone.onblur = function () {
// 5.手机号码要合法
// ==>/^[1][3-9][0-9]{8}/
if (!telReg.test(phone.value)) {
flag = false;
this.focus()
span.style.display = "block"
span.innerHTML = `
手机号码不合法
`
} else {
flag = true;
span.style.display = "none"
}
}
document.getElementById('sub').onclick = function () {
if (flag) {
//先去获取对应的cookie
var users = getCookie('users') == '' ? [] : JSON.parse(getCookie('users'))
//创建一个对象
var user = { username: username.value, password: password.value, phone: phone.value }
//将用户添加到cookie中
users.push(user)
//存入cookie
setCookie('users', JSON.stringify(users))
console.log(getCookie('users'));
}
}
</script>
</body>
这篇关于正则表达式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-09-11正则表达式学习：入门指南与实践技巧
- 2024-08-15正则表达式入门：基础教程与实践指南
- 2024-01-0939. 干货系列从零用Rust编写负载均衡及代理，正则及格式替换
- 2024-01-08如何编写高效的正则表达式？
- 2023-12-29"Matlab中的正则表达式：强大而灵活的工具"
- 2023-09-30这个正则 为啥同样的单号第二个就提取不出来？
- 2023-06-086.2 re 正则表达式
- 2023-06-06将字符串里的\x01,\x02这些替换掉用正则表达式无效？
- 2023-05-24正则表达式详解
- 2023-05-17我让gpt写了一段正则表达式代码，可是运行报错，可以帮忙看看哪里出了问题？
