问答

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

• \d：查找数字；\D 查找非数字字符。

var str = "a1b2c3"
var patt1 = /\d/g  //g表示全局调用
var patt2 = /\d/  //非全局调用
console.log(str.match(patt1))
consloe.log(str.match(patt2))

• \w：查找单词字符（字母、数字、下划线）；\W：查找非单词字符。

var str = "a1b2c3"
var patt1 = /\w/g  //g表示全局调用
var patt2 = /\w/  //非全局调用
console.log(str.match(patt1))
consloe.log(str.match(patt2))

• \s：查找空白字符（空格、tab、换行、回车）；\S：查找非空白字符。

var str = "You are the best"
var patt1 = /\s/g
var patt2 = /\s/
console.log(str.match(patt1))
consloe.log(str.match(patt2))

• [a-zA-Z0-9]：查找任何从a到z、从A到Z以及0到9的字符或者数字。（中括号表示匹配内部任意字符，可以连写）
• \b：匹配单词边界；\B：匹配非单词边界。(这里的单词边界包括开头、结尾、空格、中横线分隔)

var str = "front-end"
var patt1 = /\ben/g  //匹配单词中的en
console.log(str.match(patt1))  

• .：查找单个字符（除了换行和行结束符）。

var str = "That's hot"
var patt1 = /h.t/g  //匹配hat和hot
console.log(str.match(patt1))

• *： 出现零次或多次（任意次）。

var str = "front end engineer"
var patt1 = /ne*/g  //e出现零次或多次
console.log(str.match(patt1))

• +：出现一次或多次（至少出现一次）。

var str = "front end engineer"
var patt1 = /ne+/g  //e出现一次或多次
console.log(str.match(patt1))

• ?：出现零次或一次（最多出现一次）。

var str = "front end engineer"
var patt1 = /ne?/g  //e出现零次或一次
console.log(str.match(patt1))

• x{3}：匹配包含3个x的序列的字符串。

var str = "10 1000 10000"
var patt1 = /\d{3}/g
console.log(str.match(patt1))

• ^：以x开头的字符串

var str="Is this his"
var patt1=/^Is/g
console.log(str.match(patt1))

• $：以x结尾的字符串

var str="Is this his"
var patt1=/is$/g
console.log(str.match(patt1))

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

• 贪婪模式
  上面已经举过例子了，像? + * {n} {n,m} {n,} {,m}这些量词在默认情况下都是尽可能多的匹配，这就是所谓的贪婪模式。
• 非贪婪模式
  非贪婪模式就是和贪婪模式相反，它指的是尽可能少的匹配，一旦匹配到了就不再匹配，也就是在量词2后面加上?。

代码

一、写一个函数trim(str)去除字符串两边的空白字符。

实现方式：

function trim(str) {
    var patt = /^\s+|\s+$/g
    return str.replace(patt, '')
}
console.log(trim(" front end engineer "))

二、使用正则实现addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)。

一个元素的class中间以空格隔开，首先要判断原来的class中是否包含要添加/删除的class再进行操作。

//提示:el为dom元素，cls为操作的class，el.className获取el元素的class
function hasClass(el, cls) {
    //var reg = /^\s+|\s+$/g
    var reg = new RegExp('(\\s|^)' + cls + '(\\b|$)')//因为b包括中横线，所以开头不能用\b
    return reg.test(el.className)
}
function addClass(el, cls) {
     if (!hasClass(el, cls)) {
        return el.className += ' ' + cls 
    }
}
function removeClass(el, cls) {
    if (hasClass(el, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\b|$)', 'g')
        el.className = el.className.replace(reg, '')
    }
}
var n = {
    className: "aside main extra"
}
console.log(hasClass(n, "main"))
addClass(n, "color")
console.log(n.className)
removeClass(n, "aside")
console.log(n.className)

一开始测试的时候用的变量名为name，导致结果一直不对。因为var name等于window.name，而这个name是无法修改的。另外还需要注意的是以后测试不要放在控制台，要写页面测试。

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

邮箱：name@domain。
规则：name可以使用任意ASCII字符，大小写英文字母 a-z,A-Z；数字 0-9；字符!#$%&'*+-/=?^_`{|}~；字符 .不能是第一个和最后一个，不能连续出现两次。
domain仅限于26个英文字母，10个数字和连字符-（不能是第一个），长度为2~6。

function isEmail(str) {
    var reg = /^([\w-_]+(?:\.[\w-_]+)*)@((?:[a-z0-9]+(?:-[a-z0-9]+)*)+\.[a-z]{2,6})$/i  //本来name部分应该可以是任意ASCII字符（!#$%&'*+-/=?^_`{|}~），但是试了好久，结果一直不对，就简化了，验证规则不是很完美。
    return reg.exec(str)
}
    console.log(isEmail('.cttin@163.com'))
    console.log(isEmail('cttin@www.commmmm'))
    console.log(isEmail('cttin@163.com'))

后来找了一下资料发现把上面的\w换成A-Za-z0-9，可以成功运行，不需要转义，不是很明白什么原因。

function isEmail(str) {
    var reg = /^[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*@((?:[a-z0-9]+(?:-[a-z0-9]+)*)+\.[a-z]{2,6})$/i 
    return reg.exec(str)
}

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

function isPhoneNum(str) {
    var reg = /^1[3,4,5,7,8]\d{9}$/
    return reg.test(str)
}
console.log(isPhoneNum('13456890711'))
console.log(isPhoneNum('13c11111111'))
console.log(isPhoneNum('12345678901'))

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

function isValidUsername(str) {
    var reg = /^\w{6,20}$/
    return reg.test(str)
}
console.log(isValidUsername('sss4ffffffffffffgggggggg'))
console.log(isValidUsername('dd_fffff12'))

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

方法一，switch：

function isValidPassword(str) {
    var trueNumber = 0
    var reg = /^\w{6,20}$/
    if(reg.test(str)) {
        switch (true) {
            case(/[A-Z]/.test(str)): trueNumber++;
            case(/[a-z]/.test(str)): trueNumber++;
            case(/\d/.test(str)): trueNumber++;
            case(/[_]/.test(str)): trueNumber++;
            default: break;
        }
    }
     if(trueNumber >= 2) {
        return true;
    }else {
        return false;
    }
}
console.log(isValidPassword('_12abAB--')) 
console.log(isValidPassword('12abA')) 
console.log(isValidPassword('_12ab_')) 
console.log(isValidPassword('123456')) 

方法二，排除法：

function isValidPassword(str) {
   // if(/\w{,6}|\w{20,}/.test(str)) {   这里不能这么写，最小值不能省略。
    if(/\w{0,6}|\w{20,}/.test(str)) {
        return false;  //排除长度不是6-20的字符
    }else if(/[^a-zA-Z0-9_]$/.test(str)) {
        return false;  //排除非大写字母、小写字母、数字和下划线的字符串
    }else if(/^[a-z]+$|^[A-Z]+$|^[0-9]+$|^[_]+$/.test(str)) {
        return false;  //排除只有大写字母、小写字母、数字或者下划线其中一种的字符串
    }else {
        return true;
    }
}
console.log(isValidPassword('222222'))

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

var re = /*正则...*/
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
alert( subj.match(re) )  // #121212,#AA00ef

var re = /#[a-fA-F0-9]{3}\s|#[a-fA-F0-9]{6}/g;
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
alert( subj.match(re) ) //  ["#121212", "#AA00ef", "#fd2 "]（#fd2也是颜色）

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

var str = 'hello  "hunger" , hello "world"';
var pat =  /".*"/g;
str.match(pat);  

代码输出："hunger" , hello "world"
因为这里默认为贪婪模式，会尽可能多的匹配。
若要输出hunger, world，改成非贪婪模式就可以。

var str = 'hello  "hunger" , hello "world"';
var pat =  /".*?"/g;
str.match(pat);  

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

str = '.. <!-- My -- comment \n test --> ..  <!----> .. '
re = /.. your regexp ../

str.match(re) // '<!-- My -- comment \n test -->', '<!---->'

var  str = '.. <!-- My -- comment \n test --> ..  <!----> .. '

//贪婪模式：
var re = /<!--[^>]*-->/g;
str.match(re); // '<!-- My -- comment \n test -->', '<!---->'

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

十、补全如下正则表达式

var re = /* your regexp */

var str = '<> <a href="/"> <input type="radio" checked> <b>'
str.match(re) // '<a href="/">', '<input type="radio" checked>', '<b>'

// 贪婪模式
var re = /<[^>]+>/g
// 非贪婪模式
var re = /<[a-z].*?>/g 

var str = '<> <a href="/"> <input type="radio" checked> <b>'
str.match(re) // '<a href="/">', '<input type="radio" checked>', '<b>'

---

还是九月份写的，没有发表，继续回来加油了。

---