前言:正则表达式是一种非常好用的工具,帮助开发人员在开发时,处理字符串时更加高效和灵活;它最大的用处就是在字符串操作中,可以让开发人员快速的字符串匹配、搜索、替换、验证和提取等操作。
文章目录:
- ^ 匹配字符串的开头
- $ 匹配字符串的结尾
- 匹配任意单个字符,但不包括行终止符
- * 匹配前一个表达式零次或多次
- + 匹配前一个表达式一次或多次
- ? 匹配前一个表达式零次或一次
- [] 匹配括号内任意一个字符
- [^] 匹配括号内的任意一个字符外的字符
- () 标记一个子表达式的开始和结束位置
- {n} 匹配前一个表达式恰好 n 次
- {n,} 匹配前一个表达式至少 n 次
- {n,m} 匹配前一个表达式至少 n 次,但不超过 m 次
- 一些案例
- 邮箱验证
- 邮编(只能为六位)验证
- InternetURL验证
- 用户名验证
- 密码验证
- 手机号验证
- 证件号验证
- 验证一年的12个月验证
- 验证一个月的31天验证
- 字符是否为英文字母验证
- 字符是否为中文验证
- 日期类型是否为YYYY-MM-DD hh:mm:ss格式的类型验证
- 日期类型是否为hh:mm:ss格式的类型验证
- 字符是否为整数验证
- 字符是否为双精度验证
- 字符只能字母和数字验证
HTML代码
首先在html页面创建文本框和按钮方便测试
<input id = "inputid" type="text" style="width:300px; height:50px; border:2px solid red;font-size:30px; ">
<button onclick="regex()" style="width:100px;height:40px;"> 点击 </button>
一、^ 匹配字符串的开头
/^hello/ 匹配以“hello”开头的字符串
Js代码
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /^hello/ ;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
二、$ 匹配字符串的结尾
/hello$/ 匹配以“hello”结尾的字符
Js代码
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /hello$/ ;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
三、 匹配任意单个字符,但不包括行终止符
/h.llo/ 匹配以“h”开头,“llo”结尾,中间包含一个任意字符的字符串(如:hello,hxllo,hcllo)
Js代码
function regex(){
let inputid = document.getElementById("inputid").value;
let regular =/h.llo/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
四、* 匹配前一个表达式零次或多次
/ab*c/ 匹配以“a”开头,以“c”结尾,中间包含零个或多个“b”的字符串(如:ac, abc, abbc, abbbc)
Js代码
function regex(){
let inputid = document.getElementById("inputid").value;
let regular =/ab*c/ ;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
五、+ 匹配前一个表达式一次或多次
/ab+c/ 匹配以“a”开头,以“c”结尾,中间至少包含一个“b”的字符串(如:abc, abbc, abbbc)
Js代码
function regex(){
let inputid = document.getElementById("inputid").value;
let regular =/ab+c/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
六、? 匹配前一个表达式零次或一次
/ab?c/ 匹配以“a”开头,以“c”结尾,中间可以包含一个“b”的字符串(如:ac, abc)
Js代码
function regex(){
let inputid = document.getElementById("inputid").value;
let regular =/ab?c/ ;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
七、[] 匹配括号内任意一个字符
/[aeiou]/ 匹配任意一个元音字母(如:a, e, i, o, u)
Js代码
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /[aeiou]/ ;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
八、[^] 匹配括号内的任意一个字符外的字符
/[^aeiou]/ 匹配任意一个非元音字母
Js代码
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /[^aeiou]/ ;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
九、() 标记一个子表达式的开始和结束位置
/(hello) world/ 匹配“hello world”,并且在结果中把“hello”单独提取出来
Js代码
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /(hello) world/ ;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
十、{n} 匹配前一个表达式恰好 n 次
/a{3}/ 匹配恰好包含三个“a”的字符串(如:aaa)
Js代码
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /a{3}/ ;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
十一、{n,} 匹配前一个表达式至少 n 次
/a{3,}/ 匹配至少包含三个“a”的字符串(如:aaa, aaaaa)
Js代码
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /a{3,}/ ;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
十二、{n,m} 匹配前一个表达式至少 n 次,但不超过 m 次
/a{2,4}/ 匹配至少包含两个“a”,但不超过四个“a”的字符串(如:aa, aaa, aaaa)
Js代码
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /a{2,4}/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
十三、一些案例
1)邮箱验证
/^[^\s@]+@[^\s@]+\.[^\s@]+$/
function regex(){
let inputid = document.getElementById("inputid").value;
let regular =/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
2)邮编(只能为六位)验证
/^[0-9]{6}$/
/^\d{6}$/
function regex(){
let inputid = document.getElementById("inputid").value;
let regular =/^\d{6}$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
3)InternetURL验证
/^(ftp|http|https):\/\/[^ "]+$/
function regex(){
let inputid = document.getElementById("inputid").value;
let regular =/^(ftp|http|https):\/\/[^ "]+$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
4)用户名验证
/^[a-zA-Z0-9_]{6,16}$/
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /^[a-zA-Z0-9_]{6,16}$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
5)密码验证
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
这个比较复杂,我也是借鉴学习别人的
- 至少包含一个小字母
- 至少包含一个大字母
- 至少包含一个数字
- 至少包包含一个特殊字符(如@$!%*?&)
- 总长度至少为8个字符
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
6)手机号验证
/^1[3456789]\d{9}$/
由于手机号段的不断更新,我这里的手机号验证是比较简单的
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /^1[3456789]\d{9}$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
7)证件号验证
/^[1-9]\d{16}[\dXx]$/
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /^[1-9]\d{16}[\dXx]$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
8)验证一年的12个月验证
/^(0?[1-9]|1[0-2])$/
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /^(0?[1-9]|1[0-2])$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
9)验证一个月的31天验证
/^([1-9]|[12][0-9]|3[01])$/
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /^([1-9]|[12][0-9]|3[01])$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
10)字符是否为英文字母验证
/^[a-zA-Z]$/
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /^[a-zA-Z]$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
11)字符是否为中文验证
/^[\u4e00-\u9fa5]$/
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /^[\u4e00-\u9fa5]$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
12)日期类型是否为YYYY-MM-DD hh:mm:ss格式的类型验证
/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/
必须是这种格式:2023-05-29 12:34:56
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
13)日期类型是否为hh:mm:ss格式的类型验证
/^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
14)字符是否为整数验证
/^-?\d+$/
function regex(){
let inputid = document.getElementById("inputid").value;
let regular =/^-?\d+$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
15)字符是否为双精度验证
/^-?\d+(\.\d+)?$/
function regex(){
let inputid = document.getElementById("inputid").value;
let regular =/^-?\d+(\.\d+)?$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
16)字符只能字母和数字验证
/^[a-zA-Z0-9]+$/
function regex(){
let inputid = document.getElementById("inputid").value;
let regular = /^[a-zA-Z0-9]+$/;
if(!regular.test(inputid)){
alert("请输入正确的格式")
return ;
}else{
alert("输入正确")
}
}
总结:
使用正则表达式可以进行高效的字符串匹配和替换操作。写了那么多,来个一健三连吧!