正则表达式面试题

- 日理万妓 2022-11-28 13:25 179阅读 0赞

**切记：正则表达式匹配的是片段，是符合条件的某段字符串或几段字符串！**

**1、 给一个连字符串例如：get-element-by-id转化成驼峰形式。**

var str = "get-element-by-id";
    var reg = /-(\w)/g;
    console.log(str.replace(reg, function(match, p1){
        return p1.toString().toUpperCase();
    })); //getElementById

字符串的转为大写：toUpperCase()；转为小写：toLowerCase()

**2、匹配一个\[1-255\]的数字**

括号内匹配符合条件的值都可以，但是要以匹配的括号内容开头且结尾。这样就不会匹配345中的34和5了。

var str = "248";
    var reg = /^([1]\d\d|[2][0-4]\d|[2]5[0-5]|[1-9]\d|[1-9])$/
    console.log(str.match(reg));

**3、匹配ip地址**

var str = "248.89.31.26";
    var reg = /^(([1]\d\d|[2][0-4]\d|[2]5[0-5]|[1-9]\d|[1-9])\.){3}([1]\d\d|[2][0-4]\d|[2]5[0-5]|[1-9]\d|[1-9])$/
    console.log(str.match(reg));

打印结果：

![20200817200423780.png][]

**4、关于开头和结尾**

开头^和结尾$运算符 的优先级只大于 或 |

开头或结尾运算符修饰的是整个正则，除非有或

比如：匹配以多个数字和m开头的片段

var str = "12346m";
    var reg = /^\d+m/g;
    console.log(str.match(reg)); //["12346m"]

比如：匹配以多个数字和m结尾的片段

var str = "12346m";
    var reg = /\d+m$/g;
    console.log(str.match(reg)); //["12346m"]

再比如：匹配以多个数字和m开头，且以这个几个数字和这个m结尾！因为^$同时修饰的是匹配到的该片段！

var str = "12346m";
    var reg = /^\d+m$/g;
    console.log(str.match(reg)); //["12346m"]

如果有或|，匹配以多个数字开头的片段 或者 以m结尾的片段

var str = "12346m";
    var reg = /^\d+|m$/g;
    console.log(str.match(reg)); //["12346", "m"]

**5、量词之间要用()，连着两个量词的正则表达式是错误的！**

var reg = /\d{1,3}*/g

量词\{1,3\}后面再跟量词\*将会报错！！！

**6、子表达式嵌套子表达式，他们的先后顺序，谁是$1，谁又是$2**

下面表达式reg1，**(\\d\{1,3\})**是第一个子表达式；**((\\d\{3\})\*)**第二个子表达式；**(\\d\{3\})**第三个子表达式。

**特点：正则中，括号从左到右，从外到内**

var str = "1234567890";
    var reg1 = /^(\d{1,3})((\d{3})*)$/
    var reg2 = /\d{3}/g
    console.log(str.match(reg1))
    var replaceStr = str.replace(reg1, function (match, p1, p2, p3) {
        return p1 + p2.replace(reg2, ",$&")
    })
    console.log(replaceStr);

**7、子表达式后面跟有量词，最后一次匹配到的内容，作为子表达式的值**

我们知道非全局匹配下的match方法的结果和exec方法的结果一样，会得到所有的匹配信息，包括子表达式的内容。

以下例子中，子表达式的值是456，匹配多个3数字，最后一个3数字的内容。

var str = "12345678";
    var reg = /(\d{3})*/
    console.log(str.match(reg))
    ["123456", "456", index: 0, input: "12345678", groups: undefined]

** 8、| 或情况下的子表达式可能是undefined**

在或 | 的情况下，有的子表达式未匹配到内容，其值是undefined。

结果会有第二个子表达式的值，但值是undefined。如果继续往后面匹配，比如用exec多次执行往后匹配，当匹配b1的时候，第一个子表达式是undefined，而第二个子表达式是b1。

var str = "a1b1a2b2";
    var reg = /(a\d)|(b\d)/
    console.log(str.match(reg))
    
    ["a1", "a1", undefined, index: 0, input: "a1b1a2b2", groups: undefined]

**9、如何让正则表达式匹配先匹配后面的片段，再匹配前面的片段**

我们知道正则表达式是从字符串的前面开始匹配，即从左到右进行匹配寻找符合条件的片段，比如：

下面字符串“12345”，匹配连续的两个数字，会匹配到12 和 34；而不是 23 和45

var str = "12345";
    var reg = /\d{2}/g
    console.log(str.match(reg)); //["12", "34"]

如果就是想匹配23和45呢？我们必须使用$符，因为我们无法从右往左匹配，只能先把2345匹配出来，再进行匹配拆分：

var str = "12345";
    var reg1 = /(\d{2})+$/g
    var reg2 = /\d{2}/g;
    console.log(str.match(reg1)[0].match(reg2)) // ["23", "45"]

**10、关于$符，结尾的作用时的匹配匹配规则**

没有$符时，\\d\{1,3\}会先匹配三个数字，(\\d\{3\})\*再匹配三个数字。然后\\d\{1,3\}再匹配剩下的78

var str = "12345678";
    var reg = /\d{1,3}(\d{3})*/g
    console.log(str.match(reg))  // ["123456", "78"]

如果非全局匹配：也先匹配3个数字

var str = "12345678";
    var reg = /\d{1,3}(\d{3})*/
    console.log(str.match(reg))
     // ["123456", "456", index: 0, input: "12345678", groups: undefined]

如果有开头符号，也是先匹配3个数字

var str = "12345678";
    var reg = /^\d{1,3}(\d{3})*/g
    console.log(str.match(reg)) // ["123456"]

我们再来看看有$符时，**\\d\{1,3\}**就会优先让**(\\d\{3\})\***先匹配符合的数字，剩下的再由**\\d\{1,3\}**匹配，这样**\\d\{1,3\}就不会先匹配了。**

var str = "12345678";
    var reg = /\d{1,3}(\d{3})*$/g
    console.log(str.match(reg)) // ["12345678"]

匹配结果：\["12345678"\]，345和678是**(\\d\{3\})\*匹配到的，12是\\d\{1,3\}匹配到的。**

**如果同时有开头符^和结束符$:还是先倒着匹配，即先看 (\\d\{3\})\* 再看\\d\{1,3\}。这就是$符的特性**

var str = "12345678";
    var reg = /^\d{1,3}(\d{3})*$/g
    console.log(str.match(reg)) //["12345678"]

**11、重点例题**

给一串数字添加千位分号

比如：

1234567 ——》 1,234,567

12 ——》 12

123456 ——》 123,456

实现：通过reg1的$符的特性和^$符锁定，得到两部分，第一部分是前面剩余的数字，第二部分是后面长度为3的倍数部分。

当执行replace方法时，通过子表达式得到第二部分的内容，在用新的正则reg2添加逗号，从而实现

**12、gulp打包的时候，需要对html htm jsp文件中的js、css的版本号进行修改。我们要匹配文件中的css和js**

以css为例：注意myselfCss是我自己实现的，匹配注意点：

（1）有些位置是可以有空格的，可以适当的进行匹配；但是href属性的地址中不允许有空格。

（2）.\*来匹配不确定的部分，比如rel="stylesheet"，link标签中不仅有ref属性，重要的是必须有href属性。

（3）版本的标示不一定非要用字符t，可以是任意字符，但是为了规范，项目写的时候，就字符来标示版本变量吧。

这里必须吐槽一下：regCss是他们写项目的时候写的，用了很多没必要的()，是对正则匹配的优先级不了解造成的。

var str = '<link rel="stylesheet" href=" https://m/aaf_da-adas.css?t=12341234">';
    var regCss = /<link.*href=("|')([^\"\']+.css((\?[a-z]|\_|\.)=([0-9a-zA-Z\.\_]+))*)("|')(.*)?\/?>/g;
    var myselfCss = /<link.*href\s*=\s*(?:"|')\s*[^ ]*\.css\?[a-z]=[\w.]*\s*(?:"|')\s*>/g
    console.log(str.match(myselfCss))
    console.log(str.match(regCss))
    
    ["<link rel="stylesheet" href=" https://m/aaf_da-adas.css?t=12341234">"]
    ["<link rel="stylesheet" href=" https://m/aaf_da-adas.css?t=12341234">"]

**13、相关的一些练习题**

//清除"数字"和"."以外的字符
        var str = "123@ da.2.99h";
        var reg = /[^\d.]/g
        console.log(str.replace(reg,""))
    
        //验证第一个字符是数字
        var str = "123@ da.2.99h";
        var reg = /^\d/;
        console.log(str.match(reg))
    
        //只保留第一个字符, 清除多余的
        var str = "safsfw1231";
        var reg = /(.).*/g;//匹配整个str
        console.log(str.replace(reg,"$1"))//用第一个字符替换整个str
    
        //只能输入两个小数
        var str = "0.12";
        var reg = /^\d+\.\d{2}$/g
        console.log(str.match(reg))
        </script>

**14、js校验同时包含三项（大、小写字母，数字）**

[20200817200423780.png]: /images/20221124/776c15b37f174583a5641f6bac0415e4.png