IFE糯米学院-正则表达式入门

目的

1. 掌握JavaScript正则表达式编写规则
2. 了解JavaScript中的正则表达式的特殊字符
3. 了解JavaScript提供的正则表达式相关方法
4. 能用正则表达式做一些简单文本或者数字校验

参考

• 正则表达式30分钟入门教程:
• github任务代码

实例

• 查找字符中的‘hi’ :
• 匹配‘hi’后面有一个‘lucy’ ：
• 匹配三位区号0开头，‘-’后面8个数字 ：
• 匹配以a开头的单词 ：
• 匹配1个或更多连续的数字：（+和*的区别）
• . , \w , \s , \d , \b , ^ , $ 的作用
• 匹配5-12位数字 ：
• 字符转义：deerchao.net匹配deerchao.net，c:\windows匹配c:\windows,2\^8匹配2^8(通常这是2的8次方的书写方式)。
• 匹配Windows后面跟1个或更多数字 ：
• 匹配以13后面跟9个数字 ：
• 匹配一行的第一个单词 ：
• (?0\d{2}[) -]?\d{8} ：
• 用尖括号括起来的以a开头的字符串 ：
• 匹配两种以连字号分隔的电话号码：一种是三位区号，8位本地号(如010-12345678)，一种是4位区号，7位本地号(0376-2233445) ：
• 匹配3位区号的电话号码，其中区号可以用小括号括起来，也可以不用，区号与本地号间可以用连字号或空格间隔，也可以没有间隔 ：
• (\d{1,3}.){3}\d{1,3} ：
• \b(\w+)\b\s+\1\b ：
• (exp) , (?exp) , (?:exp) , (?=exp) , (?<=exp) , (?!exp) , (?

踩坑后记

1. 先说实现思路吧，首先在输入字母数字汉字的时候，要能根据这些中间夹杂的符号，所以呢，首先匹配的是 一串字符前面可能会有若干个这样的干扰字符，以及后面会有若干个干扰字符，所以var reg = /((?=[(/s,，、)])*[A-z0-9\u4e00-\u9fa5]+(?=[\1])*)/gi; var result = str.match(reg);

   • ？= 是表示比如‘ba’这个字符我要匹配a前面有一个b但是，如果/ba/这样写，就会匹配‘ba’，所以如果用/(?=b)a/应该是这样就可以只匹配a了。
   • [\u4e00-\u9fa5]这个表示的是汉字。
   • [\1]的意思是，(/s,，、)用这个括号代表第一组，然后向后引用。
   • match()是匹配满足的字符串，并且用数组的形式返回这些字符串。比exec()简单一点，但是没有那么强大。

2. 在左进右进的时候都调用这个正则方法，就可以成功啦。

3. 下一个功能是查找功能，这里的坑，真的太多了，好不好！！！抓狂。

4. 我最开始想的办法是遍历当前的list数组，然后匹配到了的话，就返回这个数组的位置，但是我发现这样没有什么卵用，或者特别复杂，因为还涉及到更新dom。坑1

5. 在坑1中挣扎的时候，我当时想到了用再次用match方法，但是很天真的是，直接用arr[i].match的时候是连跪的，后来差文档，match是针对字符串，因为我的默认arr是纯数字，所以必须用toString()把数字转换为字符串。坑2

6. 然后，其实这个是在前面，就是在传值的时候，把输入的匹配字符传入匹配方法的时候，失效。用了各种测试，就是不能单纯的var reg = '/' + str + '/',就连打印出来这样都是对的！！但是就是浏览器爸爸说不行，后来终于查到了，是因为这样直接写正则，str会被解析成正则的一部分，就是就算你拼接对了，他也是错的，所以，要么就按照构造函数new RegExp()重新声明，这里该转义的要转义哦 然么就要 eval("var reg = /" + str + "/");通过这个函数解析一下这个字符串，总之就是那个意思吧。才能够动态传参数。坑3

7. 然后就想到了，直接获取渲染的li标签，然后得到li标签的innerText，在innerText里面用replace再次正则，然后给满足的字符添加一个新的类。反正，就这样终于，可以让正则暂时滚蛋了。哈哈

function search(str){
    //可以用用eval，不然是没有办法的哟。 eval("var reg = /" + str + "/");
//        还可以用构造函数生成新的正则表达式，不然的话，传入的参数只会被当成正则的一部分。
    var reg = new RegExp('(' + str + ')');//不能用g，参考http://blog.csdn.net/u013456765/article/details/52038011
    var members = document.getElementsByClassName('member');
    for(var i = 0; i < members.length; i++) {
        if(reg.test(members[i].innerText)) {
            members[i].innerHTML = members[i].innerText.replace(reg,'<span class="mark">$1</span>');
            //match是针对字符串，所以需要用toString()转换
//               newArr.push(arr[i].toString().match(reg));
        }
    }
}

• 以上所有的答案都可以在给出的参考学习资料上找到哦~

总结

讲真，正则表达式真的很晦涩难懂，反正是要各种折腾的，然后但是发明这个东西的人，真的是棒棒哒哦，哈哈。总之这算是第二次学习正则了，感觉还是很满足咯。