文章目录
- 一、RegExp对象方法详解:
- 1、RegExp.prototype.exec()
- 2、RegExp.prototype.test()
- 3、RegExp.prototype.toString()
- 二、String对象方法详解:
- 1、String.prototype.search()
- 2、String.prototype.match()
- 3、String.prototype.replace()
- 4、String.prototype.split()
RegExp对象匹配正则表达式方法:
- RegExp.prototype.exec() 方法,检索字符串中指定的值;返回找到的值,并确定其位置。
- RegExp.prototype.test() 方法,检索字符串中指定的值;返回 true 或 false。
- RegExp.prototype.toString() 方法,返回正则表达式的字符串。
String对象匹配正则表达式方法:
- String.prototype.search() 方法,检索与正则表达式相匹配的值。
- String.prototype.match() 方法,找到一个或多个正则表达式的匹配。
- String.prototype.replace() 方法,替换与正则表达式匹配的子串。
- String.prototype.split() 方法,把字符串分割为字符串数组。
一、RegExp对象方法详解:
1、RegExp.prototype.exec()
exec() 方法用于检索字符串中的正则表达式的匹配。
- 如果没有匹配到数据时返回 null。
- 如果字符串中有匹配的值则返回该匹配值构成的数组 。此数组的第 0 个元素是与正则表达式相匹配的文本,第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本(如果有的话),第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本(如果有的话);依次类推,有多少个与子表达式相匹配的文本,就有多少个元素。除了数组元素和 length 属性之外,exec() 方法还返回三个属性:
- groups:是一个新的field,用来存储命名捕获组的信息。
- index:表示匹配文本的第一个字符的位置。
- input:表示被检索的字符串。
①捕获组:正则表达式中以一对小括号分为一个组;如 /123(\d+)0/
中(\d+)
就是一个组,也叫捕获组。
// groups属性的应用
let reg = /(\d)(\d)/;
console.log(reg1.exec("123"));
②命名捕获组
let reg = /(?<first>\d)(?<second>\d)/;
console.log(reg.exec("123"))
③非捕获组:匹配结果不包含非捕获组中的内容
// 非捕获组 (?=)
let nameList = `
Brandon Stark
Sansa Stark
John Snow
`
let reg = /^\w+(?:\s?Stark)/gm;
let notCatch = nameList.match(reg);
console.log(notCatch); // ["Brandon", "Sansa"]
上边代码中的 ?:
就是非捕获组,意思就是规则会被命中,但是在结果中不会包含 命中
的值。
比如我们想实现一个比较常用的功能,给数字添加千分位:
// 给数字添加逗号
function numberWithCommas (x = 0) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')
}
numberWithCommas(123) // => 123
numberWithCommas(1234) // => 1,234
如果传入字符串1234567,则第一次匹配的位置在1和2之间,第二次匹配的位置在4和5之间。获得的最终字符串就是1,234,567。
2、RegExp.prototype.test()
RegExp.prototype.test()方法用来检查正则是否能成功匹配该字符串,返回 true 或者 false。
let reg = /^Hello/;
reg.test('Hello World'); // => true
reg.test('Say Hello'); // => false
test方法一般来说多用在检索或者过滤的地方。
比如我们做一些筛选filter的操作,用test就是一个很好的选择。
// 筛选出所有名字为 Niko的数据
let data = [{ name: 'Niko Bellic' }, { name: 'Roman Bellic'}]
data.filter(({name}) => /^Niko/.test(name)) // => [{ name: 'Niko Bellic' }]
3、RegExp.prototype.toString()
let reg = /\d{3}/g;
console.log(reg.toString()); // '/\\d{3}/g'
二、String对象方法详解:
1、String.prototype.search()
传入一个正则表达式,并使用该表达式进行匹配:
- 如果匹配失败,则会返回-1。
- 如果匹配成功,则会返回匹配开始的下标。
可以理解为是一个正则版的 indexOf。
'Hi Niko'.search(/Niko/) // => 3
'Hi Niko'.search(/Roman/) // => -1
// 如果传入的参数为一个字符串,则会将其转换为`RegExp`对象
'Hello'.search('llo') // => 2
2、String.prototype.match()
match方法用来检索字符串,并返回匹配的结果,结果为一个数组。
- 如果正则没有添加g标识的话,返回值与exec类似。
- 但是如果添加了g标识,则会返回一个数组,数组的item为满足匹配条件的子串。
这将会无视掉所有的捕获组。
let html = '<p><span>text1</span><span>text2</span></p>'
html.match(/<span>(.+?)<\/span>/g) // ["<span>text1</span>", "<span>text2</span>"]
html.match(/<span>(.+?)<\/span>/)
/**
[
0: "<span>text1</span>"
1: "text1"
groups: undefined
index: 3
input: "<p><span>text1</span><span>text2</span></p>"
length: 2
__proto__: Array(0)
]
*/
3、String.prototype.replace()
replace 应该是与正则有关应用最多的一个函数。最简单的模版引擎可以基于 replace来做。日期格式转换也可以通过 replace来做。甚至 match的功能也可以通过 replace来实现。
replace接收两个参数 replace(str|regexp, newStr|callback)
- 第一个参数可以是一个字符串,也可以是一个正则表达式。
- 第二个参数可以是一个字符串,也可以传入一个回调函数。
当传入字符串时,会将正则所匹配到的字串替换为该字符串。
当传入回调函数时,则会在匹配到子串时调用该回调函数,回调函数的返回值会替换被匹配到的子串。
'Hi: Jhon'.replace(/Hi:\s(\w+)/g, 'Hi: $1 Snow') // => Hi: Jhon Snow
/**以下匹配回调函数中,
str:匹配的完整串
$1:捕获组
*/
'price: 1'.replace(/price:\s(\d)/g, (str, $1) => `price: ${$1 *= 10}`) // => price: 10
4、String.prototype.split()
split方法应该是比较常用的,可以将一个字符串转换成数组。然而这个参数也是可以塞进去一个正则表达式的。
// 使用正则表达式分割
'1,2|3'.split(/,|\|/); // => ["1", "2", "3"]
// 将一个日期时间字符串进行分割
let date = '2017-11-21 23:40:56';
date.split(/-|\s|:/); // => ["2017", "11", "21", "23", "40", "56"]
// 又或者我们有这么一个字符串,要将它正确的分割
let arr = '1,2,3,4,[5,6,7]';
arr.split(','); // => ["1", "2", "3", "4", "[5", "6", "7]"] 这个结果肯定是不对的。
// 所以我们可以这么写
arr.split(/,(?![,\d]+])/); // => ["1", "2", "3", "4", "[5,6,7]"]
参考资料:
正则 exec方法 返回数组中 groups是用来存储什么值的?正则表达式小记