正则表达式

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

• \d：查找数字
• \w：查找单词字符（字符、数字、下划线）
• \s：查找空白字符(空格、tab、换行、回车)。
• [a-zA-Z0-9]： 查找任何从 0 至 9 的数字和查找任何从大写 A 到大写 Z 的字符和查找任何从大写 A 到小写 z 的字符。
• \b：匹配单词边界。
• .：查找单个字符，除了换行和行结束符。
• *：匹配任何包含零个或多个 n 的字符串。贪婪模式
• +：匹配任何包含至少一个 n 的字符串。
• ?：匹配任何包含零个或一个 n 的字符串。非贪婪
• x{3}： 匹配包含至少 3个 x 的序列的字符串。
• ^$：只有当字符又是头又是尾的时候才符合；

二 、贪婪模式和非贪婪模式指什么?

• 贪婪模式 ： 正则表达式匹配中，尽可能匹配多的字符串，浏览器默认贪婪模式。
  非贪婪模式：正则表达式匹配中，尽可能少的匹配。如：n?

三、代码题

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

var str = ' i want to play basketball ';
        function trim(str){
            var str2 = str.replace(/^\s/,'');
            var str3 = str2.replace(/\s$/,'');
            return str3;
        }
        trim(str);

2.使用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)

function addClass(el, cls){
 if(!hasClass(el, cls)){
 el.className += ' ' + cls
 }
}
function hasClass(el, cls){
 var reg = new RegExp('(\\s|^)' + cls + '(\\b|$)','g');
 return reg.test(el.className);
}
function removeClass(el, cls){
 var reg = new RegExp('(\\s|^)' + cls + '(\\b|$)','g');
 if(hasClass(el, cls)){
 el.className = el.className.replace(reg,'')
 }
}

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

        var str1 = 'way_ne@qq.com';
        var str2 = 'way_ne@163.cn.net';
        var str3 = 'way_ne@qq.com.cn.net';
        

        function isEmail(str){
            var email = /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/;
            if(email.test(str)){
                console.log('对的，这是一个邮箱地址')
            }else{
                console.log('Oh,is not an avaliable email address')
            }
        }
        isEmail(str1);
        isEmail(str2);
        isEmail(str3);

测试

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

        var str1 = '1325869482';
        var str2 = '15444353642';
        var str3 = '22424245244';
        var str4 = '224242452443';
        function isPhoneNum(str){
            var phone = /^[1][356789](\d+){9}$/;
            if(phone.test(str)){
                console.log('is phone numer')
            }else{
                console.log('unavailable number')
            }
        }
        isPhoneNum(str1);
        isPhoneNum(str2);
        isPhoneNum(str3);
        isPhoneNum(str4);

测试

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

        var str1 = 'way_ne';
        var str2 = 'jimmybaby123';
        var str3 = '123456789123456789123';
        var str4 = 'tommy-kitty';
        function isValidUsername(str){
            var userName = /^(\w){6,20}$/;
            if(userName.test(str)){
                console.log('avaliable username');
            }else{
                console.log('unavailable username');
            }
        }
        isValidUsername(str1);
        isValidUsername(str2);
        isValidUsername(str3);
        isValidUsername(str4);

测试

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

 var str1 = 'luekcni134';
        var str2 = 'DSNCsnc28ld';
        var str3 = '1231121211';
        var str4= 'lnd2e';
        function isValidPassword(str){
            if(str.length<6 || str.length>20){
                return false;
            }
            if(/[^A-Za-z_0-9]/.test(str)){
                return false;
            }
            if(/(^[a-z]+$)|(^[A-Z]+$)|(^_+$)|(^\d+$)/g.test(str)){
                return false;
            }
            return true;
        }
        isValidPassword(str1);
        isValidPassword(str2);
        isValidPassword(str3);
        isValidPassword(str4);

测试

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

var re = /#([0-9a-zA-Z]+){6}/g ;

var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 ";

console.log( subj.match(re) );  // #121212,#AA00ef

测试

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

 //下面代码输出什么? 为什么? 改写代码，让其输出hunger, world.
        var str = 'hello  "hunger" , hello "world"';
        //var pat = /".*"/g; 输出 "hunger" , hello "world"贪婪模式下匹配全局的".*"只要两边界有引号的都会匹配上；
        var pat =  /".*?"/g; 
        // or
        // var pat = /"\w*"/;
        console.log(str.match(pat));

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

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

10.补全如下正则表达式

var re = /<[^>]+>/g //贪婪模式
var str = '<> <a href="/"> <input type="radio" checked> <b>'
console.log(str.match(re));// '<a href="/">', '<input type="radio" checked>', '<b>'