JavaScript中常用的正则表达式运算符

前言：正则表达式是一种非常好用的工具，帮助开发人员在开发时，处理字符串时更加高效和灵活；它最大的用处就是在字符串操作中，可以让开发人员快速的字符串匹配、搜索、替换、验证和提取等操作。

 

文章目录：

1. ^ 匹配字符串的开头
2. $ 匹配字符串的结尾
3.  匹配任意单个字符，但不包括行终止符
4. * 匹配前一个表达式零次或多次
5. + 匹配前一个表达式一次或多次
6. ? 匹配前一个表达式零次或一次
7. [] 匹配括号内任意一个字符
8. [^] 匹配括号内的任意一个字符外的字符
9. () 标记一个子表达式的开始和结束位置
10. {n} 匹配前一个表达式恰好 n 次
11. {n,} 匹配前一个表达式至少 n 次
12. {n,m} 匹配前一个表达式至少 n 次，但不超过 m 次
13. 一些案例
    1. 邮箱验证
    2. 邮编(只能为六位)验证
    3. InternetURL验证
    4. 用户名验证
    5. 密码验证
    6. 手机号验证
    7. 证件号验证
    8. 验证一年的12个月验证
    9. 验证一个月的31天验证
    10. 字符是否为英文字母验证
    11. 字符是否为中文验证
    12. 日期类型是否为YYYY-MM-DD hh:mm:ss格式的类型验证
    13. 日期类型是否为hh:mm:ss格式的类型验证
    14. 字符是否为整数验证
    15. 字符是否为双精度验证
    16. 字符只能字母和数字验证

 

HTML代码

首先在html页面创建文本框和按钮方便测试

  
   点击 

一、^ 匹配字符串的开头

/^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,}$/

这个比较复杂，我也是借鉴学习别人的

1. 至少包含一个小字母
2. 至少包含一个大字母
3. 至少包含一个数字
4. 至少包包含一个特殊字符（如@$!%*?&）
5. 总长度至少为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("输入正确") 
    }
   }

 

总结：

使用正则表达式可以进行高效的字符串匹配和替换操作。写了那么多，来个一健三连吧！