《JavaScript正则表达式迷你书》读书笔记

正则基础

常见简写形式

字符组	具体含义	记忆方式
\d	表示 [0-9]。表示是一位数字。	其英文是 digit(数字)
\D	表示 [^0-9]。表示除数字外的任意字符。
\w	表示 [0-9a-zA-Z_]。表示数字、大小写字母和下划线。	w 是 word 的简写，也称单词字符。
\W	表示 [^0-9a-zA-Z_]。非单词字符。
\s	表示 [ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页 符。	s 是 space 的首字母，空白符的单词是 white space。
\S	表示 [^ \t\v\n\r\f]。 非空白符。
.	表示 [^\n\r\u2028\u2029]。通配符，表示几乎任意字符。换行符、回车符、行分隔符和段分隔符 除外。	想想省略号 ... 中的每个点，都可以理解成占位符，表示任何类似的东西。
[\d\D]/[\w\W]/[\s\S]/[^]	任意字符

量词

字符组	具体含义	记忆方式
{m, }	至少出现m次
{m}	等价于{m, m}, 出现m次
?	等价于{0, 1}, 出现或者不出现	问号的意思: 有么？
+	等价于{1, }, 表示至少出现一次	加号是追加的意思，表示必须现有一个，然后才考虑追加
*	等价于{0, }, 出现任意次, 有可能不出现	看看天上的星星，可能一颗没有，可能零散有几颗，可能数也数不过来

修饰符

字符组	具体含义	记忆方式
g	匹配全局	单词是global
i	忽略字母大小写	单词是ignoreCase
m	多行匹配, 只影响 ^ 和 $，二者变成行的概念，即行开头和行结尾	单词是multiline

匹配位置

字符组	具体含义	记忆方式
^	(脱字符)匹配开头
$	(美元符号)匹配结尾
\b	单词边界	\w 与 \W 之间的位置，也包括 \w 与 ^ 之间的位置，和 \w 与 $ 之间的位置
\B	非单词边界
(?=p)	"p"的子模式, "p" 前面的位置	positive lookahead(正向先行断言)
(?!p)	非"p"前的位置	negative lookahead(负向先行断言)

匹配开头与结尾

• /^|$/g: 匹配列
• /^|$/gm: 匹配行, m是既有修饰符

ES5之后版本支持的位置判断

• (?<=p): positive lookbehind(正向后行断言)
• (?: negative lookbehind(负向后行断言)

举例

• 千分位
  • 千分位示例1234567890
    • 三位数字的前面: /(?=\d{3}$)/g
      • (?=p): 正向先行断言
    • 多个三位数字: /(?=(\d{3})+$)/g
      • +: 量词, 多个
    • 最前面不匹配: /(?!^)(?=(\d{3})+$)/g
      • (?!^): 负向先行断言
    • 非捕获:
      • 正则: /\B(?=(?:\d{3})+(?!\d))/g
        • 千位分隔符的理解
  • 带空格的千分位123456789 123456789
    • /(?!\b)(?=(\d{3})+\b)/g，即/(\B)(?=(\d{3})+\b)/g
    • ^和$要替换成\b
  • 格式化千分位

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

• 验证密码: 长度为6~12位, 由数字、大写字母和小写字母，必须至少包含两种字符
  • 长度为6~12位的数字、大小写字母: /^[0-9a-zA-Z]{6, 12}$/
  • 至少包含两种
    • 解题核心
      • 至少包含一位数字字符: /(?=.*[0-9])/
    • 划分情况
      • 包含数字和大写字母
      • 包含数字和小写字母
      • 包含大写字母和小写字母
      • 包含数字、大写字母和小写字母
    • 正则: /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z]))^[0-9a-zA-Z]{6,12}$/
      • 注意: {6,12}中间不能有空格
  • 不能同时全部为一种(反向思路)
    • 解题核心
      • 不能全部为一种字符(数字): /(?!^[0-9]{6,12}$)(^[0-9a-zA-Z]{6,12})/
    • 划分情况
      • 不能全为数字
      • 不能全为大写字母
      • 不能全为小写字母
    • 正则: /(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)(^[0-9a-zA-Z]{6,12}$)/

常用正则

词法	含义	记忆方式
(?=.[A-Z]) / (?=.?[A-Z]) / (.*[A-Z])	至少包含一个大写字母

括号的作用

分组和分支

• 分组: 'ababa abbb ababab'.match(/(ab)+/g)
• 分支: (p1|p2)
  • 示例

    var regex = /^I love (JavaScript|Regular Expression)$/
    console.log(regex.test("I love JavaScript")) // true
    console.log(regex.test("I love Regular Expression")) // true
    

分组引用: 正则引擎给分组开辟了一个空间, 用来存储每个分组匹配到的数据

• 分组方法
  • 之前: /^d{4}-d{2}-d{2}$/
  • 之后: /^(d{4})-(d{2})-(d{2})$/
• 提取数据:
  • match方法
    • 使用: '2017-06-12'.match(/(\d{4})-(\d{2})-(\d{2})/)
    • match返回数组: ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12", groups: undefined]
      • 第一个是整体匹配结果
      • 然后是各个分组匹配到的结果
      • 匹配下标
      • 输入的文本
      • 一个捕获组数组 或 undefined（如果没有定义命名捕获组）
    • 注意:
      • 使用g之后, 返回的是一个数组
        • 举例: '1s1'.match(/\d/g) => ["1", "1"]
      • 匹配不到, 则返回null
  • exec方法
    • 使用: /(\d{4})-(\d{2})-(\d{2})/.exec('2017-06-12')
  • 正常操作(test/match/exec)之后, 可以通过RegExp的$0~$9获取
• 替换: 转换yyyy-mm-dd为dd/mm/yyyy
  • $方法

    '2019-09-23'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$2/$3/$1')
    

  • RegExp.$+function方法

    '2019-09-23'.replace(/(\d{4})-(\d{2})-(\d{2})/, function() {
        return `${RegExp.$2}/${RegExp.$3}/${RegExp.$1}`
    })
    

  • function方法

    '2019-09-23'.replace(/(\d{4})-(\d{2})-(\d{2})/, function(match, year, month, day) {
        return `${month}/${day}/${year}`
    })
    

反向引用: \1

• 同时匹配日期格式: 2019-09-24, 2019/09/24, 2019.09.24
  • 正则: /\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}/
  • 问题: 格式不统一, 2019/09-24同样能匹配
  • 解决方法: 使用反向引用
    • 正则: /\d{4}(-|\/|\.)\d{2}(\1)\d{2}/
  • 同理: \2是第二个分组引用, 依次类推
• 括号嵌套
  • 正则

    // ["1231231233", "123", "1", "23", "3", index: 0, input: "1231231233", groups: undefined]
    1231231233'.match(/^((\d)(\d(\d)))\1\2\3\4$/) 
    

  • 拆分
    • /^((\d)(\d(\d)))$/.test('123') // true
    • /^(\d)$/.test('1') // true
    • /^(\d(\d))$/.test('23') // true
    • /^(\d)$/.test('3') // true, 同第二个一样
• 引用不存在的分组
  • 会匹配反向引用本身
    • 正则: /\1/.test('\1') // true
• 分组后由量词
  • 会匹配到最后一次匹配
    • 正则: '12345'.match(/(\d)+/) // ["12345", "5", index: 0, input: "12345", groups: undefined]
    • 对于反向引用, 同理: /(\d)+ \1/.test('12345 5') // true

非捕获括号: (?:p)

非捕获匹配到的值不会保存起来

• 与之相反的是
  • 捕获型分组
  • 捕获型分支
• 举例

  'ababa abbb ababab'.match(/(?:ab)+/g) // ["abab", "ab", "ababab"]
  var regex = /^I love (?:JavaScript|Regular Expression)$/
  regex.test("I love JavaScript") // true
  regex.test("I love Regular Expression") // true
          ```
  

实战应用

trim: 去掉头部和尾部的空字符串

• js: ' hello '.trim() // 'hello'
• 正则:
  • 匹配到开头和结尾的空字符串, 替换掉(效率高)

    '  hello '.replace(/^\s+|\s+$/g, '')
    

  • 惰性匹配*?, 匹配所有字符串, 提取相应数据

    '  hello '.replace(/^\s*(.*?)\s*$/, '$1') // 'hello'
    

将每个单词的首字母转换为大写

• 方法

  function titleize (str) {
      return str.toLowerCase().replace(/(?:^|\s)\w/g, function (c) {
          return c.toUpperCase();
      });
  }
  // My Name Is Epeli
  console.log( titleize('my name is epeli') )
  

• 注意
  • \s: 制表符空格等, 用来匹配name这样的数据

驼峰

• 方法

  var camelize = function(str) {
      return str.replace(/[-_\s]+(.)?/g, function(match, c){
          return c ? c.toUpperCase() : ''
      })
  }
  console.log(camelize('-moz-transform'))
  

• 注意
  • replace: 关于replace参数
    • match: 匹配到的字符串
    • p1,p2,...: 代表第n个括号匹配到的字符串
    • offset: 匹配到字符串在原字符串的偏移量
    • string: 被匹配的原字符串
    • NamedCaptureGroup: 命名捕获组匹配的对象
  • [-_\s]: 连字符、下划线和空白符
  • ?: 应对单词结尾不是单词字符, 例如'-moz-transform '

中划线化

• 方法

  var dasherize = function(str) {
      return str.replace(/([A-Z])/g, '-$1').replace(/[-_\s]+/g, '-').toLowerCase()
  }
  console.log(dasherize('MozTTransform'))
  

• 或者使用function

  var sperateLine = function(str) {
      return str.replace(/[A-Z]{1}/g, function(match) {
          return match ? `-${match.toLowerCase()}` : ''
      })
  }
  console.log(sperateLine('MozTTransform'))
  

HTML转义和反转义

• 转义
  • 方法

    var escapeHTML = function(str) {
        var escapeChars = {
            '<': 'lt',
            '>': 'gt',
            '"': 'quot',
            '&': 'amp',
            '\'': '#39'
        }
        return str.replace(new RegExp(`[${Object.keys(escapeChars).join('')}]`, 'g'), function(match) {
            return `&${escapeChars[match]};`
        })
    }
    console.log(escapeHTML('
    hello, \'world\'
    '))
    

• 反转义
  • 方法

    var unescapeHTML = function(str) {
        var htmlEntities = {
            'lt': '<',
            'gt': '>',
            'quot': '"',
            'amp': '&',
            '#39': '\''
        }
        return str.replace(new RegExp(`\&([^;]+);`, 'g'), function(match, key) {
            console.log(match, key)
            return (key in htmlEntities) ? htmlEntities[key] : match
        })
    }
    console.log(unescapeHTML('<div>hello, 'world'</div>'))
    

  • 注意
    • 关于/\&([^;]+);/g中^
      • 匹配输入字符串开头位置
      • 方括号中使用, 表示不接受该字符集合
      • 匹配^本身，使用\^

      • 图示:
        image.png
• 成对标签
  • 简单匹配正则: /<([^>]+)>[\d\D]*<\/\1>/
  • 验证: /<([^>]+)>[\d\D]*<\/\1>/.test('