正则表达式(regEx)

on regex

正则表达式是在字符串中执行搜索和替换的强大方法。可用于RegExp的test和exec方法，以及String的match、replace、search和split方法。

首先，正则表达式中的特殊字符可详见MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

创建正则表达式

在js中创建正则表达式有两种方法：

1.正则表达式文字：使用反斜杠(/)包括正则表达式，比如

var reg = /abc/;

2.正则表达式构造函数：使用RegExp模式，比如：

var reg = new RegExp('abc');

使用方法

1.str.search(reg)

将返回第一个匹配的位置，如果没有匹配的，就返回-1，比如：

var str = 'A girl';
console.log(str.search(/a/i));//0
2.str.macth(reg)，没有’g’标志

将返回一个数组，该数组包括匹配结果，及以下属性：

  • index - 字符串第一个匹配的位置
  • input - 整串字符串

例如：

var str = "a Fame is the thirst of youth";
var result = str.match( /fame/i );
console.log(result);//["Fame", index: 2, input: "a Fame is the thirst of youth"]

如果，表达式存在...则，

var str = "a Fame is the thirst of youth";
var result = str.match( /fame.../i );
console.log(result);//["Fame is", index: 2, input: "a Fame is the thirst of youth"]

如果，表达式存在括号分隔符，则会称为数组的一个单独数组，如：

var str = "a Fame is the thirst of youth";
var result = str.match( /fa(me)/i );
console.log(result);//["Fame", "me", index: 2, input: "a Fame is the thirst of youth"]

其中i标志表示搜索不区分大小写

3.str.macth(reg)，有’g’标志

当有’g’标志时，str.macth返回所有匹配的数组，没有其他属性。

比如：

var str = "Hello HEllo hello";
var result = str.match( /he/ig );
console.log(result);// ["He", "HE", "he"]

带有括号时,没有任何变化：

var str = "Hello HEllo hello";
var result = str.match( /h(e)/ig );
console.log(result);// ["He", "HE", "he"]

由此，使用’g’标志，result是一个普通数组，没有其他属性。

如果没有匹配的串，则返回null，此时不能用result.length

4.str.split(reg|str,limit)

使用正则表达式或子字符串座位分隔符分割字符串。例如：

字符串：
'12-34-56'.split('-');//[12, 34, 56]
或正则：
'12-34-56'.split(/-/);//[12, 34, 56]
5.str.replace(reg|str,str|func)

搜索并替换。如：

'12-34-56'.replace("-", ":");//12:34-56

查找并匹配第一项

若需匹配所有，则：

'12-34-56'.replace(/-/g, ":");//12:34:56

可以在其中使用特殊字符串：

符号	插入
$$	  "$"
$&	  匹配所有
$`	  匹配前的一部分
$'	  匹配后的一部分
$n	  如果n是1-2位数字，则表示从左到右数第n个圆括号的内容

例如，使用使用$&，使用"Miss.Minya"取代所有"Minya":

var str = "Minya S, Minya M and Minya B.";
console.log(str.replace(/Minya/g, 'Miss.$&'));//Miss.Minya S, Miss.Minya M and Miss.Minya B.

使用类似$1，$2这样的：

var str = "Summer Minya";
console.log(str.replace(/(Summer) (Minya)/, '$2, $1')) // Minya, Summer

使用function，例如：

var i = 0;
//依次替换'hello'
console.log("HELLO-Hello-hello".replace(/hello/gi, function(str,offset,s) {
	//str 匹配到的字符串
	//offset 匹配的字符串的下标
	//s 源字符串
	console.log(`${str}、${offset}、${s}`)
	return ++i;
})); // 1-2-3

其中function中输出：
HELLO、0、HELLO-Hello-hello 
Hello、6、HELLO-Hello-hello
hello、12、HELLO-Hello-hello
6.regexp.test(str)

RegExp是regexp本身可以调用的方法。

test查找匹配并返回true/false。用法跟str.search(reg) != -1类似，例如：

var str = "I love JavaScript";
console.log( /love/i.test(str) ); // true
console.log( str.search(/love/i) != -1 ); // true
console.log( /hello/i.test(str) ); // false
console.log( str.search(/hello/i) != -1 ); // false
7.regexp.exec(str)

如果没有g标志，则regexp.exec(str)返回第一个匹配，跟str.match(reg)类似。

如果有g标志，则regexp.exec(str)返回第一个匹配并记住它在regexp.lastIndex属性后的位置。然后开始搜索regexp.lastIndex并返回下一个匹配。如果没有更多匹配，则regexp.exec返回null并regexp.lastIndex设置为0。

如：

var str = "A lot about JavaScript at https://javascript.info";
var regexp = /JAVA(SCRIPT)/ig;

// 查找第一个匹配
var matchOne = regexp.exec(str);
console.log( matchOne ); // ["JavaScript", "Script", index: 12, input: "A lot about JavaScript at https://javascript.info"]
console.log( matchOne[0] ); // JavaScript
console.log( matchOne[1] ); // script
console.log( matchOne.index ); // 12 位置
console.log( matchOne.input ); // 源
console.log( regexp.lastIndex ); // 22 匹配后的开始位置

// 查找第二个匹配
var matchTwo = regexp.exec(str); // 从regexp.lastIndex开始继续查询
console.log( matchTwo[0] ); // javascript
console.log( matchTwo[1] ); // script
console.log( matchTwo.index ); // 34 位置
console.log( matchTwo.input ); // 源
console.log( regexp.lastIndex ); // 44 匹配后的开始位置

// 查找第三个匹配
var matchThree = regexp.exec(str); // 从regexp.lastIndex开始继续查询
console.log( matchThree ); // null 没有匹配项
console.log( regexp.lastIndex ); // 0 重置

‘y’标志

该y标志意味着搜索应该在属性指定的位置准确找到一个匹配项，并且regexp.lastIndex只在该位置。

通常搜索是在整个字符串中进行的：/javascript/在字符串的每个地方查找“javascript”。

但是当一个正则表达式有y标志时，它只在regexp.lastIndex（0默认）指定的位置查找匹配。

例如：

var str = "I love JavaScript!";
var reg = /javascript/iy;

console.log( reg.lastIndex ); // 0 默认
console.log( str.match(reg) ); // null 0位置没有匹配项

reg.lastIndex = 7;
console.log( str.match(reg) ); // JavaScript (JavaScript字符串的开始位置是7，所以正确匹配)

// 将reg.lastIndex设置为其他值，结果都是null

使用y标志主要作用是性能。

小结

仅搜索第一个匹配项：

  • 找一个匹配的位置 - str.search(reg)
  • 找完整的匹配 - str.match(reg)
  • 检查是否有匹配 - regexp.test(str)
  • 从给定的位置找到匹配 - regexp.exec(str)，设置regexp.lastIndex为位置

搜索所有的匹配项：

  • 匹配数组 - str.match(reg)带g标志的正则表达式
  • 获取所有匹配的关于每一个完整的信息 - regexp.exec(str)与g循环中的标志

搜索并替换：

  • 用另一个字符串或函数结果替换 - str.replace(reg, str|func)

分割字符串：

  • str.split(str|reg)

两个标志：

  • g查找所有匹配的标志（全局搜索）
  • y标志完全在文本内的给定位置进行搜索

任重而道远，这只是正则的九牛一毛，路还长着呢……(待续)