进场

为了婚配划定情势的文本
为了保卫天下的战争
我们是穿越在银河的正则表达式
就是如许~喵~

好用的正则表达式可视化东西： https://regexper.com/

语法

//字面量
var regExp1 = /pattern/flags;

//或用组织函数
var regExp2 = new RegExp(pattern[, flags]);

pattern：正则表达式的婚配情势
flags：可选，正则表达式的标识，也可选多个。g全局婚配，i疏忽大小写，m婚配多行

一颗超简朴的栗子：

var regExp = /abc/;
"abcdefg".replace(regExp, "WOW"); // "WOWdefg"

经常运用特别字符

1.字符鸠合

2.预定义情势

预定义情势就是某些经常运用情势的简写。

3.须要转义的字符

正则情势中，须要用斜杠转义的:

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

须要特别注重的是，假如运用RegExp要领天生正则对象，转义须要运用两个斜杠，由于字符串内部会先转义一次。

4.边境

举个栗子说 \b 和 \B :

"You are smart, but she is smarter.".replace(/smart\b/,"kind");
//"You are kind, but she is smarter."

"You are smart, but she is smarter.".replace(/smart\B/,"kind");
//"You are smart, but she is kinder."

if(看不懂){ 就置几着手尝尝吧 (ง •̀_•́)ง }

5.数量词

6.贪欲与懒散（非贪欲）

默许是贪欲情势婚配，即婚配尽量多的字符。

var regExp1 = /\d{3,6}/;
"1234567890".replace(regExp1, "X");
//"X7890"

若想手动开启懒散情势，须要在情势后加 ?

var regExp1 = /\d{3,6}?/;
"1234567890".replace(regExp1, "X");
//"X4567890"

7.分组与反向援用

分组又叫“子表达式”，把完全的正则表达式分红一个个小组，然后反过来用“组号”去援用这些小组就叫“反向援用”。

用例子来讲：

//无分组
var regExp1 = /abc{2}/; //如许量词{2}只能婚配到c一个字符

//分组
var regExp2 = /(abc){2}/; //如许量词{2}就能够婚配到abc三个字符啦 
//同时 abc 也有了一个组号 $1

再看一个栗子：

var reg = /(\d{1}).*(\d{2}).*(\d{3})/;
"1sss23sss456".replace(reg,"$1?$2?$3");
//"1?23?456"

上面的栗子换一种运用分组的体式格局：

var reg = /(\d{1}).*(\d{2}).*(\d{3})/;
var result = reg.exec("1sss23sss456");
console.log(result[1]+"-"+result[2]+"-"+result[3]);
//"1-23-456"

组婚配异常有效，下面是一个婚配网页标签的例子：

var tagName = /<([^>]+)>[^<]*<\/\1>/; // \1 就是第一个组婚配的内容
tagName.exec("<b>bold</b>")[1]

上面代码略加修正，就能够捕捉带有属性的标签：

var html = '<b class="hello">Hello</b><i>world</i>';
var tag = /<(\w+)([^>]*)>(.*?)<\/\1>/g;

var match = tag.exec(html);

match[1] // "b"
match[2] // " class="hello""
match[3] // "Hello"

match = tag.exec(html);

match[1] // "i"
match[2] // ""
match[3] // "world"

非捕捉组： (?:x) 示意不返回该组婚配的内容，即婚配的效果中不涌现这个括号。

经常运用要领

正则对象的要领

1.RegExp.prototype.test()

测试当前正则是否能婚配目的字符串，返回布尔值。

var reg = /\d{2}/;
var str = "1sss23sss456";
reg.test(str); //true

2.RegExp.prototype.exec()

在目的字符串中实行一次正则婚配操纵，返回婚配的子字符串。

var reg = /\d{2}/;
var str = "1sss23sss456";
var result = reg.exec(str); 
result[0]; //23
result.index; //4
result.input; //"1sss23sss456"

3.RegExp.prototype.toString()

返回一个字符串，其值为该正则对象的字面量情势。覆蓋了Object.prototype.toString() 要领。

var reg = /\d{2}/;
reg.toString(); // "/\d{2}/"

字符串对象的要领

1. str.replace()

返回替代后的值

var reg = /\d{2}/;
var str = "1sss23sss456";
str.replace(reg,"?"); //"1sss?sss456"

经常运用于消弭首尾空格：

var str = '  abc def ggg   ';
str.replace(/^\s+|\s+$/g, '');
// 'abc def ggg'

replace要领的第二个参数能够运用美圆标记来指代所替代的内容：

> $& 指代婚配的子字符串。
> $` 指代婚配效果前面的文本。
> $' 指代婚配效果背面的文本。
> $n 指代婚配胜利的第n组内容，n是从1最先的自然数。
> $$ 指代美圆标记$。

replace要领的第二个参数还能够是一个函数，将每个婚配内容替代为函数的返回值。这个函数能够接收多个参数，第一个参数是捕捉到的内容，第二个参数最先是捕捉到的组婚配（有多少个组婚配，就对应有多少个参数）。另外，末了还能够增加两个参数，倒数第二个是捕捉到的内容在全部字符串中的位置，末了一个参数是原字符串。下面是一个网页模板替代的例子：

var prices = {
  'pr_1': '$1.99',
  'pr_2': '$7.99',
  'pr_3': '$9.99',
};

var template = '<span id="pr_1"></span><span id="pr_2"></span>';

template.replace(
  /(<span id=")(.*?)(">)(<\/span>)/, 
  function(match, p1, p2, p3 ,p4) {
    return p1 + p2 + p3 + prices[p2] + p4;
  });
//<span id="pr_1">$1.99</span><span id="pr_2"></span>

注重：第二个分组要加 ? 开启懒散情势，不然正则表达式默许的贪欲情势会婚配尽量多的字符。贪欲情势下，上面的例子中第二个分组会婚配到pr_1"></span><span id="pr_2 这一长串，从而没法婚配到我们愿望的字符串。

2.match()

与exec()相似，返回婚配的子字符串。

var reg = /\d{2}/;
var str = "1sss23sss456";
str.match(reg); //["23"]

与exec()的区分在于：当正则表达式加了g标识符时，效果差别。看栗子：

var reg = /\d{2}/g;
var str = "1sss23sss456";
reg.exec(str); //["23"]
str.match(reg); //["23","45"]

3.search()

返回婚配的首字符的位置。

var reg = /\d{2}/;
var str = "1sss23sss456";
str.search(reg); //4

4.split()

返回支解后的数组。

var reg = /\d{2}/;
var str = "1sss23sss456";
str.split(reg); //["1sss","sss","6"]

小演习

1. 写一个婚配手机号的正则（第一位是1，第二位是[3,4,5,7,8]中的一个，背面另有9位数字）

2. 写一个婚配 2017-01-01 或 2017/01/01 这两种花样日期的正则表达式

————答案：

1. /^1[34578]\d{9}$/

2. /^\d{4}[-/]\d{2}[-/]\d{2}$/

运用

1.运用正则转变数据结构

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
console.log(newstr); //Smith, John

2.在多行中运用正则表达式

var s = "Please yes\nmake my day!";
s.match(/yes.*day/); // null
s.match(/yes[^]*day/); //'yes\nmake my day'

3.从URL中提取子域名

var url = "http://xxx.domain.com";
console.log(/[^.]+/.exec(url)[0]); //  "http://xxx"
console.log(/[^.]+/.exec(url)[0].substr(7)); //  "xxx"

婚配除了.以外的恣意元素，一到多个字符。

“不会运用即是没有学会”，热烈欢迎小伙伴们在批评区补充日常平凡用到正则表达式的处所，然后我会增加在文章里，一同网络吧 ヽ(•̀ω•́ )ゝ

参考：

1.正则表达式进修笔记

2.MDN RegExp文档

3.实战JS正则表达式

4.正则表达式30分钟入门教程