乐趣区

关于javascript:面向对象编程正则表达式

jiezi

我置信不论是学什么语言，是哪个派路的对这几个字应该不会生疏吧，正则表达式终于让我给碰到了，之前看到了说实话那是真看不懂，一点脉络没有，猜我都猜不出是什么意思，明天终于把这个理解了一番，大略对正则也有一个把握了，明天次要是学习了 js 的正则一些利用，比如说表单验证啊、中文输出验证啊、敏感词的替换啊、提取字符串啊这些、

1.

首先第一个案例来一个首次意识正则表达式学到的一些根底，是一个座机号码的验证案例，

本案例两个留神点 一个是正则表达式的或只有一个竖线
一个是验证时候数字也要加引号

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <!-- 座机号码验证 全国座机号码两种格局 010-12345678 或者 0100-1234567 -->
    <script>
        var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/
        // var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/
        // var reg = /^\d{3,4}-\d{7,8}$/
        console.log(reg.test('010-12345689'));
        // 本案例两个留神点 一个是正则表达式的或只有一个竖线
        // 一个是验证时候数字也要加引号
    </script>
</body>
</html>

2.

第二个案例来一个替换的案例，这个案例大家应该不生疏，比方在网上问候对方爸妈的时候常常会碰到这种难堪状况，打出了好大些字，很有成就筹备收回去的时候，后果全把精华局部变成了 * 号

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <textarea name=""id="" cols="30" rows="10"></textarea>
    <button> 提交 </button>
    <div></div>
    <script>
        var text = document.querySelector('textarea')
        var btn = document.querySelector('button')
        var div = document.querySelector('div')
        btn.onclick = function() {div.innerHTML = text.value.replace(/ 激情 | 恋情 /g, '**')
        }
    </script>
</body>
</html>

3.

接下来是一个比拟繁琐的一个案例，一个对于表单验证的案例

window.addEventListener('load', function() {var tel = /^1[3|4|5|8|9]\d{9}$/
    var phone = document.querySelector('#tel')
    function getBlur(obj, regexp, str) {obj.onblur = function() {if (regexp.test(this.value)) {this.nextElementSibling.innerText = ''+str+' 输出正确 'this.nextElementSibling.className ='success'} else {this.nextElementSibling.innerText = ''+str+' 输出谬误 'this.nextElementSibling.className ='error'}
        }
    }
    // 1. 手机号码验证
    getBlur(phone, tel, '手机号')
    // 2.QQ 验证
    var regqq = /^[1-9]\d{4,10}$/
    var qq = this.document.querySelector('#qq')
    getBlur(qq, regqq, 'QQ 号')
    // 3. 中文汉字匹配
    // 汉字采纳的正则是中文第一个的 Unicode 编码和最初一个
    var uname = /^[\u4e00-\u9fa5]{2,8}$/
    var nc = this.document.querySelector('#nc')
    getBlur(nc, uname, '昵称')
    // 4. 短信验证码
    var msgreg = /^\d{6}$/
    var msg = this.document.querySelector('#msg')
    getBlur(msg, msgreg, '验证码')
    // 5. 明码
    var pasreg = /^\w{6,16}$/
    var pwd = this.document.querySelector('#pwd')
    getBlur(pwd, pasreg, '明码')
    // 6. 确认明码
    var surePwd = this.document.querySelector('#surepwd')
    surePwd.onblur = function() {if (this.value == pwd.value) {
            this.nextElementSibling.innerText = '明码输出正确'
                this.nextElementSibling.className = 'success' 
        } else {
            this.nextElementSibling.innerText = '两次明码不一样'
                this.nextElementSibling.className = 'error' 
        }
    }
})

5.

而后是对于字符串同时也能被正则所应用的两个 办法一个是替换的 replace 办法，一个是能够作为关键字搜寻的提取办法

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <script>
        /* 将下列字符串应用正则表达式替换文本
        将字符串 'cqyzsC012QzAabcd' 中的 acq(疏忽大小写)替换为 '你好' */
        var str = 'cqyzsC012QzAabcd'
        var str1 = ''str1 = str.replace(/[acq]/gi,' 你好 ')
        console.log(str1);
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <script>
        /* 邮箱提取
        将字符串 ' 小明：大神么么哒，正好是我想要的，我的邮箱是 [email protected] 小红：我老公最爱看这个了，我想给他一个惊喜，么么么哒，邮箱是 [email protected] 我：坏蛋毕生安全，邮箱是[email protected]' 中所有
        的邮箱号码提取进去 */
        var str = '小明：大神么么哒，正好是我想要的，我的邮箱是 [email protected] 小红：我老公最爱看这个了，我想给他一个惊喜，么么么哒，邮箱是 [email protected] 我：坏蛋毕生安全，邮箱是[email protected]'
        // console.log(str);
        var str1 = str.match(/[a-zA-Z][email protected][a-zA-Z0-9]+.com/g)
        console.log(str1);
    </script>
</body>
</html>

前端爱好者，望大佬给个内推机会！！！

退出移动版