Javascript基础巩固系列——标准库RegExp对象

全手打原创，转载请标明出处：https://www.cnblogs.com/dreamsqin/p/13729080.html， 多谢，=。=~（如果对你有帮助的话请帮我点个赞啦）

重新学习JavaScript是因为当年转前端有点儿赶鸭子上架的意味，我一直在反思我的知识点总是很零散，不能在脑海中形成一个完整的体系，所以这次想通过再次学习将知识点都串联起来，结合日常开发的项目，达到温故而知新的效果。与此同时，总结一下我认为很重要但又被我遗漏的知识点～

概述

• 正则表达式（regular expression）是一种表达文本模式（即字符串结构）的方法，有点像字符串的模板，常常用来按照“给定模式”匹配文本。

var regex = /xyz/;  // 引擎编译代码时，就会新建正则表达式，效率更高，内部转义元字符单斜杠\+
var regex = new RegExp('xyz');  // 在运行时新建正则表达式，内部转义元字符需要双斜杠\\+
- 正则表达式内部，还可以用\n引用括号匹配的内容，n是从1开始的自然数，表示对应顺序的括号。

• 正则表达式内部，还可以用\n引用括号匹配的内容，n是从1开始的自然数，表示对应顺序的括号，嵌套时\1代表外层括号。\2代表内层括号。

/(.)b(.)\1b\2/.test("abcabc")  // true
/y(..)(.)\2\1/.test('yabccab') // true
/y((..)\2)\1/.test('yabababab') // true

实例属性

• RegExp.prototype.ignoreCase：返回一个布尔值，表示是否设置了i修饰符。
• RegExp.prototype.global：返回一个布尔值，表示是否设置了g修饰符。
• RegExp.prototype.multiline：返回一个布尔值，表示是否设置了m修饰符。
• RegExp.prototype.flags：返回一个字符串，包含了已经设置的所有修饰符，按字母排序。

var r = /abc/igm;

r.ignoreCase // true
r.global // true
r.multiline // true
r.flags // 'gim'

• RegExp.prototype.lastIndex：返回一个整数，表示下一次开始搜索的位置。该属性可读写，但是只在进行连续搜索时有意义，详细介绍请看后文。
• RegExp.prototype.source：返回正则表达式的字符串形式（不包括反斜杠），该属性只读。

var r = /abc/igm;

r.lastIndex // 0
r.source // "abc"

实例方法

RegExp.prototype.test()

返回一个布尔值，表示当前模式是否能匹配参数字符串。若带有g修饰符则每一次test方法都从上一次结束的位置开始向后匹配。

var r = /x/g;
var s = '_x_x';

r.lastIndex // 0
r.test(s) // true

r.lastIndex // 2
r.test(s) // true

r.lastIndex // 4
r.test(s) // false

r.lastIndex = 1
t.test(s) //true

RegExp.prototype.exec()

用来返回匹配结果。如果发现匹配，就返回一个数组，成员是匹配成功的子字符串，否则返回null，返回数组包含index（模式匹配成功的开始位置）和input（整个原字符串）两个属性。

// 正则表达式包含圆括号时，第一个成员是整个匹配成功的结果，后面的成员就是圆括号对应的匹配成功的组。也就是说，第二个成员对应第一个括号，第三个成员对应第二个括号，以此类推。
var r = /a(b+)a/;
var arr = r.exec('_abbba_aba_');

arr // ["abbba", "bbb"]

arr.index // 1
arr.input // "_abbba_aba_"

// 利用g修饰符允许多次匹配的特点，用一个循环完成全部匹配
var reg = /a/g;
var str = 'abc_abc_abc'

while(true) {
  var match = reg.exec(str);
  if (!match) break;
  console.log('#' + match.index + ':' + match[0]);
}
// #0:a
// #4:a
// #8:a

在字符串实例方法中的应用

String.prototype.match()

返回一个数组，带g修饰符时成员是所有匹配的子字符串。

var s = 'abba';
var r = /a/g;

s.match(r) // ["a", "a"]
r.exec(s) // ["a"]

String.prototype.search()

按照给定的正则表达式进行搜索，返回第一个满足条件的匹配结果在整个字符串中的位置。如果没有任何匹配，则返回-1。

'_x_x'.search(/x/)
// 1

String.prototype.replace()

• 按照给定的正则表达式进行替换，返回替换后的字符串。

'aaa'.replace(/a/, 'b') // "baa"
'aaa'.replace(/a/g, 'b') // "bbb"

// 消除字符串首尾两端的空格
var str = '  #id div.class  ';
str.replace(/^\s+|\s+$/g, '')
// "#id div.class"

• 第二个参数可以使用美元符号$，用来指代所替换的内容。
  • $&：匹配的子字符串。
  • $+反引号：匹配结果前面的文本。
  • $'：匹配结果后面的文本。
  • $n：匹配成功的第n组内容，n是从1开始的自然数。
  • $$：指代美元符号$。

'hello world'.replace(/(\w+)\s(\w+)/, '$2 $1')
// "world hello"

'abc'.replace('b', '[$`-$&-$\']')
// "a[a-b-c]c"    

• 第二个参数还可以是一个函数，将每一个匹配内容替换为函数返回值，函数可以接受多个参数，其中第一个参数是捕捉到的内容，第二个参数是捕捉到的组匹配（有多少个组匹配，就有多少个对应的参数）。

var prices = {
  'p1': '$1.99',
  'p2': '$9.99',
  'p3': '$5.00'
};

var template = '<span id="p1"></span>'
  + '<span id="p2"></span>'
  + '<span id="p3"></span>';

template.replace(
  /(<span id=")(.*?)(">)(<\/span>)/g,
  function(match, $1, $2, $3, $4){
    return $1 + $2 + $3 + prices[$2] + $4;
  }
);
// "<span id="p1">$1.99</span><span id="p2">$9.99</span><span id="p3">$5.00</span>"

String.prototype.split()

按照给定规则进行字符串分割，返回一个数组，包含分割后的各个成员。

// 正则分隔，去除多余的空格
'a,  b,c, d'.split(/, */)
// [ 'a', 'b', 'c', 'd' ]

'aaa*a*'.split(/a*/)
// [ '', '*', '*' ]

'aaa**a*'.split(/a*/)
// ["", "*", "*", "*"]

'aaa*a*'.split(/(a*)/)
// [ '', 'aaa', '*', 'a', '*' ] 括号匹配的部分也会一起返回

匹配规则

可以参见我之前写的《正则表达式语法总结》

参考资料

JavaScript 语言入门教程 ：https://wangdoc.com/javascript/index.html