美文网首页
JavaScript正则表达式全解

JavaScript正则表达式全解

作者: percykuang | 来源:发表于2019-10-22 23:39 被阅读0次

    正则表达式

    reg.test(str)

    var reg = /abc/

var str = 'abcd'

// 判断str里是否有reg表达式规定的片段，返回boolean
// reg.test(str) 

// true
console.log(reg.test(str))

    模式 i 

    // 在正则表达式后面加i，表示忽略大小写
var reg = /abc/i

var str = 'abCd'

// true
console.log(reg.test(str))

    使用构造函数创建正则表达式

    // 第一个参数是匹配字段 第二个参数是匹配模式
var reg = new RegExp('abc', 'i')

var str = 'abCd'

// true
console.log(reg.test(str))

// 第一个参数还可以添加已知的正则表达式
var reg = /abcd/i

// 这样创建的reg1类似于深克隆
var reg1 = new RegExp(reg)

// 这样创建的reg2类似于浅克隆
var reg2 = RegExp(reg)

    模式 g

    g 表示全局匹配

    str.match(reg)

    // 不加模式 g
var reg = /ab/

var str = 'ababbababaab'

// str.match(reg) 可以把str里符合reg匹配的片段挑出来然后返回这个片段数组

// ['ab']
console.log(str.match(reg))

// ----------------------------------------

// 加模式 g

var reg = /ab/g

var str = 'ababbababaab'

// str.match(reg) 可以把str里符合reg匹配的片段挑出来然后返回这个片段数组

// 因为这个reg加了模式g，所以会找到所有的匹配片段

// ['ab', 'ab', 'ab', 'ab', 'ab']
console.log(str.match(reg))

    模式 m

    多行匹配模式，如果你不知道，看下面的代码示例吧

    var reg = /a/g

var str = 'abcdea'

// ['a', 'a']
console.log(str.match(reg))

// 以a开头的a
var reg1 = /^a/g 

// ['a']
console.log(str.match(reg1))

// 如果str换个行呢
var str1 = 'abcde\na'

// ['a']  --- 因为还不具备多行匹配的功能
console.log(str1.match(reg1))

// 现在我们来添加多行匹配的功能

var reg2 = /^a/mg

// 现在就可以匹配到了 
// ['a', 'a']
console.log(str1.match(reg2))

    表达式 []

    一个[]表示一位，这个里面可以指定范围

    逐个指定

    
var str = '2sfsf1233jajfsj3'

// 要求：正则表达式需要去匹配str中有没有3个数字连在一起的情况
var reg = /[1234567890][1234567890][1234567890]/g

// ['123', '987']
console.log(str.match(reg))

// 也可以这样玩
var reg1 = /[ef][sj]/g

// ['fs', 'fs']
console.log(str.match(reg1))

    范围指定

    var str = '2sfsf1233ja98765jfsj3'

// 要求：正则需要去匹配str中有没有3个数字连在一起的情况
var reg = /[0-9][0-9][0-9]/g

// ['123', '987']
console.log(str.match(reg))

var reg1 = /[0-9a-z][3]/g

// ['23', 'j3']
console.log(str.match(reg1))

var reg2 = /[0-9A-z][0-9A-z][j]/g

// [ '33j', '65j', 'fsj' ]
console.log(str.match(reg2))

    特殊字符 ^

    ^放到[]里面表示的是非，和放到[]外面意义不一样

    var str = 'ab1cd'

var reg = /[^a][^b]/g

// ['b1', 'cd']
console.log(str.match(reg))

    特殊字符()和| 

    // 表示匹配abc或者bcd
var reg = /(abc|bcd)/g

// ['abc']
console.log('abcd'.match(reg))

// ['bcd']
console.log('bcdedf'.match(reg))

// ['bcd0']
console.log('bcd0df'.match(reg))

    特殊字符^和$

    ^n 表示以n开头，m$ 表示以m结尾

    var reg = /^ab/g

var str = 'abc'

// [ 'ab' ]
console.log(str.match(reg))

var reg1 = /bc$/g

// ['bc']
console.log(str.match(reg1))

// 注意下面这种情况 它的意思是以a开头，以b结尾，中间有一个b
// var reg = /^abc$/g

// var str = 'abcabc'

// // null
// console.log(str.match(reg))

    元字符

    \w

    表示word字符，可以认为\w === [0-9A-z_]

    \W

    是\w的补集，可以认为\W === ^0-9A-z

    var str = 'sdf'

var reg = /\w/g

var reg1 = /\W/g

// ['s', 'd', 'f']
console.log(str.match(reg))

// null
console.log(str.match(reg1))

    \d

    表示数字字符，可以认为\d === [0-9]

    \D

    是\d的补集，可以认为\D === [^0-9]

    var str = '123'

var reg = /\d\d\d/g

// ['123']
console.log(str.match(reg))

// [] 里面也可以写元字符
var reg1 = /[\w\d]/g

// ['1', '2', '3']
console.log(str.match(reg1))

    \s

    表示空白字符，包含空格符、制表符、回车符、换行符等，可以认为\s === [\t\n\r\v\f(还有空格)]

    \S

    表示[^\s]

    \b

    表示单词边界

    \B

    表示非单词边界

    var reg = /\bcde/g

// 这里有6个单词边界
var str = 'abc cde fgh'

// ['cde']
console.log(str.match(reg))

var reg1 = /\bcde\b/g

// ['cde']
console.log(str.match(reg1))

str = 'abc cdefgh'

// null
console.log(str.match(reg1))

var reg2 = /\bcde\B/g

// ['cde']
console.log(str.match(reg2))

    \n

    表示换行符

    \t

    表示制表符

    var str = '1321\nad'

var reg = /\na/g

// ['\na']
console.log(str.match(reg))

    \uxxxx

    unicode编码

    var reg = /\u524d\u7aef/g

var str = '前端工程师'

// ['前端']
console.log(str.match(reg))

    .

    . === [^\r\n]，匹配除了\r，\n外的所有的字符

    量词

    n+

    表示n可以出现一次到多次

    n*

    表示n可以出现0次到多次

    var reg = /\w+/g

var str = 'abc'

// ['abc']
console.log(str.match(reg))

var reg1 = /\w*/g

// ['abc', ''] 注意这里会多一个空字符
console.log(str.match(reg1))

// 这样会出现4个空字符 *会在逻辑上，也就是光标后再多匹配一位空字符
var reg2 = /\d*/g

// ['', '', '', '']
console.log(str.match(reg2))

    贪婪匹配原则--能匹配多就不匹配少

    var reg = /\w+/g

var str = 'aaaaaaaaaaaaa'

// ['aaaaaaaaaaaaa']
console.log(str.match(reg))

    n?

    匹配前面一个表达式 0 次或者 1 次。等价于 {0,1}。

    var reg = /\w?/g

var str = 'aaa'

// [ 'a', 'a', 'a', '' ]
console.log(str.match(reg))

    n{x}

    表示n只能出现x次

    n{x,y}

    表示可以出现x次到y次

    n{x,}

    表示可以出现x次到多次

    var reg = /\w{3}/g

var str = 'abc'

// [ 'abc' ]
console.log(str.match(reg))

var reg1 = /\w{1,}/g

// ['abc']
console.log(str.match(reg1))

    做做题

    1.检验一个字符串首或尾是否含有数字

    var str = '1fsdljf1231'

var reg = /^\d|\d$/

// true
console.log(reg.test(str))

    2.检验一个字符串首尾是否同时含有数字

    var str = '1dfasfasdf2'

var reg = /(^\d)[\d\D]*(\d$)/

// true
console.log(reg.test(str))

    正则表达式的属性

    var reg = /flinn/gi

// true
console.log(reg.global)

// true
console.log(reg.ignoreCase)

// false
console.log(reg.multiline)

// 'flinn'
console.log(reg.source)

    正则表达式的方法

    test

    exec & 属性lastIndex

    var str = 'abababab'

var reg = /ab/g

// 0
console.log( reg.lastIndex )
// [ 'ab', index: 0, input: 'abababab']
console.log( reg.exec(str) )

// 2
console.log( reg.lastIndex )
// [ 'ab', index: 2, input: 'abababab']
console.log( reg.exec(str) )

// 4
console.log( reg.lastIndex )
// [ 'ab', index: 4, input: 'abababab']
console.log( reg.exec(str) )

// 6
console.log( reg.lastIndex )
// [ 'ab', index: 6, input: 'abababab']
console.log( reg.exec(str) )

// 8
console.log( reg.lastIndex )
// null
console.log( reg.exec(str) )

// 0
console.log( reg.lastIndex )
// [ 'ab', index: 0, input: 'abababab']
console.log( reg.exec(str) )

    手动修改lastIndex，会产生作用

    var str = 'abababab'

var reg = /ab/g

// 0
console.log( reg.lastIndex )
// [ 'ab', index: 0, input: 'abababab']
console.log( reg.exec(str) )

reg.lastIndex = 0

// [ 'ab', index: 0, input: 'abababab']
console.log( reg.exec(str) )

    注意

    如果匹配模式不是g,那么lastIndex将永远是0，也就是exec永远从下标0开始匹配。

    子表达式及其反向引用

    需求：匹配xxxx型的字符串

    var str = 'aaaa'

// (\w)表示一个子表达式 \1表示反向引用第`1`个子表达式的内容
var reg = /(\w)\1\1\1/g

// ['aaaa']
console.log(str.match(reg))

    需求：匹配xxyy型的字符串

    var str = 'aabb'

// (\w)表示一个子表达式 \1表示反向引用第1个子表达式的内容
// \2 表示反向引用第2个子表达式的内容
var reg = /(\w)\1(\w)\2/g

// ['aabb']
console.log(str.match(reg))

    使用子表达式后再用exec方法

    var str = 'aabb'

// (\w)表示一个子表达式 \1表示反向引用第1个子表达式的内容
// \2 表示反向引用第2个子表达式的内容
var reg = /(\w)\1(\w)\2/g

// 这里会多出两位：'a' 和 'b'
// [ 'aabb', 'a', 'b', index: 0, input: 'aabb']
console.log(reg.exec(str))

    支持正则表达式的字符串方法

    match(reg)

    加g可以匹配多个片段，不加g匹配一个

    var str = 'aabb'

// 不加g
var reg = /(\w)\1(\w)\2/

// [ 'aabb', 'a', 'b', index: 0, input: 'aabb']
console.log(str.match(reg))

// 加g
var reg1 = /(\w)\1(\w)\2/g

// [ 'aabb' ]
console.log(str.match(reg1))

    search(reg)

    返回匹配到的位置下标，加不加g都只匹配第一个满足条件的下标为止，没匹配到返回-1

    var str = 'faabb'

var reg = /(\w)\1(\w)\2/
var reg1 = /(\w)\1(\w)\2/g

// 1
console.log(str.search(reg))
// 1
console.log(str.search(reg1))

    split(reg)

    按照reg匹配规则来打散字符串为一个数组

    var str = 'faabb'

var reg = /aa/

// ['f', 'bb']
console.log(str.split(reg))

    replace(reg, s)

    var str = 'faabb'

// 不使用正则表达式，则没有访问全局的能力
// 'fbabb'
console.log(str.replace('a', 'b'))
    需求：将xxyy转为yyxx 
    var str = 'aabb'

var reg = /(\w)\1(\w)\2/g

// 可以使用$，来引用子表达式
// 'bbaa'
console.log(str.replace(reg, '$2$2$1$1'))

// 另一种牛逼的形式，调用方法
// 在这里，result为'aabb'， $1、$2分别为第1和第2个子表达式的引用
// 'bbaa'
console.log(str.replace(reg, function (result, $1, $2) {
  return $2 + $2 + $1 + $1
}))
    需求：将this-first-name这种类型的命名转为小驼峰命名形式
    var str = 'the-first-name'

var reg = /-(\w)/g

// 'thisFirstName'
console.log(str.replace(reg, function (result, $1) {
  return $1.toUpperCase()
}))

    正向预查

    需求：在aabaaaa中找出后面跟的是b的那个a

    var str = 'aabaaa'

// 表示a后面跟的是b，但是b不参与匹配，只参与限定
var reg = /a(?=b)/g

// ['a']
console.log(str.match(reg))

    需求：在aabaaaa中找出后面不跟的是b的那个a

    var str = 'aabaaa'

// 表示a后面跟的是b，但是b不参与匹配，只参与限定
var reg = /a(?!b)/g

// ['a', 'a', 'a', 'a']
console.log(str.match(reg))

    非贪婪匹配

    只需在量词后面加一个?，那么它将遵循能少就不多匹配的原则（至少会匹配一个）

    var str = 'aaaa'

var reg = /a+?/g

// ['a', 'a', 'a', 'a']
console.log(str.match(reg))

var reg1 = /a??/g

// [ '', '', '', '', '' ]
console.log(str.match(reg1))

    做做题

    需求：将aaaabbbbbccc转为abc(字符串去重)

    var str = 'aaaaabbbbbccc'

var reg = /(\w)\1*/g

// 'abc'
console.log(str.replace(reg, '$1'))

    一道难题：将一个字符串每隔三位打个点

    var str = '179023240000'

var reg = /(?=(\B)(\d{3})+$)/g

// 179.023.240.000
console.log(str.replace(reg, '.'))

    相关文章

      网友评论

          本文标题：JavaScript正则表达式全解

          本文链接：https://www.haomeiwen.com/subject/rnthvctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|JavaScript正则表达式全解|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！