美文网首页Web前端之路前端开发技巧前端开发
web前端篇:JavaScript正则表达式(2)方法

web前端篇:JavaScript正则表达式(2)方法

作者: 前端大叔熟 | 来源:发表于2019-06-16 16:07 被阅读0次

    1 test方法
    ​ 检索字符串中指定的值。返回 true 或 false。 检索字符串中指定的值。返回 true 或 false。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>text</title>
    </head>
    <body>
        <script type="text/javascript">
            var reg = /123/g;
            var str = 'hello123hello123';
            console.log(reg.test(str));//true
            console.log(reg.lastIndex);//8
            console.log(reg.test(str));//true
            console.log(reg.lastIndex);//16
            console.log(reg.test(str));//false
            console.log(reg.lastIndex);//0
            
        </script>
    </body>
    </html>
    //使用了g修饰符的正则表达式,表示要记录每一次搜索的位置,接着使用test方法,每次开始搜索的位置都是上一次匹配的后一个位置。
    

    3.2 exec方法
    ​ 方法用于检索字符串中的正则表达式的匹配。返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>exec</title>
    </head>
    <body>
        <script type="text/javascript">
            var str='abc';
            var reg1 = /x/;
            var reg2 = /a/;
            console.log(reg1.exec(str));//null
            console.log(reg2.exec(str));//array["a", index: 0, input: "xyz"]
    
        </script>
    </body>
    </html>
    

    ​ 如果正则表达式包含圆括号,则返回的数组会包括多个元素。首先是整个匹配成功的结果,后面是圆括号里匹配成功的结果,如果有多个圆括号,他们的匹配成功的结果都会成为数组元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>exec</title>
    </head>
    <body>
        <script type="text/javascript">
            var str='abcdabc';
            var reg1 = /(a)b(c)/;
            console.log(reg1.exec(str));//["abc", "a", "c", index: 0, input: "abcdabc", groups: undefined]
        </script>
    </body>
    </html>
    

    点击领取免费资料及课程

    3 search方法
    ​ search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。

    ​ 返回值: stringObject 中第一个与 regexp 相匹配的子串的起始位置。

    ​ 注释:如果没有找到任何匹配的子串,则返回 -1。

    ​ search() 方法不执行全局匹配,它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性,并且总是从字符串的开始进行检索,这意味着它总是返回 stringObject 的第一个匹配的位置。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>search</title>
    </head>
    <body>
        <script type="text/javascript">
            var str='abcdefgh';
            console.log(str.search('h'))//7
        </script>
    </body>
    </html>
    

    4match方法
    ​ match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

    ​ 字符串对象的match方法与正则对象的exec方法比较类似:但是如果正则表达式带有g修饰符,那么match方法与exec方法就有差别了:可以看到match返回了所有成功匹配的结果,但是exec方法只返回了一个。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>match</title>
    </head>
    <body>
        <script type="text/javascript">
            var str = "abcd";
            var reg1 = /a/;
            var reg2 = /x/;
            console.log(str.match(reg1));//a
            console.log(str.match(reg2));//null
    
            var str2 = "abcabc";
            var reg3 = /a/g;
            console.log(str2.match(reg3));//['a','a']
        </script>
    </body>
    </html>
    

    点击领取免费资料及课程

    5 replace方法

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

    返回值:一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

    ​ 字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>replace</title>
    </head>
    <body>
        <script type="text/javascript">
            var str = "aaa";
            console.log(str.replace('a', 'f'));//fbcdaa
        </script>
    </body>
    </html>
    

    点击领取免费资料及课程

    6 split方法
    ​ split(‘字符串的分割正则','返回数组的最大成员数');返回分割后各部分组成的数组

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>split</title>
    </head>
    <body>
        <script type="text/javascript">
            var str = "a,b,c,d,e,f";
            var res = str.split(",");//以逗号来分割字符串
            console.log(res);//["a", "b", "c", "d", "e", "f"]
            var str2 =  "a, b ,c,d";
            var res2 = str2.split(/, */);//以0或对个逗号空格来分割字符串
            console.log(res2);//["a", "b ", "c", "d"]
        </script>
    </body>
    </html>
    

    7示例:
    从URL中提取子域名

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>split</title>
    </head>
    <body>
        <script type="text/javascript">
              var url = "http://www.abc.com";
              var reg = /[^.]+/;//匹配除了.之外的其他字符
              var res = reg.exec(url)[0].substr(7);
              console.log(reg.exec(url));//["http://www", index: 0, input: "http://www.abc.com"]
              console.log(res);//www
        </script>
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:web前端篇:JavaScript正则表达式(2)方法

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