美文网首页让前端飞JavaScript 进阶营前端开发笔记
无私分享JavaScript的一些RegExp实例和几道面试题

无私分享JavaScript的一些RegExp实例和几道面试题

作者: 果然 | 来源:发表于2019-04-03 11:18 被阅读14次
    原创RegExp面试题无私分享

    转义字符 \

    var zz = document.getElementById('zhengze');
    var str = "abcd\"ef";//abcd"efg
        str = "abcd\\ef";//abcd\ef 转义了转义字符
        str = "abcd\nef";//\n是换行符 但在文档里面无法看到换行
        str = "abc\rdef";//\r 匹配一个回车符
        str = "abc\r\ndef"
    console.log(str);
    zz.innerHTML = str;
    

    转义字符很简单,不解释.

    RegExp的创建方法:

    第一种创建方法 reg.test(str2); i是忽略大小写

    var reg = /abc/;
    var str2 = "abcdefg";
        reg = /abc/i;
        str2 = "AbCdEfG";
    console.log(str2);
    console.log(reg.test(str2));  
    

    第二种创建方法 reg3 = new RegExp("abc");

    var str3 = "abcdef";
    var reg3 = new RegExp('abc');
    console.log(reg3.test(str3));
    

    第二种方法中带参数的 reg4 = new RegExp("abc","i");

    var str4 = "abc24243abcruurabcrwr";
    var reg4 = new RegExp('abc','i');
    var reg6 = new RegExp('abc','g');
    console.log(reg4.test(str4));       
    console.log(str4.match(reg6));
    

    new RegExp()后面的括号里,除了放字符串还能放其他正则表达式.

    var reg5 = new RegExp(reg);
    

    注意:上面的表达式如果不带new,两个都是相同的一个reg.
    test()和match()的使用.
    //reg.test();
    //str.match();

    var str6 = "1 plus 2 equal 3";
    console.log(str6.match(/\d+/g));// ["1", "2", "3"] 数组
    
    var str7 = "abcde\na";
    console.log(str7.match(/^a/gm));//["a", "a"]
    //m的功能——即使断行的字符串,也能匹配的到
    

    注意:上面的例子,展示了m的功能--即使断行的字符串,也能匹配的到.

    量词实例

    //量词 n+
    var reg1 = /\w+/g;
    var str1 = "abc";
    console.log(str1.match(reg1));//["abc"]
    
    //量词 n*  n*  {0, }
    reg1 = /\w*/g;
    console.log(str1.match(reg1));
    //["abc", ""] 两个数值,后面的空数值,是找完第一个数值后,游标所在的位置的数值
    reg1 = /\d*/g;
    console.log(str1.match(reg1));//["", "", "", ""] 
    // \d 匹配数字,因为*,输出4个空数值,也是游标的4各位置
    //n?  n? --> {0,1}
    reg1 = /\w?/g;
    console.log(str1.match(reg1));//["a", "b", "c", ""]
    //n {X}
    reg1 = /\w{3}/g;//3个3个的匹配
    str1 = "abcfsfsfhlkjeoure";
    console.log(str1.match(reg1));// ["abc", "fsf", "sfh", "lkj", "eou"]
    //n{x,y}x到y个
    reg1 = /\w{3,5}/g;//匹配3到5个,能凑5个绝不凑4个,能凑4个绝不凑3个.贪婪匹配
    str1 = "abcfsfsfhlkjeoure3";
    console.log(str1.match(reg1));//["abcfs", "fsfhl", "kjeou", "re3"]
    //n{x,} 匹配x到正无穷大,{1,}===n+, {0,}===n*;
    reg1 = /\w{4,}/g;
    console.log(str1.match(reg1));//["abcfsfsfhlkjeoure3"]
    
    

    面试题1:检验一个字符串首尾是否有数字,注意读题,首或者尾有就行.

    var reg2 = /^\d|\d$/g;
    var str1 = "abcfsfsfhlkjeoure3";
    var str2 = "124shgeighERERdsdf459";
    console.log(str2.match(reg2));//["1", "9"]
    console.log(str1.match(reg2));//["3"]
    

    面试题1-1:检验一个字符串首尾"都"是否有数字

    reg2 = /^\d[\s\S]*\d$/g;
    str2 = "124shgeighERERdsdf459";
    console.log(str2.match(reg2));//["124shgeighERERdsdf459"]
    console.log(str1.match(reg2));//null;
    

    exec方法

    //exec 和 lastIndes
    var reg3 = /ab/g;
    var str3 = "abababababab";
    console.log(reg3.lastIndex);// 0  游标位置
    console.log(reg3.exec(str3));
    // 类数组 ["ab", index: 0, input: "abababababab", groups: undefined]
    console.log(reg3.lastIndex);//2  游标位置
    console.log(reg3.exec(str3));
    //["ab", index: 2, input: "abababababab", groups: undefined]
    

    面试题2:筛选出一个字符串中,4个相同字符的字符串

    var str4 = "aaaabbbb哈哈哈哈";
    var reg4 = /(\D)\1\1\1/g;
    //反向引用子表达式(\w),\1拷贝一份\w ,\1\1\1拷贝3分,形成4个相同的
    console.log(str4.match(reg4));// ["aaaa", "bbbb", "哈哈哈哈"]
    
    
    //找出一个字符串中,"aabb"的字符串
    str4 = "sdsd红红火火恍恍惚惚嘿嘿哈哈";
    reg4 = /(\D)\1(\D)\2/g;
    //\1是匹配一个字符,\2是匹配第二个字符
    console.log(str4.match(reg4)); ["红红火火", "恍恍惚惚", "嘿嘿哈哈"]
    
    //如果不带g, ["红红火火", "红", "火",]
    //其中"红"是第一个子表达式(\D)的内容,"火"是第二个子表达式(\D)的内容
    
    
    //search   
    console.log(str4.search(reg4));// 4 //search返回匹配到的位置
    //search匹配不到返回-1
    
    

    replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

    //replace()方法
    var str5 = "aa";
    var reg5 = /a/g;
    console.log(str5.replace("a", "b"));//ba  //只能匹配一个.
    console.log(str5.replace(reg5, "b"));//bb,如果不加g,也只能匹配一个.
    
    //将"aabb"的字符串,倒过来,变成"bbaa"
    
    var str6 = "sdsd红红火火恍恍惚惚嘿嘿哈哈";
    var reg6 = /(\D)\1(\D)\2/g;
    console.log(str6.replace(reg6, "$2$2$1$1"));
    //sdsd火火红红惚惚恍恍哈哈嘿嘿
    
    console.log(str6.replace(reg6,function(name1,$1,$2){
        //这里的第一个形参,是正则表达式匹配的全局结果aabb,随便给个名字
        //第二个形参是第一个表达式的内容,第三个形参是第二个表达式的内容
        return $2 + $2 + $1 + $1;
    }));//sdsd火火红红惚惚恍恍哈哈嘿嘿
    

    面试题3: 将字符串"the-first-name"变成小驼峰样式

    var reg7 = /-(\w)/g;
    var str7 = "the-first-name";
    console.log(str7.replace(reg7,function(name, $1){
        return $1.toUpperCase();
    }));//theFirstName
    

    正向预查和正向断言

    var str8 = "abaaaaccc";
    var reg8 = /a(?=b)/g;//查找b前面的a
    console.log(str8.match(reg8));//["a"]
    
    reg8 = /a{1,3}?/g;//加个?变成非贪婪匹配,能匹配1个,绝不匹配2个
    console.log(str8.match(reg8)); ["a", "a", "a"]
    

    加个?,变成非贪婪匹配

    var reg9 = /(\w+)\s(\w+)/;
    var str9 = "sfssge wgsg sgsgs sgggdogj"
    console.log(str9.replace(reg9,'$$ $$'));
    //前两个匹配的表达式替换成$ ,$ $ sgsgs sgggdogj
    

    面试题4:将一个字符串内相同的字符去重,过滤成一个.

    var str10 = "aaaabbbbbbccccccdddd";
    var reg10 = /(\w)\1*/g;
    console.log(str10.replace(reg10,'$1'));//"abcd"
    

    面试题5:给你一串字符串,把它按空格分隔开来.

    var reg1 = /\S+/g;
    var str1 = "abc ewur 123 .,.,131";
    console.log(str1.match(reg1));// ["abc", "ewur", "123", ".,.,131"]
    

    下面来点有难度的吧!!

    面试题6:在随机给出的字符串内,匹配第一次出现的数字,要能匹配带小数点数字,能匹配科学计数法的数字,能匹配正负数,如出现192.168.0.1,需要过滤掉后面的.只留下192.168

    var reg1 = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/;
    var str1 = "abc -324.43.123.65+1-23jdgr5685ewur";
    console.log(str1.match(reg1));//"-324.43"
    

    匹配一对儿不能带其他字符的html标签或单个html标签,

    var reg1 = /^<(\w+)\s*\/?>(?:<\/\1>|)$/;
    var str1 = "<div></div>";
    console.log(str1.match(reg1));// <div></div>
    
    var reg1 = /^<(\w+)\s*\/?>(?:<\/\1>|)$/;
    var str1 = "<div>";
    console.log(str1.match(reg1));// <div>
    
    var reg1 = /^<(\w+)\s*\/?>(?:<\/\1>|)$/;
    var str1 = "<2></2>";
    console.log(str1.match(reg1));// <2></2>
    
    var reg1 = /^<(\w+)\s*\/?>(?:<\/\1>|)$/;
    var str1 = "<2>";
    console.log(str1.match(reg1));// <2>
    

    匹配一对儿html标签或单个html标签,可以带其他字符

    var reg1 = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;
    var str1 = "  <div  id='12'>5 55 < /div > ";
    console.log(str1.match(reg1));//   <div  id='12'>5 55 < /div >
    
    var reg1 = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;
    var str1 = "  <div  id='12'>5 55  ";
    console.log(str1.match(reg1));//     <div  id='12'>5 55  
    
    var reg1 = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;
    var str1 = "  <div  id='12'>wrwre5 55 <dsda> ";
    console.log(str1.match(reg1));//   <div  id='12'>wrwre5 55 <dsda> 
    
    

    匹配短横线(-)和它后面的一个字母或数字

    var reg1 = /-([\da-z])/gi;
    var str1 = "-<d-12i3v- - -id='-12'->-w5rwre5 55 -<dsda> ";
    console.log(str1.match(reg1));//  ["-1", "-i", "-1", "-w"]
    

    (?:x)实例
    匹配 x 不会捕获匹配项。这被称为非捕获括号(non-capturing parentheses)。匹配项不能够从结果数组的元素 [1], ..., [n] 或已被定义的 RegExp 对象的属性 1, ...,9 再次访问到。

    var reg1 = /(?:x)/g;
    var str1 = "-<d-12i3v- - -id='x xxx-12'->-w5rwre5 55 -<dsda> ";
    console.log(str1.match(reg1));//  ["x", "x", "x", "x"]
    

    还是 (?:x)的实例
    只返回匹配的内容(包括该组匹配的内容)
    不返回该组匹配的内容.

    var m = 'abc'.match(/(?:.)b(.)/); m // ["abc", "c"]
    
    var reg1 = /(?:.)b(.)/g;
    var str1 = "-<d - idbbbbbb='x xxab1dx-12'b->-w5rwre5 55 -<dsda> ";
    console.log(str1.match(reg1));//  ["dbb", "bbb", "ab1", "'b-"]
    

    相关文章

      网友评论

        本文标题:无私分享JavaScript的一些RegExp实例和几道面试题

        本文链接:https://www.haomeiwen.com/subject/ihdabqtx.html