JavaScript 正则表达式

最新推荐文章于 2020-11-29 01:58:25 发布

littlebirdflying

最新推荐文章于 2020-11-29 01:58:25 发布

阅读量215

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/grapelove01/article/details/82867824

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JavaScript 正则表达式

练习辅助

jsbin

https://regexper.com/ 图文并茂

什么是正则表达式

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

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

RegExp对象

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

有两种方法实例化RegExp对象

字面量
构造函数

字面量

var reg = / \bis\b /g；

var reg = /\bis\b/
// 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 = /\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?"

构造函数

var reg = new RegExp('\\bis\\b', 'g')

var reg = new RegExp('\\bis\\b')
// 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：multiple lines 多行搜索

'He is a boy. Is he?'.replace(/\bis\b/g, '0')
// "He 0 a boy. Is he?"
'He is a boy. Is he?'.replace(/\bis\b/gi, '0')
// "He 0 a boy. 0 he?"

元字符

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

原义文本字符
元字符

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

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

在这里插入图片描述

字符类

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

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

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

字符类取反

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

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

表达式 [^abc]表示不是字符a或b或c的内容

'a1b2c3d4'.replace(/[abc]/g, 'X')
"X1X2X3d4"
'a1b2c3d4'.replace(/[^abc]/g, 'X')
"aXbXcXXX"

范围类

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

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

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

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

'a1b2c3x4z9'.replace(/[a-z]/g, 'Q')
// "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 + 数字 + 任意字符 的字符串，ab\d.

边界

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

在这里插入图片描述

'This is  a boy'.replace(/is/g, '0')
// "Th0 0  a boy"
'This is  a boy'.replace(/\bis\b/g, '0')
// "This 0  a boy"
'This is  a boy'.replace(/\Bis\b/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 = "@123\n@456\n@789"
"@123
@456
@789"
mulSrt.replace(/^@\d/g, 'X')
"X23
@456
@789"
mulSrt.replace(/^@\d/gm, 'X')
"X23
X56
X89"

量词

在这里插入图片描述

\d{20}\w\d?\w+\d*\d{3}\w{3,5}\d{3,}

在这里插入图片描述

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

贪婪模式

尽可能多的匹配

非贪婪模式

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

做法很简单，在量词后加上？即可

'12345678'.replace(/\d{3,6}/g, 'X')
// "X78"
'12345678'.replace(/\d{3,6}?/g, 'X')
// "XX78"
'123456789' .match(/\d{3,5}?/g)
// (3) ["123", "456", "789"]

分组

使用 () 可以达到分组的功能，使量词作用域分组

(Byron){3}
在这里插入图片描述

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

或

使用 | 可以达到或的效果

Byron | Casper 在这里插入图片描述

Byr(on|Ca)sper 在这里插入图片描述

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

反向引用

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

忽略分组

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

(?:Byron).(ok)
在这里插入图片描述

前瞻

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

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

JavaScript 不支持后顾

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

在这里插入图片描述

\w(?=\d) 在这里插入图片描述

'a2*3'.replace(/\w(?=\d)/g, 'X')
// "X2*3"
'a2*34vv'.replace(/\w(?!\d)/g, 'X')
// "aX*3XXX"

JS对象属性

global：是否全文搜索，默认false

ignore case：是否大小写敏感，默认是 false

multiline：多行搜索，默认值是 false

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

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

var reg1 = /\w/
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.prototype.test(str)

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

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

 var reg1 = /\w/
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() 会作用于正则对象的 lastIndex 属性，知道匹配不到，lastIndex 会变成 0

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

var reg1 = /\w/
var reg2 = /\w/g

while(reg2.test('ab')) {
  console.log(reg2.lastIndex) // 依次是 1 2
}

RegExp.prototype.exec(str)

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

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

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

input 存放被检索的字符串 string

非全局调用

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

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

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

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

var reg3 = /\d(\w)(\w)\d/
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.prototype.search(reg)

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

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

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

'a1b2c3d1'.search('1') // 1
'a1b2c3d1'.search('10') // -1
'a1b2c3d1'.search(1) // 1 ，数字会被转成正则 /1/
'a1b2c3d1'.search(/1/) // 1

String.prototype.match(reg)

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

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

非全局调用

如果regexp没有标志 g，那么match()方法就只能在字符串中执行一次匹配
如果没有找到任何匹配的文本，将返回 null
否则它将返回一个数组，其中存放了与它找到的匹配文本有关的信息
返回数组的第一个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本

除了常规的数组元素之外，返回的数组还含有 2 个对象属性

index 声明匹配文本的起始字符在字符串的位置
input 声明对 stringObject 的引用

var reg3 = /\d(\w)\d/
var ts = '$1a2b3c4d5e'

var ret = ts.match(reg3)

console.log(ret) // ["1a2", "a"]
console.log(ret.index) // 1
console.log(reg3.lastIndex) // 0 无效

全局调用

如果 regexp 具有标志 g 则 match() 方法将执行全局检索，找到字符串中的所有匹配子字符串
- 没有找到任何匹配的子串，则返回 null
- 如果找到了一个或多个匹配子串，则返回一个数组
数组元素中存放的是字符串中所有的匹配子串，而且也没有 index 属性或 input 属性

var reg4 = /\d(\w)\d/g
var ts = '$1a2b3c4d5e'

var ret = ts.match(reg4)

console.log(ret) // ["1a2", "3c4"]
console.log(ret.index) // undefined 没有
console.log(reg3.lastIndex) // 0 没有

String.prototype.split()

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

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

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

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

'a,b,c,d'.split(',') // ["a", "b", "c", "d"]
'a1b2c3d4e'.split(/\d/g) // ["a", "b", "c", "d", "e"]
'a,b,c,d'.split(/,/) // ["a", "b", "c", "d"]

String.prototype.replace

String.prototype.replace(str,replaceStr)
String.prototype.replace(reg,replaceStr)
String.prototype.replace(reg,function)

function参数含义

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

1、匹配字符串

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

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

4、原字符串

'a1b'.replace('1',2) // "a2b"
'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"

littlebirdflying

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 正则表达式

JavaScript 正则表达式练习辅助jsbinhttps://regexper.com/ 图文并茂什么是正则表达式Regular Expression 使用单个字符串来描述、匹配一系列符合某个句法规则的字符串说简单了是按照某种规则去匹配符合条件的字符串RegExp对象JavaScript通过内置对象RegExp支持正则表达式有两种方法实例化RegExp对象字面量构造函数...
复制链接

扫一扫