正则表达式

1. \d,\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分别是什么?

\d：数字字符，等价于[0-9]
\w：单词字符，字母、数字、下划线，等价于[a-zA-Z0-9_]
\s： 空白符，等价于[\t\n\x0B\f\r]
\b：单词边界
.： 除了回车符和换行符之外的所有字符，等价于[^\r\n]
*：出现零次或多次（任意次）
+：出现一次或多次
?：出现零次或一次
x{3}：x必须出现3次
^： 首匹配
$: 尾匹配

2. 贪婪模式和非贪婪模式指什么?

贪婪模式：指 {n,m}、?、+、* 这些在默认情况下都是尽最大可能地匹配，直到下一个字符不满足匹配规则为止

非贪婪模式与贪婪模式相反，即尽可能少地匹配，在正则表达式的量词后面添加个 ? 即可

代码

1. 写一个函数 trim(str)，去除字符串两边的空白字符

        var str = "   hello world  ";
        // 方法 1
        function trim(str){
            var pattern = /\b.+\b/g;
            var result = pattern.exec(str);
            return result;
        }
        // 方法 2
        function trim(str){
            var pattern = /^\s*(.+?)\s*$/g;
            var result = pattern.exec(str)[1];
            var result = str.replace(pattern,"$1");
            return result;
        }
        // 方法 3
        function trim(str){
            var pattern = /^\s*|\s*$/g;
            return str.replace(pattern,'');
        }

代码1.png

2. 使用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el, cls)，使用正则表达式

        var preClass = "hello world";
        function addClass(preClass, appendClass){
            var pattern = new RegExp(appendClass,"gi");
            if(pattern.test(preClass)){
                return preClass;
            }else{
                return preClass.concat(" ", appendClass);
            }
        }
        function hasClass(preClass, testClass){
            var pattern = new RegExp(testClass,"gi");
            if(pattern.test(preClass)){
                console.log("已存在该 Class");
            }else{
                console.log("不存在该 Class");
            }
        }
        function removeClass(preClass, reduceClass){
            var pattern = new RegExp("\\s*\\b" + reduceClass + "\\b\\s*","gi");
            if(pattern.test(preClass)){
                return preClass.replace(pattern,"");
            }else{
                return preClass;
            }
        }

代码2.png

3. 写一个函数 isEmail(str)，判断用户输入是不是邮箱

        var email = "hellowold.com@gmail.com";
        function isEmail(str){
            var pattern = /^([\w\.\-]+)@([a-zA-Z0-9]+)\.([a-zA-Z]{2,4})$/;
            if(pattern.test(str)){
                console.log("这是邮箱");
            }else{
                console.log("这不是邮箱");
            }
        }

代码3.png

4. 写一个函数 isPhoneNumber(str)，判断用户输入是不是手机号

        var phoneNumber = "13712345678";
        function isPhoneNumber(str){
            var pattern = /^1([3-9]){2}\d{8}$/g;
            if(pattern.test(str)){
                console.log("这是手机号码");
            }else{
                console.log("这不是手机号码");
            }
        }

代码4.png

5. 写一个函数 isValidUsername(str)，判断用户输入是不是合法的用户名（长度6－20个字符，只能包括字母、数字、下划线）

        var userName = "username_1";
        function isValidUsername(str){
            var pattern = /^\w{6,20}/g;
            if(pattern.test(str)){
                console.log("这是合法用户名");
            }else{
                console.log("这不是合法用户名");
            }
        }

代码5.png

6. 写一个函数 isValidPassword(str)，判断用户输入是不是合法的密码（长度6－20个字符，包括大写字母、小写字母、数字、下划线至少两种）

    function isValidPassword (str){
        if(str.match(/^(?!^\d+$)(?!^[A-Z]+$)(?!^[a-z]+$)(?!^[_]+$).{6,20}$/) && str.match(/^\w{6,20}$/)) {
           console.log("这是合法密码");
        }else{
           console.log("这不是合法密码");
        }
    }

代码6.png

7. 写一个正则表达式，得到如下字符串里所有的颜色（#121212）

        var re = /(\#[0-9a-fA-F]{6})|(\#[0-9a-fA-F]{3})/g;
        var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: #ffddee #fd2 ";
        console.log( subj.match(re) );

代码7.png

8. 下面代码输入什么？为什么？改写代码，让其输出 hunger，world

        var str8 = 'hello  "hunger" , hello "world"';
        var pattern8 = /".*?"/g;
        console.log( str8.match(pattern8) );

如果不加 ?，则是贪婪模式，直接匹配到最后。

代码8_1.png 代码8_2.png

9. 补全如下正则表达式，输出字符串中的注释内容。（可尝试使用贪婪模式和非贪婪模式两种方法）

        var str9 = '.. <!-- My -- comment \n test --> ..  <!----> .. ';
        // 贪婪模式
        var pattern9_1 = /<!--[^>]*-->/g;
        // 非贪婪模式
        var pattern9_2 = /<!--[\w\W]*?-->/g;
        console.log( str9.match(pattern9_1) );
        console.log( str9.match(pattern9_2) );

代码9.png

10. 补全如下正则表达式

        var str10 = '<> <a href="/"> <input type="radio" checked> <b>';
        // '<a href="/">', '<input type="radio" checked>', '<b>'
        // 贪婪模式
        var pattern10_1 = /<[^>]+>/g;
        console.log(str10.match(pattern10_1));
        // 非贪婪模式
        var pattern10_2 = /<[\w].*?>/g;
        console.log(str10.match(pattern10_2));

代码10.png