学习地址:慕课网 JavaScript正则表达式
学习地址:慕课网 JavaScript正则表达式
通配符:*
测试正则表达式: 在线工具:http://regexper.com 也可以从npm上安装到本地运行
例:^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$
d 数字
d? 数字 一个或零个
d+ 数字 一个或多个
d{3} 数字 3个
d{3,5} 数字 3-5个
d* 数字 任意个
例:将某小写单词转换为大写
单词边界
is 只匹配单词is
例:去除http://或https://
查找:http:(//.+.jpg)
替换:$1
. 表示任意字符
http://.+.jpg 匹配http://XXXXXXX.jpg 注意转义
http:(//.+.jpg) 分组,方便过滤
$1表示组
例:日期替换
查找:^(d{4})[/-](d{2})[/-](d{2})$ 匹配2018/03/18或者2018-03-18
替换:$2-$3-$1 替换为:03-18-2018
^ 表示开头
d{4} 四位数字
[/-] /或者-
d{2} 2位数字
() 利用()分组,$1 $2 $3
$ 表示结尾
JavaScript正则表达式:
通过RegExp对象支持正则表达式
例001.js:
var reg = /is/; 只匹配第一个
var reg = /is/g; 全局匹配
例002.js:使用构造函数:
例003.js:修饰符:g i m
g : global 全文搜索,不添加,搜索到第一个匹配停止
i : ignore case 忽略大小写,默认大小写敏感
m : multiple lines 多行搜索
var testString = 'He is a boy. Is he?';
console.log(testString.replace(/is/g,'0')); //He 0 a boy. Is he?
console.log(testString.replace(/is/gi,'0')); //He 0 a boy. 0 he?
例004.js:元字符: 两种类型:原义文本字符、元字符
元字符:是在正则中有特殊含义的非字母字符
如:* + ? $ ^ . | () {} []
var testString = 'a1b2c3d4';
console.log(testString.replace(/[abc]/g,'x')); //x1x2x3d4
例005.js :字符类取反
使用元字符^创建 反向类/负向类
var testString = 'a1b2c3d4';
console.log(testString.replace(/[^abc]/g,'x')); //axbxcxxx
例006.js : 范围类 [a-z] [A-Z] [0-9]
var testString = '-a1b2c3d4xxz9AA-';
console.log(testString.replace(/[a-zA-Z-]/g,'Q')); //Q1Q2Q3Q4QQQ9
例.js :预定义类
. 除了回车和换行符外的所有字符
d 数字字符
D 非数字字符
s 空白符
S 非空白符
w 单词字符(字母、数字、下划线)
W 非单词字符
例007.js 边界
^ 以XX开始
$ 以XX结束
边界
B 非边界
例008.js 量词 匹配出现20次数字的字符串
? 出现零次或一次
+ 出现一次或多次
* 出现零次或多次
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
例:d{20}wd?w+d*d{3}w{3,5}d{3,}
例009.js 贪婪模式 与 非贪婪模式
var testString = '12345678';
console.log(testString.replace(/d{3,6}/g,'X')); //X78 贪婪模式
console.log(testString.replace(/d{3,6}?/g,'X')); //XX78 非贪婪模式
例010.js 分组
使用()可以达到分组的功能,使量词作用于分组 例:(Byron){3}
var testString = '1a23s4c5b678';
console.log(testString.replace(/[a-z]d{3}/g,'X')); //1a23s4c5X 贪婪模式
console.log(testString.replace(/([a-z]d){3}/g,'X')); //1a23X78 非贪婪模式
例011.js 或 使用|可以达到效果
var testString = 'ByronCasper_ByrCasper';
console.log(testString.replace(/Byron|Casper/g,'X')); //XX_ByrX
console.log(testString.replace(/Byr(on|Ca)sper/g,'X')); //ByronCasper_X
例012.js 反向引用 $1 $2 $3
分组:(byron).(ok)
忽略分组:只要在分组内加上?: 就可以 (?: byron).(ok)
var testString = '2018-03-18';
console.log(testString.replace(/(d{4})-(d{2})-(d{2})/g,'$1')); //2018
console.log(testString.replace(/(d{4})-(d{2})-(d{2})/g,'$2')); //03
console.log(testString.replace(/(d{4})-(d{2})-(d{2})/g,'$3')); //18
console.log(testString.replace(/(d{4})-(d{2})-(d{2})/g,'$1/$2/$3')); //2018/03/18
例013.js 前瞻 (断言)
正向前瞻: exp(?=assert)
负向前瞻: exp(?!assert)
var testString = 'a2*34vv';
console.log(testString.replace(/w(?=d)/g,'X')); //X2*X4vv
console.log(testString.replace(/w(?=d)/g,'X')); //X2*X4vv
console.log(testString.replace(/w(?!d)/g,'X')); //aX*3XXX
例014.js 对象属性
global : 是否全文搜索,默认false
ignore case : 是否大小写敏感,默认是false
multiline : 多行搜索,默认值是false
例015.js test和exec方法:
reg.test(); //返回true或false
因为lastIndex的影响,会导致全局搜索时循环
reg.exec(str); //返回数组
例016.js,017.js 字符串对象方法:
string.serch(reg); 返回第一个匹配结果的index,查不到返回-1;不支持全局搜索
console.log('a1b2c3d4'.search(/[a-z]/g)); //0
console.log('a1b2c3d4'.search(/[A-Z]/g)); //-1
string.match(reg); 返回null或数组
console.log('a1b2c3d4'.match(/d(w)d/g)); //[ '1b2', '3d4' ]
string.split(reg); 返回数组:把一个字符串分割成字符串数组
console.log('a1b2c53d4'.split(/d/g)); //[ 'a', 'b', 'c', '', 'd', '' ]
string.replace('1',2); 017.js替换一个与正则表达式匹配的子串
console.log('a1b1c1'.replace('1',2)); //a2b1c1
console.log('a1b1c1'.replace(/1/g,2)); //a2b2c2
//replace() function参数含义:
// 1、匹配字符串
// 2、正则表达式分组内容,没有分组则没有改参数
// 3、每个匹配结果的位置
// 4、原字符串
var res = 'a1b2c3d4e5'.replace(/d/g,function(match,index,origin){
console.log(index); //1 3 5 7 9
// console.log(match); //1 2 3 4 5
return parseInt(match)+1;
});
console.log(res); //a2b3c4d5e6