最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JS中的正则表达式

    正文概述 掘金(用户5325878085303)   2021-07-30   497

    1.RegExp类型

    ECMAScript通过RegExp类型支持正则表达式。

    let expression = /pattern/flags;
    

    pattern(模式)是任何正则表达式,正则表达式可以带零个或多个flags。

    常见 修饰符(标记)

    修饰符描述
    g全局匹配查找所有匹配项i忽略大小写m使边界字符  ^  和  $  匹配每一行的开头和结尾,记住是多行,而不是整个字符串的开头和结尾。y粘附模式,表示只匹配以lastIndex为开头的字符串。(自动开启全局模式)s默认情况下的圆点  .  是 匹配除换行符 \n 之外的任何字符,加上 s 修饰符之后,  .  中包含换行符 \n。

    例子:

    // 匹配所有以"at"结尾的三字符组合,忽略大小写
    let pattern = /.at/gi;
    

    注:匹配元字符需要转义

    \

    1.1RegExp构造函数

    正则表达式 也可以使用RegExp构造函数来创建,它接收两个参数:模式字符串和(可选的)标记字符串。

    let pattern1 = /[bc]at/i;
    
    // 跟pattern1一样,只不过是用构造函数创建的
    let pattern2 = new RegExp("[bc]at", "i");
    

    \

    注意:因为RegExp的模式参数是字符串,所以在某些情况下需要二次转义。具体做法是对字面量中的每个反斜杠前面再加一个反斜杠**

    1.2 实例属性

    每个RegExp都有用于模式信息的实例属性。

    属性描述
    global、ignorCase、sticky、unicode、multiline、dotAll布尔值。分别判断是否设置了g、i、y、u、m、s标记lastIndex表示在源字符串中下一次搜索的开始位置,始终从0开始source表达式字面量字符串(去掉开始和结尾斜杠)flags标记信息字符串

    1.3实例方法

    ① exec()

    只接收一个参数,即要应用模式的字符串。

    如果找到了匹配项,则返回包含第一个匹配信息的数组;如果没找到匹配项,则返回null。
    返回的数组虽然是Array的实例,但包含两个额外的属性:index和input。

    • index:匹配到字符串的起始位置。
    • input:要查找的字符串

    这个数组的第一个元素是匹配整个模式的字符串,其他元素是与表达式中的捕获组匹配的字符串。如果模式中没有捕获组,则数组只包含一个元素。

    let text = "cat,bat";
    let pattern = /([bc])at/i;
    
    let matches = pattern.exec(text); 
    //["cat", "c", index: 0, input: "cat,bat", groups: undefined]
    console.log(matches[0]); // "cat"
    console.log(matches[1]); // "c"
    console.log(matches.lastIndex); //没有使用全局匹配,永远为0
    

    如果在这个模式上设置了g标记,则每次调用exec()都会在字符串中向前搜索下一个匹配项,如下面的例子所示:

    let text = "cat,bat";
    let pattern = /([bc])at/gi;
    
    let matches = pattern.exec(text); 
    //["cat", "c", index: 0, input: "cat,bat", groups: undefined]
    console.log(matches.lastIndex); // 3
    
    pattern.exec(text); 
    //["bat", "b", index: 4, input: "cat,bat", groups: undefined]
    console.log(matches.lastIndex); // 7
    
    pattern.exec(text); 
    //null
    console.log(matches.lastIndex); // 0
    

    注:如果模式设置了粘附标记y,则每次调用exec()就只会在 lastIndex的位置上寻找匹配项。(自动开启全局模式

    如果匹配中途结束,可以通过调整lastIndex的属性值恢复匹配。

    \

    ② test()

    接收一个字符串参数。如果输入的文本与模式匹配(完全匹配),则参数返回true,否则返回false。

    当我们只关心是否匹配时可以使用test()。

    \

    ③ 其他方法

    • toLocaleString()和toString() :返回其字面量的字符串表示。

      **

      let r = /([bc])at/iy;
      console.log(r.toString()); // "/([bc])at/iy"
      
    • valueOf():返回正则表达式本身

    2.4构造函数属性(静态属性)

    RegExp也有几个静态属性 但不常用。略\

    2.字符串匹配

    1.match()

    本质与RegExp的exec() 方法相同。方法接收一个参数:正则表达式对象,或表达式字符串

    let text = "cat,bat";
    let pattern = /(.)at/i;
    
    let matches = text.match(pattern)
    //let matches = pattern.exec(text);  等价
    
    //["cat", "c", index: 0, input: "cat,bat", groups: undefined]
    console.log(matches[0]); // "cat"
    console.log(matches[1]); // "c"
    console.log(matches.lastIndex); //没有使用全局匹配,永远为0
    

    2.search()

    查找模式,方法接收一个参数:正则表达式对象,或表达式字符串。返回模式第一个匹配的位置索引,如果没找到则返回-1。

    let text = "cat, bat, sat, fat";
    let pos = text.search(/at/);
    console.log(pos); // 1
    

    3.replace()

    用于替换字符串,方法接收两个参数,第一个参数为RegExp对象或字符串、第二个参数为字符串或函数。

    • 第一个参数为字符串则只会替换第一个字符串,如果全部替换,正则表达式必须带全局标记。\

    • 第二个参数是字符串时有几个特殊字符,可用来表示匹配到的值
      nn09n:n为0-9,n:n为0−9,1表示第一个捕获组的字符串

      let text = "bat, cat, fat, tat";
      let pattern = /(.)at/g;
      
      let result = text.replace(pattern,"$1$1"); //$1表示分组1 也就是at前面的字符
      console.log(result); //"bb, cc, ff, tt"
      
    • 第二个参数是函数,函数会接收三个参数:匹配的整个字符串、匹配索引、整个字符串。(多个捕获组会传多次)。
      函数应该返回一个字符串,表示替换内容。

      function htmlEscape(text) {
      	return text.replace(/[<>"&]/g,
      		function(match, pos, originalText) {
      			switch(match) {
      				case "<":
      					return "&lt;";
      				case ">":
      					return "&gt;";
      				case "&":
      			        return "&amp;";
      				case """:
      					return "&quot;";
      			}
      		});
      }
      console.log(htmlEscape("<p class="greeting">Hello world!</p>"));
      // "&lt;p class=&quot;greeting&quot;&gt;Hello world!</p>"
      

    4.split()

    用于将字符串分割为数组,第一个参数可以是RegExp对象或字符串,第二个可选参数用于指定数组最大大小。

    let colorText = "red,blue,green,yellow";
    let colors1 = colorText.split(",");
    // ["red", "blue", "green", "yellow"]
    let colors2 = colorText.split(",", 2);
    // ["red", "blue"]
    let colors3 = colorText.split(/[^,]+/);
    // ["", ",", ",", ",", ""] 如果分隔符在开头和结尾出现,数组的前后就会出现空字符串元素
    

    起源地下载网 » JS中的正则表达式

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元