JS 正则表达式的几个练习

最新推荐文章于 2022-08-16 11:01:39 发布

BowenXu11

最新推荐文章于 2022-08-16 11:01:39 发布

阅读量177

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/BowenXu11/article/details/105470255

版权

javascript 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            //提取email
            var string = '李天命:litianming@126.com,王宝宝:wangbbb@sina.com'
            this.document.getElementById('BTn').onclick = function () {

                alert(string.match(/\w+@\w+.\w+/g));
            };
            //电话号码隐藏
            this.document.getElementById('btnReplace').onclick = function () {
                var str = document.getElementById('inputText').value;
                str = str.replace(/(\d{3})(\d{4})(\d{4})/, '$1$$$$$$$$$3');//转义符两个$ 转义 一个$
                alert(str);
            };
            //输入email
            this.document.getElementById('inputEmail').onchange = function () {
                var str = this.value;
                var regexemail = /^\w+([-_.]\w+)*@\w+([-_]\w+)*(.\w{2,3}){1,2}$/;
                if (regexemail.test(str)) {
                    this.style.backgroundColor = 'green';
                    this.style.color = 'white';
                }
                else {
                    this.style.backgroundColor = 'red';
                    this.style.color = 'white';
                }


            };
            //输入密码判断强度

            this.document.getElementById('inputPWD').onkeyup = function () {
                var pwdStr = 0;//密码强度 1弱，2中，3强
                var str = this.value;
                if (str.match(/\d+/)) {
                    pwdStr++;
                }
                if (str.match(/[A-za-z]+/)) {
                    pwdStr++;
                }
                if (str.match(/[^A-Za-z0-9]/)) {
                    pwdStr++;
                }
                //判断强度
                if (pwdStr == 0) {
                    document.getElementById('pwd_tb1_td1').style.backgroundColor = '';
                    document.getElementById('pwd_tb1_td2').style.backgroundColor = '';
                    document.getElementById('pwd_tb1_td3').style.backgroundColor = '';
                }
                else if (pwdStr == 1) {
                    document.getElementById('pwd_tb1_td1').style.backgroundColor = 'green';
                    document.getElementById('pwd_tb1_td2').style.backgroundColor = '';
                    document.getElementById('pwd_tb1_td3').style.backgroundColor = '';
                } else if (pwdStr == 2) {
                    document.getElementById('pwd_tb1_td1').style.backgroundColor = 'green';
                    document.getElementById('pwd_tb1_td2').style.backgroundColor = 'green';
                    document.getElementById('pwd_tb1_td3').style.backgroundColor = '';
                }
                else if (pwdStr == 3) {
                    document.getElementById('pwd_tb1_td1').style.backgroundColor = 'green';
                    document.getElementById('pwd_tb1_td2').style.backgroundColor = 'green';
                    document.getElementById('pwd_tb1_td3').style.backgroundColor = 'green';
                }

            };



        };

    </script>
    <style type="text/css">
        table tr td {
        
            border:1px solid gray;
            width:50px;
            text-align:center;
            line-height:18px;
            background-color:gray;
            color:white;
        }
    </style>
</head>
<body>
    <input type="button" name="name" value="啦啦啦" id="BTn" />
    <div>字符串替换,<br />
    请输入手机号<input type="text" name="name" value="" id="inputText" />
          <br />
          <input type="button" name="name" value="替换" id="btnReplace" />
    </div>
    <div>
        请输入email<input type="text" name="name" value=""  id="inputEmail"/>
    </div>
    <div>
        请输入注册密码<input type="text" name="name" value="" id="inputPWD" />
               <div>
                   <table id="pwd_tbl">
                       <tr>
                           <td id="pwd_tb1_td1">弱</td>
                           <td id="pwd_tb1_td2">中</td>
                           <td id="pwd_tb1_td3">强</td>
                       </tr>
                   </table>
               </div>
    </div>
</body>
</html>