新手入门：JS常用正则表达式及其应用实例

最新推荐文章于 2024-07-14 18:34:56 发布

碳苯

最新推荐文章于 2024-07-14 18:34:56 发布

阅读量280

点赞数 1

文章标签： js 正则表达式 html 字符串

本文链接：https://blog.csdn.net/Serio_gugugu/article/details/117233246

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

为了便于快速上手，我们这里采用简单通俗的语言，并且只介绍简单的正则表达式，深入的内容还得进一步学习…

元字符

比如^ $ \d \w \s等参与构成正则表达式的基本字符
（可以用转义字符辅助记忆）

\d 数字
\w 数字或字母或下划线或汉字（是word的缩写，匹配单词）
\s 匹配任意空格（包括换行等空格）
^放在[]外面（^[…]）表示以…开头；放[]里面（[^…]表示非）
$放在[]末尾([…]$)，表示以[…]结尾
(形为/^[][][]$/的结构叫做严格模式)

限定符

比如{} [] + * ? |等

[]限定内容:/[a-zA-Z0-9]/表示任意字母和数字；/[0-9][a-z]/表示一段数字+一段字母…以此类推;(注意表达100-199的方式是/[1][0-9][0-9]/,思考一下为什么不能是/[100-199]/)
{}限定数量:/[…]{n,m}/即限定[…]中的内容出现过n~m（均取闭区间）次；且可以用{n,}表示至少出现过n次；但是没有{,m};
+等价于{1，}，至少出现过一次
?等价于{0,1}，出现过0或1次
*等价于{0，}，出现过任意次
| 或者

实例：

当输入内容格式不符合规范时：
错误身份证格式

当符合规范时：
正确身份证格式

关键JS代码

	//第一步：选中输入框 和 警告（就是那个红色的!）DOM 方面后面进行操作
	var input = document.getElementsByTagName('input');
    var warning = document.getElementsByClassName('warning');
	
	//第二步：创建一个数组，存放正则表达式
    var regex = [];
    //身份证格式验证
    regex[0] = /^([1-9][0-9]{14})$|^([1-9][0-9]{16}[0-9Xx])$/;
    //邮箱格式验证
    regex[1] = /^[0-9A-Za-z_.-]+[@][0-9A-Za-z-._]+([.][a-zA-Z]+){1,2}$/;
	
	//第三步：对每个input进行事件绑定，
	for(var i = 0; i < input.length; i ++){
       (function(i){
            input[i].onblur = input[i].onfocus = function(){
            //用正则表达式的test方法验证字符串是否匹配
                if(!regex[i].test(input[i].value)){
                //用display做这个效果要更好一点
                    warning[i].style.backgroundColor = "red";
                }
                else{
                    warning[i].style.backgroundColor = "white";
                }
            }
        }(i))        
    }

第三步要是不太懂的话需要先去学习闭包的知识。

解释

regex[0] = /^([1-9][0-9]{14})$|^([1-9][0-9]{16}[0-9Xx])$/;

采用了严格模式（加上了^和$，限定了以…开头，以…结尾）。
若不采用严格模式，由于身份证是15位或18位，那么100位的数字串的子串中也有符合身份证格式的，这会使得100位的这个数字串仍然匹配。
采用严格模式明确了开头结尾，使得长度也被限定。

这个正则表达式内容的解读为：
（以数字1-9开头，然后是14位数字0-9，结束）或者
（以数字1-9开头，然后是16位数字0-9，再是0-9或X或x，结束）

regex[1] = /^[0-9A-Za-z_.-]+[@][0-9A-Za-z-._]+([.][a-zA-Z]+){1,2}$/;

这个正则表达式内容的解读为：
以多个（+表示多个）非特殊字符（数字字母和 .-，注意.-不算特殊字符）开头
然后是一个@，接着又是多个非特殊字符
最后以（.加上多个字母) 出现1~2次结束
（为什么是1-2次？据说是存在.com.cn这样拥有二级域名的邮箱…）

完整参考代码

（很多没完善,求大佬别喷）

<!DOCTYPE html>
<html lang="en">
<style> 
    #list{
        position: relative;
        left: 50%;
        transform: translateX(-50%);

        text-align: center;
        width: 500px;
        height: 350px;
        border:2px solid black;
    }
    ul{
        text-align: center;

    }
    li{
        width: 80%;
        height: 30px;
        line-height: 30px;
        margin: 20px;
        list-style-type: none;
    }
    li div{
        display: inline;
        float: left;
    }
    li input{
        float: right;
        width: calc(100%-50px);
        display: inline;
        
    }
    .warning{
        text-align: center;
        margin-top: 5px;
        width: 25px;
        height: 25px;
        border-radius: 100%;
        background-color: red;
        float: right;
        color: white;
        margin-left: 5px;
        /* display: none; */
                
    }

    input{
        width: 200px;
        height: 30px;
        border: 2px gray solid;
        border-radius: 3px;
        display: block;
    }   
    li::after{
        clear: both;
    }


</style>
<head>
    <script src="../JS/basic.js"></script>
    <!-- <meta http-equiv="refresh" content="3"> -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="list">
        <header>正则表达式验证</header>
        <ul>
            <li>
                <div class="intro">身份证</div>
                <div class="warning">!</div>
                <input type="text" placeholder="请输入身份证号">
                
            </li>
            <li>
                <div class="intro">邮箱</div>
                <div class="warning">!</div>
                <input type="text" placeholder="请输入邮箱">
            </li>
            <li>
                <div class="intro">123</div>
                <div class="warning">!</div>
                <input type="text" placeholder="请输入身份证号">
            </li>
            <li>
                <div class="intro">123</div>
                <div class="warning">!</div>
                <input type="text" placeholder="请输入身份证号">
            </li>
            <li>
                <div class="intro">123</div>
                <div class="warning">!</div>
                <input type="text" placeholder="请输入身份证号">
            </li>
        </ul>
        <button>提交</button>
    </div>
 

</body>
<script>  
    var button = document.getElementsByTagName('button')[0];
    
    var input = document.getElementsByTagName('input');
    var warning = document.getElementsByClassName('warning');
   
    var isAllOK = false;
    
    button.onclick = function(){
        alert("提交成功");
    };

    var regex = [];
    regex[0] = /^([1-9][0-9]{14})$|^([1-9][0-9]{16}[0-9Xx])$/;
    regex[1] = /^[0-9A-Za-z_.-]+[@][0-9A-Za-z-._]+([.][a-zA-Z]+){1,2}$/;
  
    for(var i = 0; i < input.length; i ++){
        (function(i){
            input[i].onblur = input[i].onfocus = function(){
                if(!regex[i].test(input[i].value)){
                    warning[i].style.backgroundColor = "red";
                }
                else{
                    warning[i].style.backgroundColor = "white";
                }
            }
        }(i))        
    }

    var test1 = "1a2b3cddd";
    var regTest = /[0-9][a-z]/;
    var regTest2 = /[0-9][a-z]/g;
    console.log(test1.match(regTest));
    console.log(test1.match(regTest2)); 

</script>
</html>

碳苯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
新手入门：JS常用正则表达式及其应用实例

为了便于快速上手，我们这里采用简单通俗的语言，并且只介绍简单的正则表达式，深入的内容还得进一步学习…元字符比如^ $ \d \w \s等参与构成正则表达式的基本字符（可以用转义字符辅助记忆）\d 数字\w 数字或字母或下划线或汉字（是word的缩写，匹配单词）\s 匹配任意空格（包括换行等空格）^放在[]外面（^[…]）表示以…开头；放[]里面（[^…]表示非）$放在[]末尾([…]$)，表示以[…]结尾(形为/^[][][]$/的结构叫做严格模式)限定符比如{} [] +
复制链接

扫一扫