js正则

问答

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

1.\d    //数字
var str="Hello world 3"
str.match(/\d/g)  // 3
2.\w   //单词字符，字母、数字下划线
var str="Hello world_3#"  
str.match(/\w/)  // [ 'H', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd', '_', '3' ]
3.\s    //空白符
var str="Hello world_3#"  
str.match(/\w/)  // [ ' ' ]
4.[a-zA-Z0-9]    //从a至z，从A至Z，从0至9
var str="Hello world_3#"  
str.match(/\w/)  //  [ 'H', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd', '3' ]
5.\b    //匹配单词边界
var str="Hello world_3#"  
str.match(/\w/)  //  [ 'Hello' ]
6.. //除了回车和换行之外的所有字符
var str="Hello _3#"  
str.match(/\w/)  //  [ 'H', 'e', 'l', 'l', 'o', ' ', '_', '3', '#' ]
7.*    //出现零次或多次（任意次）
var str="Hello world_3#,how are you"  
str.match(/how*/g)  //  [ 'how' ]
8.+    //出现一次或多次（至少一次）
var str="Hello world_3#,how are you"  
str.match(/how*/g)  //  [ 'how' ]
9.？    //出现零次或一次(至多一次)
var str="Hello world_3#,howhow are you"  
str.match(/how?/g)  //  [ 'how'  'how' ]
10.x{3}    //x出现3次
var str="Hello world_123#,how12how are you"  
str.match(/\d{3}/g)  //  [ '123' ]
11.^$    //^匹配以该字符开头；$匹配以该字符结尾
var str="Hello world_123#,how are you"  
str.match(/^Hello/g)  //  [ 'Hello' ]
str.match(/you$/g)  //  [ 'you' ]

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

贪婪模式：最大长度匹配，也就是满足条件尽可能多的匹配
非贪婪模式：匹配到结果就好，尽可能少的匹配
正则默认的是贪婪模式

代码

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

var str="   How are you?   "
function trim(str){
    if(str.match(/^\s|\s$/)){
        return str.replace(/^\s+|\s+$/g,'')
    }
    else
        return str;
}
console.log(trim(str))

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

//提示: el为dom元素，cls为操作的class， el.className获取el元素的class
function addClass(el, cls){
    var reg = new RegExp("\\b"+cls+"\\b","g");
    if( (el.className).match(reg) ){
        return className += ' '+cls;
    }
}
function hasClass(el, cls){
    var reg = new RegExp('\\b'+cls+'\\b','g');
    return (el.className).match(reg);
}
function removeClass(el,cls){
    var reg = new RegExp("\\b"+cls+"\\b","g");
    if( (el.className).match(reg) ){
        return ( el.className ) = ( el.className ).replace(reg,'') ;
    }
}
var el = document.getElementById('test');
var cls = 'wrap';

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

function isEmail(str){
    reg=/(^\w+)\@(\w+)\.com$/g;
    return reg.test(str);
}

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

function isPhoneNum(str){
    reg=/^1[3-8]\d{9}$/;
    return reg.test(str);
}

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

function isValidUsername(str){
    reg=/^\w{6,20}$/;
    return reg.test(str)? "合法":"非法";
}

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

function sValidPassword(str){
    if(/[^\w]+/.test(str)){
        return false;
    }
    else if(/[^\w]{6,20}/.test(str))
        return false;
    else if(/^[0-9]+$|^[a-z]+$|^[A-Z]+$/.test(str))        
        return false;
    else
        return true;
}

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

var reg = /#[0-9a-zA-Z]{6}/g
var subj = "color: #121212;background-color: #AA00ef;width: 12px; bad-colors: f#fddee #fd2 "
alert( subj.match(re) ) //#121212,#AA00ef

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

var str = 'hello "hunger" , hello "world"';
var pat = /".*"/g;
str.match(pat);
// "hunger" , hello "world" 因为.*为贪婪模式 会尽可能多的匹配其中的字符
// 修改一
var str = 'hello "hunger" , hello "world"';
var pat = /".*?"/g;
str.match(pat);
// 加上？就会变成懒惰模式 
// 修改二
var str = 'hello "hunger" , hello "world"';
var pat = /"[^"]+"/g;
str.match(pat); 

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

// 贪婪模式
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /<!--[\W\w]*?-->/g
str.match(re) // '<!-- My -- comment \n test -->', '<!---->'
// 非贪婪模式
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /<[^<]+>/g
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>'

本文版权归本人（帘外修竹）所有，转载须说明来源