1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      javascript正则表达式学习之位置匹配

       更新时间£º2019年04月16日 10:56:44   作者£ºsaucxs   我要评论

      正则表达式是匹配模式£¬要么是匹配字符£¬要么匹配位置¡£在开发中用到位置匹配的机会很少£¬但是小编也给大家介绍下关于正则表达式位置匹配的相关知识£¬感兴趣的朋友跟随小编一起看看吧

      一¡¢前言

      正则表达式是匹配模式£¬要么是匹配字符£¬要么匹配位置¡£

      其实在开发中很少用到匹配位置£¬本篇文章主要包含£º

      二¡¢什么是位置

      位置£º相邻字符之间的位置¡£

      三¡¢如何匹配位置

      在ES5中£¬共有6个锚£º^, $, \b, \B, (?=p), (?!p)

      可视化形式£º

      RegExp£º/^$\b\B(?=a)(?!b)/g

      3.1 ^和$

      ^(脱字符)匹配开头£¬在多行匹配中匹配行开头¡£

      $(美元符)匹配结尾£¬在多行匹配中匹配行结尾¡£

      比如£º我?#21069;?#23383;符串的开头和结尾用#替换£¨位置可以替换成字符?#27169;©£?/p>

      var result = "hello".replace(/^|$/g, '#');
      console.log(result);
      // "#hello#"

      多行匹配模式£¨有修饰符m£©时£¬二者是行的概念£¬我们需要注意£º

      var result = "I\nlove\njavascript".replace(/^|$/gm, '#');
      console.log(result);
      // #I#// #love#// #javascript#
      

      3.2 \b和\B

      \b是单词边界£¬具体就是\w和\W之间的位置£¬也包括\w与^之间的位置£¬和\w和$之间的位置¡£

      比如考察文件名"[JS] Lesson_01.mp4"中的\b£¬如下£º

      var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
      console.log(result);
      // "[#JS#] #Lesson_01#.#mp4#"
      

      首先£¬我们知道\w是字符组[0-9a-zA-Z]的简写£¬?#35789;?#23383;母数字或者下划线中任何一个字符¡£而\W是字符组[^0-9a-zA-Z]的简写£¬即\W是\w以外的任何一个字符¡£

      我们再来看#是怎么来?#27169;?/p>

      第 1 个£¬两边字符是 "[" 与 "J"£¬是 \W 与 \w 之间的位置¡£

      第 2 个£¬两边字符是 "S" 与 "]"£¬也就是 \w 与 \W 之间的位置¡£

      第 3 个£¬两边字符是空格与 "L"£¬也就是 \W 与 \w 之间的位置¡£

      第 4 个£¬两边字符是 "1" 与 "."£¬也就是 \w 与 \W 之间的位置¡£

      第 5 个£¬两边字符是 "." 与 "m"£¬也就是 \W 与 \w之间的位置¡£

      第 6 个£¬位于结尾£¬前面的字符 "4" 是 \w£¬即 \w 与 $ 之间的位置¡£

      知道了\b概念后£¬那\B就?#32654;?#35299;了£¬\b是单词边界£¬\B是非单词边界

      var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#');
      console.log(result);
      // "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"

      3.3 (?=p) 和 (?!p)

      (?=p)其中p是一个子模式£¬即 p前面的位置 £¨该位置后面的字符要匹配p£©

      比如£º(?=e)£¬表示的是e字符前面的位置£»

      var result = "hello".replace(/(?=l)/g, '#');
      console.log(result);
      // "he#l#lo"
      

      而(?!p)就是(?=p)的反面意思

      var result = "hello".replace(/(?!l)/g, '#');
      console.log(result);
      // "#h#ell#o#"

      二者的学名分别是 positive lookahead 和 negative lookahead¡£

      中文翻译分别是 正向先行断言?#21512;?#20808;行断言 ¡£

      ES5 之后的版本£¬会支持 positive lookbehind 和 negative lookbehind¡£

      具体是 (?<=p) 和 (?<!p)¡£

      四¡¢位置特性

      对于位置的理解£¬我们可以累计额成空字符""¡£

      比如"hello"字符串等价于如下形式£º

      "hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "" + "o" + "";

      也等价于

      "hello" == "" + "" + "hello"

      因此£¬把 /^hello$/ 写成 /^^hello$$$/£¬是没有任何问题?#27169;?/p>

      var result = /^^hello$$$/.test("hello");
      console.log(result);
      // true
      

      也就是说£¬字符之间的位置£¬可以写成多个¡£

      注£º把 位置 理解 空字符 £¬是对位置非常有效的理解方式

      五¡¢相关案例

      5.1不匹配任何东西的正则

      /.^/

      正则要求 只有一个字符£¬但是该字符后面是开头 £¬而这样的字符串是不存在的¡£

      5.2数字的千分位分隔符表示法

      比如吧12345678£¬变成12,345,678¡£

      分析£º那就是需要把相应的位置替换成","

      5.2.1弄出来最后一个逗号

      正则£º/(?=\d{3}$)/

      var result = "12345678".replace(/(?=\d{3}$)/g, ',')console.log(result);
      // 12345,678
      

      其中(?=\d{3}$)匹配\d{3}$前面的位置¡£而\d{3}$匹配的是目标字符串最后那3为数字¡£

      5.2.2弄出来多有逗号

      因为逗号的出现的位置£¬要求后边3个数字一组£¬也就是\d{3}至少出现1次¡£

      可以使用?#30475;?+ £º

      var result = "12345678".replace(/(?=(\d{3})+$)/g, ',')console.log(result);
      // 12,345,678
      

      5.2.3匹配其余案例

      写完正则后£¬是需要举个别案例来验证?#27169;?#23601;会发现问题£º

      var result = "123456789".replace(/(?=(\d{3})+$)/g, ',')console.log(result);
      // ,123,456,789
      

      上面的正则£¬仅仅是表示把从结尾向前数£¬一旦是3的倍数买酒吧前面的位置替换为逗号¡£

      还需要要求£º匹配的这个位置不能是开头¡£

      我们知道开头的匹配是使用^£¬但是不是开头怎么整£¿

      使用(?!^)

      var regex = /(?!^)(?=(\d{3})+$)/g;var result = "12345678".replace(regex, ',')console.log(result);
      // "12,345,678"result = "123456789".replace(regex, ',');
      console.log(result);// "123,456,789"
      

      5.2.4支?#21046;?#20182;形式

      如果要把 "12345678 123456789" 替换成 "12,345,678 123,456,789"¡£

      此时我们需要修改正则£¬把里面的开头 ^ 和结尾 $£¬修改成 \b£º

      var string = "12345678 123456789",regex = /(?!\b)(?=(\d{3})+\b)/g;
      var result = string.replace(regex, ',')console.log(result);
      // "12,345,678 123,456,789"
      

      其中(?!\b)怎么理解£¿

      要求是当前的一个位置£¬但不是\b前面的位置£¬其实(?!\b)说的是\B¡£

      因此最终正则变成了£º/\B(?=(\d{3})+\b)/g¡£

      可视化形式£º

      RegExp£º/\B(?=(\d{3})+\b)/g

      5.2.5货币格式化

      千分符表示法一个常见的应用就是货币格式化¡£

      把这个字符串£º

      格式化£º

      $ 1888.00

      实现£º

      function format (num) {return num.toFixed(2).replace(/\B(?=(\d{3})+\b)/g, ",").replace(/^/, "$ ");
      };
      console.log( format(1888) );
      // "$ 1,888.00"
      

      5.3验证密码的问题

      密码长度6-12£¬由数字£¬小写字母£¬大写字母组成£¬但必须至少包括2种字符¡£

      写成多个正则来判断£¬比较容易£¬但是要写成一个正则就比较困难¡£

      来看看我们对于位置的理解是否深刻¡£

      5.3.1简化

      暂时不考虑"必须至少包含2种字符"这个条件£¬可以容易写出£º

      var regex = /^[0-9A-Za-z]{6,12}$/;

      5.3.2判断是否包含?#24515;?#19968;种字符

      假设£¬要求我们必须包含数字£¬怎么整?#30475;?#26102;我们可以使用(?=.*[0-9])?#35789;?#29616;¡£

      正则变成£º

      var regex = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;

      5.3.3同时包含具体两种字符

      比如同时包含数字和小写字母£¬可以使用(?=.*[0-9])(?=.*[a-z])?#35789;?#29616;¡£

      正则变成£º

      var regex = /(?=.*[0-9])(?=.*[a-z])^[0-9A-Za-z]{6,12}$/;

      5.3.3具体实现

      ?#35328;?#39064;变成下列几种情况£º

      1¡¢同时包含数字和小写字母£»

      2¡¢同时包含数字和大写字母£»

      3¡¢同时包含小写字母和大写字母£»

      4¡¢同时包含数字£¬小写字母和大写字母¡£

      以上的4中情况是 的关系£¨?#23548;?#19978;£¬第四条可以不用£©¡£

      最终答案£º

      var regex = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[AZ]))^[0-9A-Za-z]{6,12}$/;console.log( regex.test("1234567") );
       // false 全是数字console.log( regex.test("abcdef") ); 
      // false 全是小写字母console.log( regex.test("ABCDEFGH") ); 
      // false 全是大写字母console.log( regex.test("ab23C") ); 
      // false 不足6位console.log( regex.test("ABCDEF234") ); 
      // true 大写字母和数字console.log( regex.test("abcdEF234") ); 
      // true 三者?#21152;?
      

      可视化形式£º

      RegExp£º/((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[AZ]))^[ 0-9A-Za-z]{6,12}$/

      分析£º

      上面正则看起来好复杂£¬只需要理解第二步£¬/(?=.*[0-9])^[0-9A-Za-z]{6,12}$/£»

      对于这个正则£¬我们需要明白(?=.*[0-9])^这个£»

      分开来看就是(?=.*[0-9]) 和 ^¡£

      表示开头前面还有个位置£¨?#27604;?#20063;是开头£¬即同一个位置£¬想想之前的空字符类比£©¡£

      (?=.*[0-9]) 表示该位置后面的字符匹配¡£

      .*[0-9]£¬即£¬有任何多个?#25105;?#23383;符£¬后面再跟个数字¡£

      翻译成大白话£¬就是接下来的字符£¬必须包含个数字¡£

      5.3.4另外一种解法

      ¡°至少包含两种字符¡±的意思就是说£¬不能全部都是数字£¬也不能全部都是小写字母£¬也不能全部都是大写字母¡£

      那么要求?#23433;?#33021;全部都是数字¡±£¬怎么做呢£¿ (?!p) 出马£¡

      对应的正则£º

      var regex = /(?!^[0-9]{6,12}$)^[0-9A-Za-z]{6,12}$/;

      三种¡°都不能¡±呢£¿

      最终答案是£º

      var regex = /(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/;
      console.log( regex.test("1234567") ); 
      // false 全是数字console.log( regex.test("abcdef") ); 
      // false 全是小写字母console.log( regex.test("ABCDEFGH") ); 
      // false 全是大写字母console.log( regex.test("ab23C") ); 
      // false 不足6位console.log( regex.test("ABCDEF234") ); 
      // true 大写字母和数字console.log( regex.test("abcdEF234") ); 
      // true 三者?#21152;?
      

      可视化形式£º

      RegExp£º/(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/;

      总结

      以上所述是小编给大家介绍的javascript正则表达式学习之位置匹配,希望对大家?#20852;?#24110;助£¬如果大家有任?#25105;ÉÎ是?#32473;我留言£¬小编会及时回复大家的¡£在此也非常感谢大家对脚本之家网站的支持£¡
      如果你觉得本文对你有帮助£¬欢迎转载£¬烦请注明出处£¬谢谢£¡

      相关文章

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>