JS正则表达式

正则体验

• 从字符串中找出数字

str.match(/\d+/g);

• 替换字符

var reg = /is/g;
str.replace(reg,"**");
var reg = /\bis\b/g;
str.replace(reg,"**");

• 过滤关键词

var reg = /淘宝|京东/g;
str.replace(reg,"**");

• 替换html标签

var reg = /<[^<>]+>/g;
str.replace(reg,"**");

• 邮箱校验

var reg = /^\w+@[0-9a-z-]+\.[a-z]+$/i;
reg.test(value)

• 是否有汉字

var reg = /[\u4e00-\u9fa5]+/g;
reg.test(value)

• 计算汉字的长度

function getLength(str){
    return str.replace(/[\u4e00-\u9fa5]/g,"aa").length;
}

• URL解析

var reg = /(\w+):\/\/([\w\.]+)\/(\w*)/;
str.match(reg)

---

什么是正则

匹配字符串的规则

创建正则对象

• 方法一(构造函数): new RegExp(规则,修正模式) 如:new RegExp(‘a’,‘g’)

• 方法二(字面量): /规则/修正模式 如:var reg = /a/

原子(正则中的最小匹配单位)

• 可见原子-键盘输出后可以看得见的字符,如符号,英文,数字等

注意,以下字符具有特殊含义,如果要使用原本的字符意思,需要在前面添加\来转义

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

• 不可见原子-键盘输出后看不见的字符,如换行(\n),回车(\r),制表符(\t),垂直制表符(\v) 换页符(\f)

原子筛选

• | 竖线两边任意匹配
• [] 括号中任意一个原子,可以写区间(闭区间),如[a-z0-9]
• [^] 括号中任意一个原子之外的原子
• 注意:一般情况下,正则中的一个字符对应字符串中的一个字符, 例如:/ab\t/表示字符串中连续出现字符 ab制表符

原子集合

• . 除了回车和换行外的任意字符 等价[^\r\n]
• \d 任意数字,等价[0-9], \D 任意非数字 等价[^0-9]
• \w 任意数字,字母,下划线 等价[0-9a-zA-Z_],\W 任意非数字,字母,下划线 等价[^0-9a-zA-Z_]
• \s 空白符 等价于[\t\n\f\r],\S 非空白符 等价于[^\t\n\f\r]

量词(限定前面原子出现的次数)

• {n} 前面原子恰好出现n次
• {n,} 前面原子最少出现n次
• {n,m} 前面原子最少出现n次,最多出现m次
• + 前面原子最少出现1次 等价{1,}
• ? 前面原子最少出现0次,最多出现一次 等价{0,1}
• * 前面原子最少出现0次 {0,}

匹配模式

• 贪婪模式-尽可能多的匹配(默认)

    '12345'.replace(/\d{2,4}/,'X');
    "X5"

• 非贪婪模式-尽可能少的匹配(在量词后添加?)

    '12345'.replace(/\d{2,4}?/,'X');
    "X345"

边界控制

• ^ 匹配字符串开始的位置,限制必须以其后面的原子开头，前面不能有任何东西
• $ 匹配字符串结尾的位置，限制必须以其前面的原子结束，后面不能有任何东西
• \b 单词边界
• \B 非单词边界
• () 把括号里面的正常表达匹配的结果当作一个原子来看,起到分组的效果,分组后可以通过反向引用来取得分组后的值,反向引用从$1开始

//匹配四个一个小写字母加一个数字的字符串
'a1b2c3d4aaaa'.replace(/([a-z]\d){4}/,"*");
"*aaaa"
//将年月日替换成月日年
'2018-05-09'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$2/$3/$1');
"05/09/2018"

修正模式

• i(ignoreCase) 忽略大小写,默认区分大小写,可以通过正则对象上的global属性查看
• g(global) 匹配所有的,默认只找到第一个,可以通过正则对象上的ignoreCase属性查看

前瞻

• 正则从文本头部向文本尾部解析,文本尾部成为"前",前瞻就是向前(文本尾部)检查是否符合断言

• 正向前瞻 exp(?=assert) 匹配到exp的内容后再看前面的内容符合不符合assert,符合的话就匹配exp的内容

//字符后面是数字的字符
'a2*3b&'.replace(/\w(?=\d)/g,'X')
X2*3b&

• 负向前瞻 exp(?!assert) 匹配到exp的内容后再看前面的内容符合不符合assert,不符合的话就匹配exp的内容

//字符后面不是数字的字符
'a2*3b&'.replace(/\w(?!\d)/g,'X')
"aX*XX&"

正则对象的方法

• 正则对象属性

lastIndex 当前正则匹配内容的最后一个字符的下一个位置
source 正则的文本字符串

• RegExp.prototype.test(str);

test方法测试字符串是否有匹配到正则的字符串,有返回true,没有返回false
如果全局匹配时,每一次匹配后正则对象上的lastIndex属性会更改,改为匹配内容的最后一个字符的下一个位置,所以结果会不可靠,一般使用test方法时建议不要全局匹配
如果非全局匹配时,lastIndex始终是0,也就是说始终从第0个元素开始查找

var reg = /\w/g;
console.log("0::",reg.lastIndex);//0
console.log("1::",reg.test('ab'));//true
console.log("2::",reg.lastIndex);//1
console.log("3::",reg.test('ab'));//true
console.log("4::",reg.lastIndex);//2
console.log("5::",reg.test('ab'));//false
console.log("6::",reg.lastIndex);//0

• RegExp.prototype.exec(str);

exec方法对字符串执行搜索,并更新正则对象上的lastIndex属性,如果没有匹配的返回null,有的话返回一个数组:

• 数组的第0个元素是匹配的内容,如果有分组,从下标是1开始是对应分组的内
• index 是匹配内容第一个字符的位置
• input 是被搜索的字符串

• 如果非全局匹配时,lastIndex始终是0,也就是说始终从第0个元素开始查找

var reg = /(\d{4})-(\d{2})-(\d{2})/g;
var str = 'a2018-05-10b';
console.log(reg.lastIndex);//0
console.log(reg.exec(str));//["2018-05-10", "2018", "05", "10", index: 1, input: "a2018-05-10b", groups: undefined]
console.log(reg.lastIndex);//11
console.log(reg.exec(str));//null
console.log(reg.lastIndex);//0
console.log(reg.exec(str));//["2018-05-10", "2018", "05", "10", index: 1, input: "a2018-05-10b", groups: undefined]

字符串方法中使用正则

• String.prototype.search(reg)

• 从字符中检索于正则相匹配的字符串,返回第一个匹配结果的index,查不到返回-1
• search方法不执行全局匹配,它会忽略g,并且总是从字符串开始检索

• String.prototype.math(reg)

• 非全局匹配的结果和exec一样
• 全局匹配,会找到字符串中的所有匹配字符串,如果没有匹配的话返回null,有的话返回一个数组:

• 数组中的每一项就是一个匹配结果,数组中没有index和input等属性
• 全局匹配不需要分组

• String.prototype.split(reg)

根据正则匹配的内容把字符串分隔成数组

'a1b2c3d'.split(/\d/);
["a", "b", "c", "d"]

• String.prototype.replace(reg,str2)

把字符串中匹配到正则的子串用str2进行替换

• String.prototype.replace(reg,function(匹配结果,index,原值))

把字符串中匹配到正则的子串传递到回调函数进一步处理,用函数的返回值来替换匹配项

var str = 'a1b2c3d4'.replace(/\d/g,function(match,index,origin){
    return parseInt(match)+1;
})

String 对象方法

• 根据位置返回字符 str.charAt(index)

• 位置在0和str.length-1之间,如果不在返回空字符
• 一个汉子是一个字节

• 根据位置返回字符的编码 str.charCodeAt(index)

• 位置在0和str.length-1之间,如果不在返回空字符
• 一个汉子是一个字节
• charCodeAt返回的是字符的Unicode码
• Unicode码是统一的编码,Unicode码包含了ASCII码(0-127)

• 根据字符返回位置 str.indexOf(str1) / str.lastIndexOf(str1)

• indexOf 从前向后找,找不到返回-1
• lastIndexOf 从后向前找,找不到返回-1

• URI 编码 encodeURIComponent(str)
• URI 解码 decodeURIComponent(str)
• 连接字符串 concat()
• 截取字符串 slice()
• substr
• substring
• 把字符串转换为小写 toLowerCase()
• 把字符串转换为大写 toUpperCase()
• 保留小数位 toFixed()
• 搜索字符 str.search(str1)