js 怎么使用正则表达式-JavaScript 正则表达式

2022-12-29 11:14:52 浏览数 (2)

  练习辅助

jsbin

  图文并茂

  什么是正则表达式

   使用单个字符串来描述、匹配一系列符合某个句法规则的字符串

  说简单了是按照某种规则去匹配符合条件的字符串

  RegExp对象

  通过内置对象RegExp支持正则表达式

  有两种方法实例化RegExp对象

  字面量

  var reg = / bisb /g;

   var reg = /bisb/

代码语言:javascript复制
    // undefined
    'He is a boy. This is a dog. Where is she?'.replace(reg, 'IS')
    // "He IS a boy. This is a dog. Where is she?"
    var reg = /bisb/g
    // undefined
    'He is a boy. This is a dog. Where is she?'.replace(reg, 'IS')
    // "He IS a boy. This IS a dog. Where IS she?"

  构造函数

  var reg = new RegExp('bisb', 'g')

   var reg = new RegExp('bisb')

代码语言:javascript复制
    // undefined
    'He is a boy. This is a dog. Where is she?'.replace(reg, 'IS')
    // "He IS a boy. This is a dog. Where is she?"
    var reg = new RegExp('\bis\b', 'g')
    // undefined
    'He is a boy. This is a dog. Where is she?'.replace(reg, 'IS')
    // "He IS a boy. This IS a dog. Where IS she?"

  修饰符

  g:global 全文搜索,不添加,搜索到第一个匹配停止

  i:ignore case 忽略大小写,默认大小写敏感:ignore case 忽略大小写,默认大小写敏感

  m: lines 多行搜索

   'He is a boy. Is he?'.replace(/bisb/g, '0')

代码语言:javascript复制
    // "He 0 a boy. Is he?"
    'He is a boy. Is he?'.replace(/bisb/gi, '0')
    // "He 0 a boy. 0 he?"

  元字符

  正则表达式由两种基本字符类型组成:

  元字符是在正则表达式中有特殊含义字母字符

  * ? $ ^ . | () {} []

  字符类

  我们可以使用元字符 [ ] 来构建一个简单的类

  所谓类是指符合某些特性的对象,一个泛指,而不是特指某个字符

  表达式 [abc] 把字符 a 或 b 或 c 归为一类 ,表达式可以匹配这类的字符

  字符类取反

  使用元字符 ^ 创建 反向类/负向类

  反向类的意思是不属于某类的内容

  表达式 1表示 不是字符a或b或c的内容

   'a1b2c3d4'.replace(/[abc]/g, 'X')

代码语言:javascript复制
    "X1X2X3d4"
    'a1b2c3d4'.replace(/[^abc]/g, 'X')
    "aXbXcXXX"

  范围类

  正则表达式还提供了范围类

  我们可以使用 [a-z] 来连接两个字符表示从a到z的任意字符

  这是个闭区间,也就是包含a和z本身

  在 [] 组成的类内部是可以连写的 [a-zA-Z]

   'a1b2c3x4z9'.replace(/[a-z]/g, 'Q')

代码语言:javascript复制
    // "Q1Q2Q3Q4Q9"
    'a1b2c3x4z9SGASDGA'.replace(/[a-zA-Z]/g, 'Q')
    // "Q1Q2Q3Q4Q9QQQQQQQ"
    '2016-09-12'.replace(/[0-9]/g, 'A')
    // "AAAA-AA-AA"
    '2016-09-12'.replace(/[0-9-]/g, 'A')
    // "AAAAAAAAAA"

  JS预定义类及边界预定义类

  正则表达式提供 预定义类 来匹配常见的字符集

  匹配一个 ab 数字 任意字符 的字符串,abd.

  边界

  正则表达式还提供了几个常用的边界匹配字符

   'This is a boy'.replace(/is/g, '0')

代码语言:javascript复制
    // "Th0 0  a boy"
    'This is  a boy'.replace(/bisb/g, '0')
    // "This 0  a boy"
    'This is  a boy'.replace(/Bisb/g, '0')
    // "Th0 is  a boy"
    ​
    '@123@abc@'.replace(/@./g, 'Q')
    // "Q23Qbc@"
    '@123@abc@'.replace(/^@./g, 'Q')
    // "Q23@abc@"
    '@123@abc@'.replace(/.@/g, 'Q')
    // "@12QabQ"
    '@123@abc@'.replace(/.@$/g, 'Q')
    // "@123@abQ"
    ​
    mulSrt = "@123n@456n@789"
    "@123
    @456
    @789"
    mulSrt.replace(/^@d/g, 'X')
    "X23
    @456
    @789"
    mulSrt.replace(/^@d/gm, 'X')
    "X23
    X56
    X89"

  量词

  d{20}wd?w d*d{3}w{3,5}d{3,}

  JS正则贪婪模式与非贪婪模式贪婪模式

  尽可能多的匹配

  非贪婪模式

  让正则表达式尽可能少的匹配,也是说一旦成功匹配不再继续尝试就是非贪婪模式

  做法很简单,在量词后加上?即可

   '12345678'.replace(/d{3,6}/g, 'X')

代码语言:javascript复制
    // "X78"
    '12345678'.replace(/d{3,6}?/g, 'X')
    // "XX78"
    '123456789' .match(/d{3,5}?/g)
    // (3) ["123", "456", "789"]

  分组分组

  使用 () 可以达到分组的功能js 怎么使用正则表达式,使量词作用域分组

  (Byron){3}

   'a1b2c3d4'.replace(/([a-z]d){3}/g, 'X')

代码语言:javascript复制
    // "Xd4"

  或

  使用 | 可以达到或的效果

  Byron | Casper!

  Byr(on|Ca)sper

   'ByronsperByrCasper'.replace(/Byr(on|Ca)sper/g, 'X')

代码语言:javascript复制
    // "XX"

  反向引用

   '2016-11-25'.replace(/(d{4})-(d{2})-(d{2})/g, '2/3/

代码语言:javascript复制
    // "11/25/2016"

  忽略分组

  不希望捕获某些分组,只需要在分组内加上 ?: 就可以

  (?:Byron).(ok)

  前瞻

  正则表达式从文本头部向尾部开始解析,文本尾部方向,称为“前”

  前瞻就是在正则表达式匹配到规则的时候,向前检查是否符合断言,后顾/后瞻方向相反

   不支持后顾

  符合和不符合特定断言称为 肯定/正向 匹配和 否定/负向 匹配

  w(?=d)

   'a2*3'.replace(/w(?=d)/g, 'X')

代码语言:javascript复制
    // "X2*3"
    'a2*34vv'.replace(/w(?!d)/g, 'X')
    // "aX*3XXX"

  JS对象属性

  global:是否全文搜索js 怎么使用正则表达式,默认false

  ignore case:是否大小写敏感,默认是 false

  :多行搜索,默认值是 false

  : 是当前表达式匹配内容的最后一个字符的下一个位置

  source:正则表达式的文本字符串

   var reg1 = /w/

代码语言:javascript复制
    var reg2 = /w/gim
    ​
    console.log(re1.global) // false
    console.log(re1.ignoreCase) // false
    console.log(re1.multiline) // false
    console.log(reg2.global) // true
    console.log(reg2.ignoreCase) // true
    console.log(reg2.multiline) // true

  注意,属性是只读的

  test 和 exec方法RegExp..test(str)

  用于测试字符串参数中是否存在匹配正则表达式的字符串

  如果存在则返回 true,否则返回 false

   var reg1 = /w/

代码语言:javascript复制
    reg1.test('a') // true
    reg1.test('a') // true
    reg1.test('a') // true
    var reg2 = /w/g
    reg2.test('ab') // true
    reg2.test('ab') // true
    reg2.test('ab') // false 注意这里是 false
    reg2.test('ab') // true

  使用 test() 会作用于正则对象的 属性,知道匹配不到, 会变成 0

   当前匹配结果的下一个字符

   var reg1 = /w/

代码语言:javascript复制
    var reg2 = /w/g
    ​
    while(reg2.test('ab')) {
      console.log(reg2.lastIndex) // 依次是 1 2
    }

  RegExp..exec(str)

  使用正则表达式模式对字符串执行搜索,井将更新全局RegExp对象的属性以反映匹配结果

  如果没有匹配的文本则返回 null,否则返回一个结果数组:

  index 声明匹配文本的第一个字符的位置

  input 存放被检索的字符串 string

  非全局调用

  调用非全局的 RegExp 对象的 exec()时,返回数组

  第一个元素是与正则表相匹配的文本

  第二个元素是与 的第一个子表达式相匹配的文本(如果有的话)

  第三个元素是与 RegExp 对象的第二个子表达式相匹配的文本(如果有的话),以些类推

   var reg3 = /d(w)(w)d/

代码语言:javascript复制
    var ts = '$1az2bb3cy4dd5ee'
    ​
    var ret = reg3.exec(ts)
    ​
    console.log(reg3.lastIndex) // 0,非全局情况下,lastIndex 不生效,所以是 0
    console.log(ret.index) // 1 // 匹配文本的第一个字符的位置
    console.log(ret.toString()) // "1az2,a,z"
    ​
    var reg4 = /d(w)(w)d/g
    var ts = '$1az2bb3cy4dd5ee'
    ​
    var ret
    ​
    while(ret = reg4.exec(ts)) {
      console.log(reg4.lastIndex   't'   ret.index   't'   ret.toString())
    }
    ​
    /*
    console
    "5  1 1az2,a,z"
    "11 7 3cy4,c,y"
    */

  字符串对象方法String..search(reg)

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

  方法返回第一个匹配结果index,查找不到返回 -1

  search() 方法不执行全局匹配,它将忽略标志 g,井且总是从字符串的开始进行检索

   'a1b2c3d1'.search('1') // 1

代码语言:javascript复制
    'a1b2c3d1'.search('10') // -1
    'a1b2c3d1'.search(1) // 1 ,数字会被转成正则 /1/
    'a1b2c3d1'.search(/1/) // 1

  String..match(reg)

  match()方法将检索字符串,以找到一个或多个与regexp匹配的文本

  regexp是否具有标志 g 对结果影响很大

  非全局调用

  var reg3 = /d(w)d/

  var ts = '$'

  ​

  var ret = ts.match(reg3)

  ​

  .log(ret) // ["1a2", "a"]

  .log(ret.index) // 1

  .log(reg3.) // 0 无效

  全局调用

   var reg4 = /d(w)d/g

代码语言:javascript复制
    var ts = '$1a2b3c4d5e'
    ​
    var ret = ts.match(reg4)
    ​
    console.log(ret) // ["1a2", "3c4"]
    console.log(ret.index) // undefined 没有
    console.log(reg3.lastIndex) // 0 没有

  String..split()

  我们经常使用split方法把字符串分割为字符数组

  'a,b,c,d'.split('.') // ['a','b','c','d']

  在一些复杂的分割情况下我们可以使用正则表达式解决

  ''.split(/d/) // ['a','b','c','d']

   'a,b,c,d'.split(',') // ["a", "b", "c", "d"]

代码语言:javascript复制
    'a1b2c3d4e'.split(/d/g) // ["a", "b", "c", "d", "e"]
    'a,b,c,d'.split(/,/) // ["a", "b", "c", "d"]

  String..参数含义

  会在每次匹配替换的时候调用,有四个参数

  1、匹配字符串

  2、正则表达式分组内容,没有分组则没有该参数

  3、匹配顶在字符串中的 index

  4、原字符串

   'a1b'.replace('1',2) // "a2b"

代码语言:javascript复制
    'a1b1c1'.replace('1',2) //"a2b1c1"
    'a1b1c1'.replace(/1/g,2) //"a2b2c2"
    'a1b1c1'.replace(/1/,2) //"a2b1c1"
    'a1b2c3d4e5'.replace(/d/g, function(match, index, origin){
      return parseInt(match)   1
    }) // "a2b3c4d5e6"
    'a1b2c3d4e5'.replace(/(d)(w)(d)/g, function(match, group1, group2, group3, index, origin){
      return group1   group3
    }) // "a12c34e5"
  1. abc ↩

本文共 1287 个字数,平均阅读时长 ≈ 4分钟

1 人点赞