zoukankan      html  css  js  c++  java
  • 正则表达式入门(js版)

    什么是正则表达式

    • 正则表达式 Regular Expression (构造函数 RegExp)
    • 用于字符串匹配规则
    • 要么匹配字符,要么匹配位置

    如何新建正则表达式

    1. 字面量 /[ab]/gim
    const reg = /[\w\*\.]{2}/;
    console.log(reg.test('**')); //true
    
    1. 构造函数 new RegExp([ab${c}]\\d,'gim'); 注意:用构造函数内部表示字符串,当使用\w,\d 等特殊转译字符时候,\默认是当作转译字符串来处理的,所以要多加一个\ 再进行转译。 当正则创建要用到变量时候,必须使用构造函数形式创建!
    const reg = new RegExp('[\\w\*\.]{2}','gim');
    
    // 在正则中插入变量,只能使用构造函数方式新建
    const value = '永远的43';
    const reg = new RegExp(`^${value}号$`);
    const reg.test('永远的43号'); // true
    

    正则字符

    1. 元字符 ( ) [ ] +|{ }. * ? ^ $
      元字符表示在正则中有特殊意义,如果需要使用到元字符的字符串匹配,需要使用转译字符。

    2. 特殊字符(\w, \W, \d, \D, \s, \S等)

    • \w 单词字符[a-zA-Z_0-9]
      
    • \W 非单词字符[^a-zA-Z_0-9]
      
    • \d 数字字符[0-9]
      
    • \D 非数字字符[^0-9]
      
    • \s 空格字符(空格,制表符等)
      
    • \S 非空格字符
      

    一 匹配位置

    位置字符:
    ^ $ \b \B (?=P) (?!p) (?<=p) (?<!p)

    • ^ 表示字符串第一个字符之前位置
    • $表示字符串最后一个字符之后的位置
    // 在字符串开头位置添加一个字符¥,末尾加一个.00 字符
    const str = '5600';
    const money = str.replace(/^/,'¥').replace(/$/,'.00');
    console.log(money); // ¥5600.00
    
    • \b 表示单词字符\w与非单词字符\W之间的位置,也包括\w字符与^和$之间的位置(与\w 一起使用,表示单词边界)

    • \B 表示单词字符之间的位置,非单词字符与^ 和|之间的位置,非单词字符之间的位置(与\w 一起使用,表示单词内部位置)

    • (?=P) 表示 P之前的位置;(?!P)表示除开P之前位置的所有位置

    • (?<=P)表示 P之后的位置;(?<!P)表示除开P之后的位置的所有位置

    // 格式化金额,例如 500000 -> 500,000;-500000->-500,000;
    // 分析:加的,字符不能在头部,也不能在-后面
    // 步骤一
    const reg = /(?=(\d{3})+$)/g;
    const str = '500000';
    const money = str.replace(reg,','); // ,500,000;
    
    // 步骤二:处理,不能出现在字符串首部
    const reg = /(?!^)(?=(\d{3})+$)/g;
    const str = '500000';
    const money = str.replace(reg,','); // 500,000;
    // 貌似满足要求了,bug -500000测试发现...
    const str = '-500000';
    const money = str.replace(reg,','); // -,500,000;
    
    // 步骤三处理不能在-号后
    const reg = /(?!^)(?<!-)(?=(\d{3})+$)/;
    const str = '-500000';
    const money = str.replace(reg,','); // -500,000;
    // okay! 貌似功能确实了,但是 太过复杂了,有没有简单点的方法呢
    
    // 优化: 利用\B,\b 
    const reg = /\B(?=(\d{3})+\b)/; // 大功告成
    

    二 匹配字符

    量词

    量词 次数 标准写法
    * 大于等于0次 {0,}
    + 大于等于1次 {1,}
    ? 0次或者1次 {0,1}
    5次 精准匹配5次 {5}

    贪婪模式 和 惰性模式

    • 贪婪模式:一次匹配尽量匹配量词最多,直到匹配不下,才算一次匹配结束。/g 全局模式,会从上次匹配字符之后继续进行匹配。 默认的量词模式就是贪婪模式。

    • 惰性模式:只匹配量词最少情况,也就是一旦条件满足就结束本轮匹配,/g模式会自动从已经匹配的字符之后开始下一轮匹配。
      如何开启惰性模式,在 量词后面加 ?, 比如 \d[2,4]?
      分支选择模式默认为惰性模式 (a|b|c)当匹配到了分支a,就不会再去匹配分支b或者c

    惰性模式有什么用?

    例如: /a.*?b/g 匹配以a开头,以b结尾 ,中间内容最少 的字符串

    const a = 'abcdacb'
    const reg1 = /a.*b/g
    const reg2 = /a.*?b/g
    console.log(a.match(reg1)); //['abcdacb']
    console.log(a.match(reg2)); //['ab', 'acb']
    

    分组匹配()

    非捕获括号(?: )

    const phone = '18582556244';
    const reg = /(\d{3})(\d{4})(\d{4})/;
    const formatedphone = phone.replace(reg,(str,$1,$2,$3)=>{
        return `${$1}-${$2}-${$3}`
    }); // '185-8255-6244'
    

    反向引用

    通常在分支模式中,表示后续的匹配与上次匹配上的分支保持一致,使用\1,\2表示从左到右第一个括号匹配的内容

    匹配模式 gim

    • g 全局匹配
    • i 忽略大小写
    • m 多行模式

    使用正则方式

    1. 正则的方法

    test 验证 字符串是否满足改正则表达式,返回ture/false

    1. 字符串的方法

    replace,根据正则匹配特定的字符串进行替换,第二个参数可以是函数(在括号分组中有用)

    match,返回满足正则表达式的数组 (/g模式和非/g模式返回的值不同)

    search,搜索返回满足正则表达式的字符串在 原字符串中的起始位置

    split,根据正则进行字符串拆分成数组

    正则小练习

    1. 用正则实现str.trim()功能
    2. 讲金币转化为 ¥1,223,234.98 格式,截取保留两位小数
    3. 将transform_new_data 转化为小驼峰命名
    4. 验证密码(8到12位,数字,小写字母,大写字母,且至少由两种组合而成 )
  • 相关阅读:
    php 处理并发问题
    phpstudy 版本切换注意的问题
    php读取文件内容的三种方法
    防止重复提交表单的两种方法
    php 压缩函数gzencode gzdeflate gzcompress
    回调函数解析
    回调函数
    如何卸载红蜘蛛
    无法启动此程序,因为计算机中丢失MSVCR110.dll的解决方法
    mysql 去除重复 Select中DISTINCT关键字的用法
  • 原文地址:https://www.cnblogs.com/honkerzh/p/15670304.html
Copyright © 2011-2022 走看看