JavaScript正则表达式（以及正则含变量、常用的正则验证）

目标

1. 了解正则语法
2. 在IDE中用正则替换、查找字符串
3. 在javascript程序设计中，用正则表达式处理字符串

正则表达式

什么是正则表达式

RE(regular Expression) 用单个字符串匹配一系列符合某个句法规则的字符串。（按照某种规则去匹配符合条件的字符串）

通配符

find ./ -name *.text

^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$
邮箱匹配正则表达式

http://regexper.com 图形化看正则表达式
可以在github下载项目安装到本地

\d 数字；
？ 0-1次；

• 1到多

eg:
1: \b is \b; \b 表示单词边界
2: http:(//.+.jpg) \转义 .任意字符 ()分组
3: 2006/02/03 ^(\d{4})[/-](\d{1,2})[/-](\d{2})$

 "dfa2001-1-12fdafa2004-02-15dfda".match(/(\d{4})[/-](\d{1,2})[/-](\d{2})/g); //["2001-1-12", "2004-02-15"]

REGEXP对象

JS内置RegExp对象 支持正则表达式

实例化 RegExp对象
1 字面量 var reg = /\bis\b/g;(这样就是实例化了RegExp对象)
2 构造函数 var reg = new RegExp(’\bis\b’, ‘gim’);//g 全局 i 忽略大小写 m 支持换行

eg 字面量

"THIS Is a book".replace(/is/gi,'is') 
"THis is a book"
"THIS Is a book".replace(/\bis\b/gi,'is') 
"THIS is a book"

eg 构造函数

var reg = new RegExp('\\bis\\b', 'g');
"this is a map".replace(reg, 'Is')
"this Is a map"

修饰符

g:global 全文搜索，不加 搜索到第一个匹配停止
i: ignore case 忽略大小写， 默认大小写敏感
m: multiple line 多行搜索， 默认不多行搜索

元字符

正规有两种 基本字符类型组成：

1. 原义 文本 字符 abc is
2. 元字符 --> 在正则表达式中有特殊含义的非字母字符
   . * + ? $ ^ | \ () [] {}

\t 水平制表符
\v垂直制表符
\n换行符
\r回车符
\0零字符
\f换页符
\cX 与X对应的控制字符（ctrl +X）

字符类

一般情况下，正则表达式一个字符对应字符串一个字符

eg： ab\t 匹配特定的一种

'adfaab	'.match(/^\w+\t$/g);
//["adfaab	"]

eg：[abc]匹配特定的一类

'a1b2c3d4'.replace(/[abc]/g, 'x');
//"x1x2x3d4"

字符类取反

使用元字符^创建 反向类/负向类 （不属于某类的内容）
eg: 表达式 [^abc] 表示 不是字符a或b或c 的内容

'a1b2c3d4'.replace(/[^abc]/g, 'x');
//"axbxcxxx"

范围类

使用字符类匹配数字 [0 1 2 3 4 5 6 7 8 9]
使用字符类匹配小写字母 [a-z]
使用字符类匹配大写字母 [A-Z]

'2014-12-13'.replace(/[0-9-]/g, 'x');
//"xxxxxxxxxx"
'a1b2d3x4z9'.replace(/[a-z0-9]/g, 'q');
//"qqqqqqqqqq"

预定义类

. 等价 [^\r\n] 除了回车和换行符之外的所有字符
\d 等价 [0-9] 数字字符
\D 等价 [^0-9] 非数字字符
\s 等价 [\t\n\XOB\f\r] 空白符
\S 等价 [^\t\n\XOB\f\r] 非空白符
\w 等价 [a-zA-Z_0-9]单词字符（字母、数字、下划线）
\W 等价 [^a-zA-Z_0-9]非单词字符
大写表示取反

'fadfa1232131fdaf27648fdfs457vfgfd9gtr'.match(/\d/g);
//["1", "2", "3", "2", "1", "3", "1", "2", "7", "6", "4", "8", "4", "5", "7", "9"]
'fadfa1232131fdaf27648fdfs457vfgfd9gtr'.match(/\D/g);
//["f", "a", "d", "f", "a", "f", "d", "a", "f", "f", "d", "f", "s", "v", "f", "g", "f", "d", "g", "t", "r"]

边界

正则还提供了几个常用的边界匹配字符
^ 以开始 在[^]中取反
$ 以结束
\b 单词边界
\B 非单词边界

'@789'.replace(/^@\d/gm,'x');
//"x89"
'@789'.replace(/^@\d{1,3}/gm,'x');
//"x"
'@789'.replace(/^@\d{1,3}?/gm,'x');
//"x89"

量词

? 0-1 //{n,m}n到m次

• 1 --> 多 //{n,} 至少n次

• 0 -->多 //{n,} 至少n次
  {n}n次
  {n,m}n到m次
  {n,} 至少n次
  {0,m} 至多m次

'@789fadfdaf'.replace(/^@\d{1,}?/gm,'x');
//"x89fadfdaf"
'@789fadfdaf'.replace(/^@\d{1,}/gm,'x');
//"xfadfdaf"

贪婪模式

\d{3,6}

'12345678'.replace(/\d{3,6}/g, 'x');
"x78"//会先选择6个数字的来匹配

'123456789'.replace(/\d{3,6}/g, 'x');
"xx"//先6个数字匹配 后3个数字匹配

非贪婪模式

在量词后加上？即可

'12345678'.replace(/\d{3,6}?/g, 'x');
"xx78"

'123456789'.replace(/\d{3,6}?/g, 'x');
"xxx"

分组

匹配字符串long连续出现3次的场景

 long{3}  这是g出现三次
 (long){3}  //每个分组依次$1 $2 ....

忽略分组

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

(?:long).(ok) // ok ==> $1 

或

使用 | 可以达到或的效果

lo(ng|go)ng  =>  可以匹配longng  logong

反向引用

"2015-12-05".replace(/^(\d{4})\[^w](\d{2})\[^w](\d{2})$/g,$2+"/"+$1+"/"+$3); (有误 在"\["   在使用字符$时 需要转义\$  不然正则跟种默认规则在用)

"abc123def".replace(/(\d{1})(\d{1})(\d{1})/,"($1)($2)($3)")
//"abc(1)(2)(3)def"
'15012331122'.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3")
//"150****1122"

"2015-02-15".replace(/^(\d{4})[^\w](\d{1,2})[^\w](\d{1,2})$/g,"$2/$1/$3");

问： 一串字符串除第一位不变成*其余的全变成*，字符串长度不固定。
答案： '13fdsfafd'.replace(/(?<!^)\w/g,"*")

前瞻/后顾（JavaScript不支持）

正则reg方法中带参数有的为函数

var string = "abc123-ii";
string.replace(/(\d)-([\da-z])/g,function( str1, str2, str3,str4,str5){
         console.log( str1 );// 3-i
         console.log( str2 );// 3(第一个捕获)
         console.log( str3 );// i(第二个不捕获组)
         console.log( str4 );// 5(匹配在string中出现的位置)
         console.log( str5 );// abc123-ii（string本身）
         return "I";
})

var str = '2019/02/13';
str.replace(/\d+/g, function(str1){
	console.log(str1);
	return 'I'
});

正则reg对象属性

属性 默认值
global (g) 只读 false
ignoreCase (i) 只读 false
multiline (m)只读 false
lastIndex 表达式匹配内容最后一个字符下一个位置
source 正则表达式文本字符串

var reg2 = /\w/gim;
console.log(reg2.source); ⇒ '\w'

正则表达式方法

RegExp.xxx(str)

• RegExp.prototype.test(str);返回true， false

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

	var reg1 = /\w/;
	var reg2 = /\w/g;
	while (reg2.test('ab')){
		console.log(reg2.lastIndex);// 1 2 
	}

	(/w/g).test('a'); //每次实例化一个 RegExp 对象  （缺点增加内存开消）

• RegExp.prototype.exec(str);

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

  如果没有匹配文本 则返回null,否则返回一个结果数组。
  -index 匹配文本第一个字符的位置。
  -input 存放检索的字符串 string

  非全局调用（调用非全局的RegExp对象exec()时 RegExp的lastIndex属性不生效）

str.xxx(reg)

• String.prototype.match(reg)

  1 检索字符串，找到一个或多个与regexp匹配的文本
  2 regexp 有无标志g 影响结果。有g为全局调用
  非全局调用 match()只能在字符串中执行一次匹配，
  没有找到返回null,
  有返回一个数组 [index, input] 类似正则表达式 exce()

• String.prototype.search(reg,str)

  字符串中查找子字符串
  1 查到，返回第一个匹配结果index. 没有查到，返回-1
  2 search()方法 不执行全局匹配，忽略标志g,并且 总是从字符串的开始进行检索。

• String.prototype.replace(reg,str)

  从字符串中匹配到正则表达式规则的字符并替换成指定的字符串。

正则表达式中包含变量

var tmp = '';
    switch(vm.dataForm.importantWord) {
      case '1':
        tmp = '龙';
        break;
      case '2':
        tmp = '龚';
        break;
      case '3':
        tmp = '小';
        break;
      case '4':
        tmp = '宝';
        break;
      case '5':
        tmp = '可爱';
        break;
      case '6':
        tmp = '思';
        break;
      default:
        tmp = '';
    }
    var re;
    if (tmp != '') {
      eval("re = /" + tmp + "/g;");
    }
    vm.dataList.forEach((item, index)=> {
      if (tmp != '') {
        item.content = item.content.replace(re, '<span class="sele-word">'+tmp+'</span>');
      }
    })

注意： eval(“var re = /” + tmp + “/g;”);在控制台中不会报错。在项目中报错re未定义，才采用 先定义var re; 后通过eval(“re = /” + tmp + “/g;”)赋值

例子：
var re;
bb = ‘ft’;
eval(“re = /^” + bb + “v\d+\/(au|un)/”);
re.test(‘ftv123/au’) 为 true
re 为 /^ftv\d+/(au|un)/

常用的正则验证

/**
 * 邮箱
 * @param {*} s
 */
export function isEmail (s) {
  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}

/**
 * 手机号码
 * @param {*} s
 */
export function isMobile (s) {
  return /^1[0-9]{10}$/.test(s)
}

/**
 * 电话号码
 * @param {*} s
 */
export function isPhone (s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}

/**
 * URL地址
 * @param {*} s
 */
export function isURL (s) {
  return /^http[s]?:\/\/.*/.test(s)
}

正则表达式图谱

• 正则的基本语法
• 正则提供的方法
• 正则的修饰符与量词
• 字符串使用正则的方法

• 正则表达式之子项重定向思维导图