IFE糯米学院-正则表达式入门_ife开头的函数-优快云博客

本文链接：https://blog.youkuaiyun.com/realDE/article/details/60144378

目的

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

参考

实例

查找字符中的‘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) , (?

踩坑后记

先说实现思路吧，首先在输入字母数字汉字的时候，要能根据这些中间夹杂的符号，所以呢，首先匹配的是一串字符前面可能会有若干个这样的干扰字符，以及后面会有若干个干扰字符，所以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()简单一点，但是没有那么强大。
在左进右进的时候都调用这个正则方法，就可以成功啦。
下一个功能是查找功能，这里的坑，真的太多了，好不好！！！抓狂。
我最开始想的办法是遍历当前的list数组，然后匹配到了的话，就返回这个数组的位置，但是我发现这样没有什么卵用，或者特别复杂，因为还涉及到更新dom。坑1
在坑1中挣扎的时候，我当时想到了用再次用match方法，但是很天真的是，直接用arr[i].match的时候是连跪的，后来差文档，match是针对字符串，因为我的默认arr是纯数字，所以必须用toString()把数字转换为字符串。坑2
然后，其实这个是在前面，就是在传值的时候，把输入的匹配字符传入匹配方法的时候，失效。用了各种测试，就是不能单纯的var reg = '/' + str + '/',就连打印出来这样都是对的！！但是就是浏览器爸爸说不行，后来终于查到了，是因为这样直接写正则，str会被解析成正则的一部分，就是就算你拼接对了，他也是错的，所以，要么就按照构造函数new RegExp()重新声明，这里该转义的要转义哦 然么就要 eval("var reg = /" + str + "/");通过这个函数解析一下这个字符串，总之就是那个意思吧。才能够动态传参数。坑3
然后就想到了，直接获取渲染的li标签，然后得到li标签的innerText，在innerText里面用replace再次正则，然后给满足的字符添加一个新的类。反正，就这样终于，可以让正则暂时滚蛋了。哈哈

function search(str){
    //可以用用eval，不然是没有办法的哟。 eval("var reg = /" + str + "/");
//        还可以用构造函数生成新的正则表达式，不然的话，传入的参数只会被当成正则的一部分。
    var reg = new RegExp('(' + str + ')');//不能用g，参考http://blog.youkuaiyun.com/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));
        }
    }
}