• JS种正则表达式的基础用法


    基础语法

    元字符
    常用元字符 含义
    . 匹配除换行符以外的任意字符
    w 匹配字母数字或下划线
    W 匹配不是字母、数字、下划线的字符
    d 匹配数字,相当于[0-9]
    D 匹配不是数字的字符
    s 匹配任意不可见字符,包括空格、制表符、换行符等
    S 匹配任意可见字符
    ^ 匹配字符串的开始位置
    $ 匹配字符串的结束位置
    量词
    量词 含义
    * 重复任意次,相当于{0,}
    ? 重复0次或1次,相当于{0,1}
    + 重复1次或更多次,相当于{1,}
    {n} 重复n次
    {n,} 重复n次或者大于n次
    {n,m} 重复n到m次
    分支&字符集

    简单理解就是对某个字符界定的一个选择范围

    1. (a|b|c)
    2. [abc] === [a-c]
    3. [^abc] === [^a-c]
    转义

    使用转义,我的理解是凡是不是表达它原本含义的字符就要转义,例如

    /d/ 表示的是匹配纯数字
    /\d/ 表示的是匹配'd'这个字符串
    /d/.test('2')   //true
    /\d/.test('2')  // false
    /\d/.test('\d')   //true
    

    当然,这还只是针对以开头的那些元字符,还有那些量词当表示普通字符串时也要转义的,大体有这些:

    • . ? + $ ^ [ ] ( ) { } | /
    常用修饰符
    1. g → 全局搜索(global)
    2. i → 不区分大小写(ignoreCase)
    3. m → 多行搜索(multiline)
    4. y → 执行“粘性”搜索,匹配从目标字符串的当前位置开始,可以使用y标志。(sticky)

    使用正则表达式

    正则表达式可以被用于RegExp的exec和test方法以及 String的match、replace、search和split方法

    方法 描述
    exec 一个在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回null)。
    test 一个在字符串中测试是否匹配的RegExp方法,它返回true或false。
    match 一个在字符串中执行查找匹配的String方法,它返回一个数组或者在未匹配到时返回null。
    search 一个在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。
    replace 一个在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。
    split 一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的String方法。

    实例

    既然前面讲了这么多基本规则,那就试着手写两个日常业务中常见的正则吧

    • 验证手机号
    最简单的验证:
    /^1[0-9]{10}$/.test('18688888888')  //true
    这只是对开始的一位数和后面的10位数做了简单验证,如果需求有别的还可以根据位数做更精细的限制
    
    • 验证邮箱

    邮箱验证正则是个老生常谈的问题了,有很多前端笔试题也喜欢出,之前没有细化了解正则规则之前觉得这题目挺变态的,但现在觉得能够徒手写个简单的邮箱验证出来才能至少证明你了解基本的正则,话不多少,上代码:

    首先看一个正确的邮箱地址:525918717@qq.com
    这里可以差分为'525918717'、'@'、'qq'、'.'、'com'这么几部分,那么对应这几部分的内容初略匹配一下正则就是:
    /^w+@(w+).([a-z]+)$/i.test('525918717@qq.com')  //true
    

    当然,这只是我自己手写的一个基础版,还有更精简的版本,例如

    /[^s@]+@[^s@]+.[^s@]+/.test('525918717@qq.com')   //true
    

    经过对正则一些基础语法的了解,我对正则的理解就是想达到同一个匹配效果可以有多重方式,当然还有一些更高级的用法,像零宽断言和分组引用这些,下次用一篇文章单独讲解吧!

  • 相关阅读:
    ACM学习历程—UESTC 1219 Ba Gua Zhen(dfs && 独立回路 && xor高斯消元)
    ACM学习历程—BZOJ 2115 Xor(dfs && 独立回路 && xor高斯消元)
    ACM学习历程—HDU 5536 Chip Factory(xor && 字典树)
    ACM学习历程—HDU 5534 Partial Tree(动态规划)
    ACM学习历程—HDU 3949 XOR(xor高斯消元)
    CSS 负边距读后感
    移除input number上的spinner
    js另类值交换
    自己写js库,怎么支持AMD
    <strong>和 <b> 的区别
  • 原文地址:https://www.cnblogs.com/wancheng7/p/8688678.html
Copyright © 2020-2023  润新知