JavaScript正则表达式（以及正则含变量、常用的正则验证）
目标
- 了解正则语法
- 在IDE中用正则替换、查找字符串
- 在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 多行搜索， 默认不多行搜索
元字符
正规有两种 基本字符类型组成：
- 原义 文本 字符 abc is
- 元字符 --> 在正则表达式中有特殊含义的非字母字符
. * + ? $ ^ | \ () [] {}
\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"
"2015-02-15".replace(/^(\d{4})[^\w](\d{1,2})[^\w](\d{1,2})$/g,"$2/$1/$3");
问： 一串字符串除第一位不变成*其余的全变成*，字符串长度不固定。
答案： '13fdsfafd'.replace(/(?前瞻/后顾（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, ''+tmp+'');
}
})
注意： 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)
}
正则表达式图谱
- 正则的基本语法
- 正则提供的方法
- 正则的修饰符与量词
- 字符串使用正则的方法
- 正则表达式之子项重定向思维导图
