前端笔记之JavaScript(六)让人头疼的正则表达式

一、正则表达式

1.1正则概述和体验

正则表达式是被用来匹配字符串中的字符组合的模式,常用来做表单验证。在JavaScript中,正则表达式也是对象,是一种引用类型。

案例:正确输入一个电话号码,010-12345678,用户输入正确返回“对”,错误返回“错”

var tel = prompt("请输入电话号码");
var reg = /^\d{3}-\d{8}$/;
if(reg.test(tel)){
alert("对");
}else{
alert("错");
}

字符串的方法:

split() 根据匹配把字符串分割为字符串数组。

match() 使用正则表达式与字符串相比较,返回一个包含匹配结果的数组。

search() 对正则表达式或指定字符串进行搜索,返回第一个出现的匹配项的下标。

replace() 替换与正则表达式匹配的字符串。

正则表达式方法:

exec() 检索字符串中指定的值。返回找到的值,并确定其位置。

test() 检索字符串中指定的值。返回 true 或 false。

注意:任何数据自己的方法,都要自己对应数据打点调用

字符串:打点调用字符串方法

正则:打点调用正则方法


1.2正则表达式

使用一个正则表达式字面量是最简单的方式,两个“//”是正则表达式的定界符。

正则表达式:Regular Expression,通常简写为:RegExp

语法:

/正则符号/

/abc/  表示匹配的是一个abc三个字符,而且三个字符必须同时连在一起,顺序不能颠倒。

var reg = /abc/;  //正则表达式字面量,尽量赋值给一个变量

console.log(typeof reg); //object

正则表达式是一种对象数据类型,引用类型的其中一种,变量保存的是正则对象的地方。


1.3字符串方法

split()方法用于把字符串分割成数组(字符串→数组),从什么地方拆分,就是参数

var str = "aa bbb     c dddd  eeee  ffff";

console.log(str.split(" ")); //如果用字符串方法进行分割,一个空格分割

console.log(str.split(/\s+/)); //正则表达式可匹配一个或多个空白字符

前端笔记之JavaScript(六)让人头疼的正则表达式

//用a当分割符

var str = "bbbbaaacccaaaddddaeeeeaaaafff";

console.log(str.split(/a+/)); //匹配a,+号表示并且出现一次或多次

前端笔记之JavaScript(六)让人头疼的正则表达式

match()使用正则表达式与字符串相比较,返回包含匹配结果的数组。

可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。默认:返回找到的第一个字符组成数组。

var str = "bbbbaaacccaaaddddaeeeeaaaafffbbb";

console.log(str.match(/a/)); //返回匹配第一次出现结果的字符

console.log(str.match(/a+/)); //返回匹配结果的多个字符

console.log(str.match(/a+/).index); //返回匹配结果的下标

前端笔记之JavaScript(六)让人头疼的正则表达式

var str = "aaa o   o  bbbb o       o  aaaa";

console.log(str.match(/o\s+o/g)); //g 全局匹配

使用正则表达式作为分隔符,可以进行模糊匹配

\s   表示匹配空白字符

+    表示前面的字符出现一次或多次

g    全局定界符,全局匹配

search()对正则表达式或指定字符串进行索,返回第一个出现的匹配项下标位置。(无视全局定界符)

var str = "abcdefgcd";
console.log(str.search("cd")); //2,字符串匹配
console.log(str.search("cdf")); //-1,没有匹配返回-1
console.log(str.search(/cd/g)); //2,正则匹配,无视全局定界符g var str = "aaa o t o o bbbb o o aaaa";
console.log(str.search(/o\s+o/)); //10,字符串匹配
console.log(str.search(/o\so/g)); //-1,不能完全匹配

值为-1,表示字符串内没有匹配的项,或者不能完全匹配。

replace()替换与字符串匹配正则表达式匹配的子串。

两个参数:

参数1:匹配原字符串的字符(可以是字符串、正则)

参数2:替换的新字符。产生新字符串,不影响原字符串。

//需求:将www.webqianduan.cn 替换乘www.iqianduan.cn
var str = "www.webqianduan.cn";
console.log(str.replace("webqianduan","iqianduan")); //字符串匹配替换
console.log(str.replace(/webqianduan/,"iqianduan")); //正则匹配替换
console.log(str); //不影响原字符串

前端笔记之JavaScript(六)让人头疼的正则表达式

replace第二参数还可以是函数,$1表示正则匹配到的第一个结果,$2是第二个结果,以此类推,如果同时更改两个匹配结果可以返回一个数组。

var str = "www.webqianduan.cn";
var arr = str.replace(/\.(\w+)\./,function(match,$1){
console.log(match,$1);
return ".iqianduan."
});
console.log(arr);

前端笔记之JavaScript(六)让人头疼的正则表达式

//如果没有()匹配的话函数的参数分别为:当前匹配的字符(match),当前匹配字符的位置(pos),原始字符串(origin)
var text = 'cat,bat,sat,fat';
var result = text.replace(/cat,bat/, function (match, pos, originalText) {
console.log(match, pos, originalText);
return 'ond'//将匹配到的更换成ond
});
console.log(result);//ond,sat,fat

练习:过滤字符串中的空格

var str1 = "aa  b  c d e f";

console.log(str1.replace(/\s+/g,""));

前端笔记之JavaScript(六)让人头疼的正则表达式


1.4正则表达式方法

正则表达式方法:

exec() 检索字符串中指定的值。返回找到的值,并确定其位置。

test() 检索字符串中指定的值。返回 true 或 false。

exec()在字符串中去匹配正则表达式,如果有输出第一个到数组中。(无视全局定界符g)

可以通过index属性获取原字符串下标。

var str = "fuahndabcfnkandabc";

console.log(/abc/.exec(str));

console.log(/abc/.exec(str).index); //下标为6

前端笔记之JavaScript(六)让人头疼的正则表达式

var str = "oooooo 0 0   ooooo";
var reg = /o\s+0\s+0\s+o/;
console.log(reg.exec(str));
console.log(reg.exec(str).index); //下标为5

前端笔记之JavaScript(六)让人头疼的正则表达式

test() 检索字符串中指定的值(匹配正则表达式)。有返回 true,没有返回false。

var str = "aaddccccdddabcd";
var reg = /abc/; //精确匹配
console.log(reg.test(str)); //true
console.log(str.search(reg)); // //练习检测"a bc"和"abc"是否包含空格
var str1 = "a bc";
var str2 = "abc";
var reg = /\s+/;
console.log(reg.test(str1));//true
console.log(reg.test(str2));//false

前端笔记之JavaScript(六)让人头疼的正则表达式


二、正则的术语和操作符

正则表达式:

由一些普通字符和一些特殊字符(又叫元字符--metacharacters)组成。普通字符包括大小写的字母和数字,而元字符则具有特殊的含义。

特殊字符javascript中常用特殊字符有

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

若想匹配这类字符必须用转义符号“\” 如:“\.”“\^” , “\\

2.1精确匹配

精确匹配指的是要去匹配某一个固定值或常量,匹配abc,正则表达式里必须用精确的术语进行匹配。

正则表达式:/abc/ ,表示要匹配三个字符,分别是abc必须是顺序在一起。

精确匹配没有特殊符号:

前端笔记之JavaScript(六)让人头疼的正则表达式


2.2预定义特殊符号

预定义特殊字符:

\t /\t/ 制表符  eg: console.log(/\t/.test(' '))

\n /\n/ 回车符 eg: console.log(/\n/.test(`aaa

bbb`));

\f /\f/ 换页符

\t制表符:

前端笔记之JavaScript(六)让人头疼的正则表达式

\n回车符:

前端笔记之JavaScript(六)让人头疼的正则表达式回车符:不能直接敲回车换行,使用``这对引号包裹可以直接换行。


2.3字符集

前端笔记之JavaScript(六)让人头疼的正则表达式

用正则表达式中的一类字符去匹配字符串中的一个字符。字符集用[]包括。

比如[abc],表示可以匹配a,也可以匹配b,也可以匹配c,只要存在其中一个都是对的。

简单类:正则的多个字符对应一个字符,可以用[]把它们括起来,让[]这个整体对应一个字符。将所有可能性都列在[]内,不要出现其他字符,直接连写。

var str = "fiafiortfasoztfakoct";

console.log(str.match(/o[rzc]t/g));

前端笔记之JavaScript(六)让人头疼的正则表达式

范围类:有时候匹配的东西过多,而且类型又相同,全部输入太麻烦,我们可以在中间加个横线。

[0-9] 查找任何从 0 至 9 的数字。

[a-z] 查找任何从小写 a 到小写 z 的字符。

[A-Z] 查找任何从大写 A 到大写 Z 的字符。

[A-z] 查找任何从大写 A 到小写 z 的字符。

var str = "oo1234abcdfABCDFAAE";
console.log(str.match(/o[0-9]/g)); //["o1"]
console.log(str.match(/o[a-z]/g)); //["o1"]
console.log(str.match(/a[a-z]c/g)); //["abc"]
console.log(str.match(/B[A-Z]D/g)); //["BCD"]

前端笔记之JavaScript(六)让人头疼的正则表达式

组合类:允许用中括号匹配不同类型的单个字符。

[0-9a-zA-Z]:表示匹配的可以是数字、小写字母、大写字母。

// o开头c结尾,中间任意一个字符
var str = "abc123a8c123aBca3c";
console.log(str.match(/a[0-9a-z]c/g));
console.log(str.match(/a[0-9a-zA-Z]c/g));
console.log(str.match(/a[5-9A-F]c/g));
console.log(str.match(/a[5-9abc]c/g));

前端笔记之JavaScript(六)让人头疼的正则表达式

负向类:[]前面加个元字符“^”进行取反,表示匹配不能为括号里面的字符 [^a]

var str = "abcortaaaaoctbbbo4toPt";
console.log(str.match(/o[^a-z]t/g));
console.log(str.match(/o[^A-Z]t/g));
console.log(str.match(/o[^0-9]t/g));
console.log(str.match(/o[^0-9abc]t/g));

前端笔记之JavaScript(六)让人头疼的正则表达式


2.4修饰符

前端笔记之JavaScript(六)让人头疼的正则表达式

g :全局修饰符,修饰符用于执行全局匹配(查找所有匹配),一直到将所有可能性都匹配成功。

global:全局、全球。使用时的位置:在正则的字面量//后面。match、replace方法都可以使用g

var str = "01222a333b56c7890de";
console.log(str.match(/[0-9]+/));
console.log(str.match(/[0-9]+/g));
console.log(str.match(/a[0-9]+/g));

前端笔记之JavaScript(六)让人头疼的正则表达式

i :修饰符,用于执行大小写不敏感匹配

var str = "aabbbcccAAcAaa";

console.log(str.match(/aa/g));

console.log(str.match(/aa/gi)); //大小写不敏感

前端笔记之JavaScript(六)让人头疼的正则表达式

注意:修饰符位置,都是//后面,修饰符可以同时使用,连写就可以了。


2.5边界

^  :开头,不能写在[]中,如果写在[^]是取反的意思。

匹配的是字符串必须以什么开头。^后面的正则术语匹配的字符串必须是开头。

console.log(/^hello/.test("hello javascript"));  //true
console.log(/^hello/.test("helo javascript")); //false
console.log(/^hello/.test("hhello javascript")); //false
console.log(/^hh/.test("hhello javascript")); //true

$ :结尾匹配的是必须以$前面的字符为结尾(必须完全匹配),$写在正则里面//的最后。

console.log(/javascript$/.test("hello javascript"));  //true
console.log(/javascript$/.test("hello javascript$")); //false
console.log(/javascript$/.test("hello javascript@")); //false
console.log(/javascript@$/.test("hello javascript@")); //true

^和$可以同时使用,必须以他们中间的内容当做开头和结尾,字符串只能有中间的内容。

console.log(/^[0-9]+$/.test(8888888888888)); //true
console.log(/^[0-9]+$/.test("88888abc888")); //false
console.log(/^[0-9abc]+$/.test("88888abc888")); //true
console.log(/^[a-zA-Z][0-9a-zA-Z]+$/.test("88888abc888")); //false
console.log(/^[a-zA-Z][0-9a-zA-Z]+$/.test("abc888abc888")); //true
console.log(/^[a-zA-Z][0-9a-zA-Z]*$/.test("a1234aaa")); //true
console.log(/^[a-zA-Z][0-9a-zA-Z]+$/.test("a")); //true
console.log(/^[a-zA-Z]bbb[0-9a-zA-Z]+$/.test("abbba")); //true

\b 单词边界,用于查找位于单词的开头或结尾的匹配

限定匹配的字符必须位于单词的边界,配合其他的字符匹配时,\ba表示a字符必须匹配,而且a必须位于单词的开头,c\b表示c字符匹配必须位于单词的结尾。

console.log(/\ba/.test("apple"));   //true
console.log(/\ba/.test("iapple")); //false
console.log(/\ba/.test("i apple")); //true
console.log(/ple\b/.test("i apple")); //true
console.log(/e\b/.test("i apple")); //true var str = 'i love JavaScript very much@pei';
console.log(str.match(/\b[a-z]/gi));
console.log(str.match(/\b[a-z]+/gi));

前端笔记之JavaScript(六)让人头疼的正则表达式

\w,表示查找单词字符,包含数字、大小写字母、下划线

console.log("we are family no".match(/\w+/g));
console.log("we are family no".match(/\b\w+\b/g));
console.log("we are Family no".match(/\b[a-z]+\b/g));
console.log("We Are Family No".match(/\b[a-z]+\b/g));
console.log("We Are Family No".match(/[a-z]+\b/g));

\B  匹配非单词边界,用于查找不在单词的开头或结尾。

\B写在前面,表示后面那个字符匹配时必须不是一个单词的开始

\B写在后面,表示前面那个字符匹配时必须不是一个单词的结尾。

var str = 'i love JavaScript very much@pei';
console.log(str.match(/\b[a-z]+\b/gi));
console.log(str.match(/\B[a-z]+\B/gi));

前端笔记之JavaScript(六)让人头疼的正则表达式

对比记忆:单词边界\b必须包含单词边界,非单词边界\B不能有单词边界。


2.6预定义类(元字符)

预定义类其实都是对一些字符集的简写。

.[^\n\r] 除了换行和回车之外的任意字符

console.log(/.+/.test("!@#$%#$%^gjsdhbf11222")); //true
console.log(/^.+$/.test(`!@#$%#$%^gjsdh
bf11222`)); //false

\d[0-9]只匹配数字字符,一个\d只能匹配一个数字

console.log(/^\d$/.test(0123456789888));  //false
console.log(/^\d+$/.test(0123456789888)); //true
console.log(/^\d+$/.test('0123456789a888')); //false

\D[^0-9]匹配非数字字符,只要不是数字都可以

console.log(/^\D+$/.test(0123456789888));    //false
console.log(/^\D+$/.test("0123457aa89888")); //false
console.log(/^\D+$/.test('abc@#$%^&你好abc')); //true

\s[\t\n\x0B\f\r]匹配空白字符、空格、缩进、换行、换页

console.log(/\s+/.test(`你好
啊!!`)); //true,匹配到换行
console.log(/\s+/.test('你好 ')); //true
console.log(/^\s+/.test('你好 '));//false
console.log(/^\s+/.test(' 你好 '));//true

\S[^\t\n\x0B\f\r]匹配非空白字符(除了空白符都可以)

console.log(/^\S+$/.test("  你好 ")); //false
console.log(/^\S+$/.test(" 你好 ")); //false
console.log(/^\S+$/.test("!@#$%abc13")); //true

\w[a-zA-Z_0-9]单词字符(所有的大小写字母/数字/下划线)

console.log(/^\w+$/.test('abc12345ABC_dd')); //true
console.log(/^\w+$/.test('abc12345ABC_dd#@')); //false
console.log(/^\w+$/.test('abc12345ABC_dd文字')); //false
console.log(/^\w+$/.test('abc12345ABC_dd ')); //false

\W[^a-zA-Z_0-9]匹配非单词字符(所有的大小写字母/数字/下划线)

console.log(/^\W+$/.test('abc12345ABC_dd')); //false
console.log(/^\W+$/.test('你好,#¥%……&&')); //true
console.log(/^\W+$/.test(' ')); //true

2.7量词

有一些字符进行匹配时,连续多个可能是相同的字符,提供量词去解决出现重复次数的书写方式。

规定数量:作用范围是量词前面的一个字符。

{n}   硬性量词,内部写对应重复次数。

console.log(/ab{3}c/.test('abbbc'));  //true
console.log(/ab{3}c/.test('abbc')); //false
console.log(/ab{3}c/.test('abbbbc')); //false

{n,m} 软性量词,至少出现n次但不超过m次(中间不能有空格)。

大于等于n次,小于等于m次。

console.log(/ab{3,5}c/.test('abbc'));    //false
console.log(/ab{3,5}c/.test('abbbc')); //true
console.log(/ab{3,5}c/.test('abbbbbc')); //true
console.log(/ab{3,5}c/.test('abbbbbbc')); //false

{n,} 软性量词,至少出现n次(+的升级版)。

可以出现n次或更多次,上不封顶,但不能小于n次

console.log(/ab{3,}c/.test('abbc'));     //false
console.log(/ab{3,}c/.test('abbbc')); //true
console.log(/ab{3,}c/.test('abbbbbbbc'));//true

? 软性量词,出现零次或一次,等价于{0,1}

console.log(/ab?c/.test('ac'));   //true
console.log(/ab?c/.test('abc')); //true
console.log(/ab?c/.test('abbbbc')); //false

* 软性量词,出现零次或多次 等于{0,}

console.log(/ab*c/.test('ac'));   //true
console.log(/ab*c/.test('abc')); //true
console.log(/ab*c/.test('abbbbc')); //true

+ 软性量词,出现一次或多次(至少一次),等价于{1,}

console.log(/ab+c/.test('ac'));   //false
console.log(/ab+c/.test('abc')); //true
console.log(/ab+c/.test('abbbbc')); //true

量词除了修饰前面的单个字符,还可以搭配预定义类使用。


2.8分组

虽然量词的出现,能帮我们处理一排紧密相连的同类字符,但这还不够,我们需要重复的字符不是一个或多个,就要用小括号对多个字符进行分组。

 console.log(/(bye){2}/.test('bye'));    //false
console.log(/(bye){2}/.test('byebye')); //true
console.log(/bye{2}/.test('byeee')); //true

2.9或操作符

可以使用竖线“|”字符表示或者的关系。

“|”前面或后面,如果没有限制,会将“或”前后分为两个整体,只要匹配成功一个就可以。

a|bcd:表示匹配的字符串,要么包括一个单独的a,要么包括一个整体bcd

console.log(/^12|abc$/.test('1abc')); //true
console.log(/^12|abc$/.test('abc')); //true
console.log(/^12|abc$/.test('12')); //true
console.log(/^12|abc$/.test('12abc'));//true

可以利用圆括号来分组,将“|”操作符包裹起来,就跟后面没关系

(a|b)cd;表示从a、b选其一,后面是cd

console.log(/^a(d|b)c$/.test('bc'));  //false
console.log(/^a(d|b)c$/.test('abc')); //true
console.log(/^a(d|b)c$/.test('adc')); //true
console.log(/^a(d|b)c$/.test('ad')); //false

验证一个月31天内都为真:

console.log(/^((0?[1-9])|((1|2)[0-9])|30|31)$/.test(28));


2.10反向引用

反向引用标识是对正则表达式中的匹配组捕获的子字符串进行编号,通过“\编号(在表达式中)”,“$编号(在表达式外)”进行引用。从1开始计数。

正则表达式中一个分组的符号,会在字符串中找到匹配的结果,这个匹配这个可以用个一些特殊的书写反向引用。

在正则表达式中反向引用“\编码”,从1开始

在正则表达式外反向引用“$编码”,从1开始

console.log(/\w{3}/.test('bye')); //true
console.log(/(\w{3})\1/.test('byebye')); //true
console.log(/(\w{3})\1/.test('bye')); //false
console.log(/(\w{3})\1/.test('byehhh')); //false
console.log(/(\w{3})\1\1/.test('byebyebye')); //true console.log("123*456".replace(/(\d{3})\*(\d{3})/,'$2==$1'));

除了直接反向引用之外,还可以对引用的字符做一些复杂的操作

replace()第二参数还可以是函数,$1表示正则匹配到的第一个结果,$2是第二个结果,以此类推

函数的参数分别为:当前匹配的字符(match),当前匹配字符的位置(pos),原始字符串(origin)

替换函数必须有返回值,它才会去替换新内容。

var reg = "123*456".replace(/(\d{3})\*(\d{3})/,function(match,$1,$2){
return $2 + '*****' + $1;
//return parseInt($1) + parseInt($2);
});
console.log(reg);

2.11中文匹配

匹配中文固定语法:[\u4e00-\u9fa5]

console.log(/^[\u4e00-\u9fa5]+$/.test("爱前端")); //true
console.log(/^[\u4e00-\u9fa5]+$/.test("爱前端iqianduan")); //flase
console.log(/^[\u4e00-\u9fa5]+$/.test("爱前端123")); //flase
console.log(/^[\u4e00-\u9fa5]+$/.test("愛前端繁體")); //true var str = prompt("请输入用户名,必须是4-6位汉字!");
var reg = /^[\u4e00-\u9fa5]{4,6}$/;
if(reg.test(str)){
alert("对");
}else{
alert("错误");
}

上一篇:bcp和load table


下一篇:第一节:.Net版基于WebSocket的聊天室样例