简介:开发中,无可避免的要对数据进行处理,那么所有处理的数据中,处理字符串的比例最高,那么处理字符串最常用的方法比如正则,然而很多人并不是很会用,我们通常认为前端知识那么多,为什么要把经历放在这种小事情上,百度一下就好了啊,但是通常有可能你度到的不一定最适合,下面我将介绍正则的基础知识,以及我们常用正则收纳,以做参考,希望当你看过之后,可能不会自己写正则,但是可以快速正确的判断你goole到的表达式适不适合当前场景需求。<br>
理解正则首先要知道基本语法
g(全局匹配)
i(忽略大小写比配)
m(多行匹配)
元字符
+ 让前面的元字符出现1-多次
?0-1次
* 0-多次
{n} n次
{n,} n-多次
{n,m} n-m次
特殊意义的元字符
\ 转义字符
. 除了\n(换行符)以外的任意字符
\d 匹配一个0-9之间的数字
\D 匹配任意一个非0-9之间的数字
\w 匹配一个0-9 a-zA-Z或_之间的字符
\s 匹配任意一个空白字符
\b 匹配任意一个边界符
x|y 匹配x 或y 中的一个字符
[a-z]匹配a-z中任意一个字符
[^a-z]和上面相反
[xyz]匹配xyz中任意一个字符
[^xyz]和上面相反
0 匹配一个小分组(大正则中的小正则)
^ 以某个元字符开始
$ 以某个元字符结尾
?: 只匹配不捕获
?= 正向预查
?! 负向预查 比较难理解
……
eg:中文汉字的正则
reg = /^[\u4E00-\u9FA5]{2-5}()?$/
正则常用匹配方法
exec
字符串中常用支持捕获的方法
split // 通常处理url 可以忽略
match
replace
test
着几种方法各有优缺点
这里涉及到正则的懒惰型,只要不加g都会出现正则懒惰性,一下仅针对在不加g的情况(关于正则的懒惰行稍后解释)
exec 需要执行多次,,不仅捕获大正则,还有小分组,索引, input 等返回参数
split // 通常处理url 因为讲正则,这里仅仅是支持正则,不做重点描述
match 可以批量处理正则,但是小分组获取不到
replace 可以批量处理,,可以捕获小分组内容 (用的多)
test 匹配同时顺便捕获内容 但是仅能获取小分组内容
先说exec, 所有正则匹配都是以exec 为基础的, exec 一 返回捕获内容,如果捕获不到会返回 null ,
用法://.exec(str)
返回结果 ('大正则匹配',分组匹配,index(第一个匹配的下标值),input(元字符串))
match捕获原理
RegExp.prototype.mymatch = function myExecAll(){
var str = argument[0] || '',
result = []
var ary = this.exec(str)
while(ary){
result.push(ary[0])
}
return result;
}
macth 和 exec 在不加 g 的时候是没有区别的,但是加了g之后,match只能获得大正则的匹配结果,不能匹配到分组的匹配结果
split // 通常处理url 一般我们会执行两次 split(&) split(=)
现在我们可以用正则直接处理
split(/(&|=)/) 在使用split进行拆分的时候,如果正则中包含小分组,会将小分组的内容捕获到,放在最后的数组中,此案列中我们只想匹配不想捕获(&和=)可以使用 ?:
split(/(?:&|=)/)
replace捕获原理
本意是实现字符串中原有字符的替换
在不使用正则的情况下,repalce只能替换一个原有字符,且在第二次执行的时候,依然从字符索引为0开始查找,把最新的字符替换新字符,类似于正则的懒惰型,那么想解一般会和正则搭配到一起完成的
replace(/old/g,new) // 这里体现了g的作用
不加g只能捕获第一个
str.repleace(//g,function()) {
console.log(arguments)
return 'aa'
}
replace执行的时候,第二个参数传递的是一个回调函数,
第一步,根据正则匹配,将传递函数执行一次
第二步,不仅执行这个函数,海拔正则捕获结果当作实参传递给这个函数(和exce一样,数组,大正则匹配,小分组匹配都有),这样就可以在函数中获取这些值,而这些值就是正则每次捕获的结果,函数return是什么,,就相当于把大正则替换的什么
test 和 exec 同样都有捕获机制,返回结果不一样,但是执行原理一样,当这里有个前提,如果使用 g 我们执行完之后,会改变lastindex的值,下一次查找都会从上一次的 末尾开始查找,所以这两个不能同时用(正则的懒惰型,如果不加g 就不会改变lastindex的值)
test —— 不仅可以找到捕获内容,也能样把找到的内容获取到 ,但是他的执行结果是 true / false ,所以test靠返回结果肯定不能获取到内容, 但是他是怎么捕获内容的,但是只能结果中,第N个分组 console.log(RegExp.$1) ... ,这样看我们每次只能获取一个小分组的内容,那么如果我们想获取所有分组内容怎么办呢?
var result = [];
while(reg.text(str)){
result.push(RegExr.$1)
}
return result;
那么用exec怎么实现呢
var result = [],
ary = reg.exec(str)
while(ary){
result.push(ary[1]);
ary = reg.exec(str);
}
return result;
应用:
单词首字母大写
可能会想到边界 ,,边界代表单词左右,但 如果是 margin-left 我们会把他解析成两个单词,这并不是我们所希望的,
去除字符串首尾空格
trim trimRight trimLeft 好用但是不兼容
str = str.replace(/^\s+|\s+$/g,'')
时间格式化
地址栏传餐解析
string.prototype.myurlParamter = function(){
var obj = {};
this.relace(/([^?&-#]+)=([^?&-#+)/)/g,function(){
obj[arguments[1]] = arguments[2]
}
this.relace(/#([^?&-#]+)/g,function(){
obj['HASH'] = arguments[1]
}
return obj;
}
url.myurlParamter()