JavaScript正则表达式基本使用
- 定义正则表达式:
var reg=/java/; var reg2=new RegExp('java')
第一部分、javaScript中正则有关的几个函数
-
String.prototype.search
- 找出字符串中某个字符串首次出现的位置
'i love javaScript'.search(/love/); //2 'i love javaScript'.search(/like/);//-1
-
String.prototype.replace(regexp|substr,newSubStr|function)
- 形参:regexp为正则对象或者正则字面量,全局的时候需要g,sub为要被替换的字符串,newSubStr为用于替换的新字符串,其中可以插入一些特殊变量名,function改函数的返回值将替换掉第一个参数的匹配结果。
- 替换正则匹配的子字符串,返回替换后的新字符串,原先的不变
'i love javaScript'.replace(/love/,'like') //i like javaScript
使用字符串作为参数,替换字符串可以插入如下变量名
字符 替换文本 2 与正则中的第1到99个子表达式想匹配的文本 $& 与正则相匹配的字串 $` 匹配子串左侧文本 $' 匹配字串右侧文本 $$ 美元符号$ - replace的第二个参数可以为函数,函数的参数是匹配到的串儿
-
String.prototype.split(separator,limit)
- 形参:separator为字符串或者正则,limit需要的数组的长度
- 返回值:分割字符串,以数组的形式反回
- 注意:
- 如果分隔符是包含捕获括号的正则表达式,则每次分隔符匹配时,捕获括号的结果会被拼接到数组中,并不是浏览器都支持
'love'.split('',3) //['l','o','v'] 'i love javascript i like node js'.split(/l[oi][vk]e/) // ["i ", " javascript i ", " node js"] 'i love javascript i like node js'.split(/(l[oi][vk]e)/) // ["i ", "love", " javascript i ", "like", " node js"] ''.split(';') // [''] ''.split('') // [] 'love'.split('') // ['l','o','v','e']
-
String.prototype.match
- 捕获字符串的子字符串到一个数组中,默认只匹配一个
'i love java javaScript'.match(/java/) // ["java", index: 7, input: "i love java javaScript"] 'i love java javaScript'.match(/java/g) //["java", "java"]
-
RegExp.prototype.test
- 用来测试字符串中是否含有子字符串
/javaScript/.test('i love javaScript') //true
-
RegExp.prototype.exec
- exec方法一次只能匹配一个子字符串,即使含有g
var reg = /script/g; var str = 'i love javascript and typescript Javascript' reg.exec(str) // ["script", index: 11, input: "i love javascript and typescript Javascript"] reg.lastIndex //17 reg.exec(str) //["script", index: 26, input: "i love javascript and typescript Javascript"] reg.lastIndex //32 reg.exec(str) // ["script", index: 37, input: "i love javascript and typescript Javascript"] reg.lastIndex //43 reg.exec(str) // null reg.lastIndex // 0 reg.exec(str) // ["script", index: 11, input: "i love javascript and typescript Javascript"] reg.lastIndex //17
第二部分、正则表达式基础
更多详细教程请参考:菜鸟教程链接
-
元字符
字符 匹配规则 \d 匹配数字,大写取反 . 除换行符以外的任意字符 \w 匹配字母数字下划线,大写取反 \s 匹配空白符号,大写取反 \b 匹配单词边界 ^$ 开始结束 \num 对所获取的匹配的引用 '(.)\1' 匹配两个连续的相同字符 -
数量有关
字符 规则 {n} 匹配n次 {n,} 至少比n次 {n,m} 匹配n-m次 * 等价于{0,} + 等价于{1,} ? 等价于{0,1} - 贪婪与懒惰:正则表达式匹配尽量多的字符,例如
/test\d*//.match('test123')
返回test123。在标识符后添加?可以使其匹配尽量少的字符。
- 贪婪与懒惰:正则表达式匹配尽量多的字符,例如
-
字符范围
字符 匹配规则 [a-z] 匹配a-z任意字符 [\u4E00-\u9FA5] 找出Unicode编码范围是\u4e00到\u9FA5的字符,判断是否有汉子 -
分组
- ():匹配并获取匹配
- replacer函数中,JavaScript可以用9获取对应内容
'i love javaScript'.replace(/(love)/,'$1 $1') //'i love love javaScript'
- match函数:表达式有全局属性时,捕获所有符合的表达式,没有全局属性时,匹配第一个结果,将匹配到的字符串放入结果数组
'i love java javaScript'.match(/(java)/) //["java", "java", index: 7, input: "i love java javaScript"] 'i love java javaScript'.match(/(java\w*\b)/g) // ["java", "javaScript"] 'i love java javaScript'.match(/(java\w*) (java\w*)/) // ["java javaScript", "java", "javaScript", index: 7, input: "i love java javaScript"]
- exec函数:忽略全局属性,只返回一个结果和分组结果
/(java) (javaScript)/g.exec('i love java javaScript java javaScript') // ["java javaScript", "java", "javaScript", index: 7, input: "i love java javaScript java javaScript"]
-
分支条件:'|'分支条件影响两边所有内容
'javaScript typeScript'.match(/(java|type)Script/g) // ["javaScript", "typeScript"] 'javaScript typeScript'.match(/java|typeScript/g) // ["java", "typeScript"]
-
断言
- (?=exp):用来捕获正则表达式的后面,捕获括号内前面的内容,不分配组号
'i love javaScript'.match(/l\w+\s+(?=java\w*)/) // ["love ", index: 2, input: "i love javaScript"]
- (?!exp):用在正则表达式后面,捕获后面不是括号内的字符
- (?:exp):会匹配分组中的内容,但是不再分配组号,在replace,match等函数中作用也会消失。例如, 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式
'i love javaScript'.match(/(java\w*)/) // ["javaScript", "javaScript", index: 7, input: "i love javaScript"] 'i love javaScript'.match(/(?:java\w*)/) //["javaScript", index: 7, input: "i love javaScript"]
- (?=exp):用来捕获正则表达式的后面,捕获括号内前面的内容,不分配组号
-
三个处理选项:
内容 标记 文字描述 i ignoreCase 忽略大小写 g globle 全局匹配 m mutiple 多行匹配
第三部分、正则表达式高级
-
工作原理
,正则表达式在JavaScript中执行主要分为以下四个部分,编译=>设置开始位置=>正则匹配=>匹配结果这四部分
第四部分、ES6的正则扩展
- 构造函数:RegExp构造函数第一个参数是正则对象,第二个参数指定修饰符时会忽略原有正则的修饰符。
- 字符串对象的四个方法match、replace、search、split内部全部调用RegExp的实例方法,例如search调用RegExp.prototype[Symbol.search]
- u修饰符:用来正确处理大于\uFFF的Unicode字符,可以正确处理4个字节的UTF-16编码
- y修饰符(粘连sticky):与g相似,g只要求剩余位置中存在匹配就可以,y需要确保匹配从剩余的第一个位置开始。设计本质是让头部匹配标志^在全局匹配中都有效
- sticky属性,表示是否设置了y修饰符
- flag属性:返回正则的修饰符
- s修饰符:.可以匹配任意单个非终止符(终止符:换行符\n 回车符\r,行分隔符,段分隔符),引入/s修饰符,使得可以匹配任意单个字符,与之对应的dotAll表示是否处在doAll模式下。
- V8 4.9已经支持后行断言
- 具名组匹配,为每个分组起一个名字
- 此部分参考ES6标准入门
第五部分、常用正则表达式
- 邮箱匹配:
/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
- 正则表达式链接
第六部分、实例
// 将字符串中所有的<img/>标签替换为<span/>标签
textHTML.replace(/(<img.+?text="\S+".+?>)/gi,
match => match.replace(/<img.+text="(\S+?)".+>/, '<span>$1</span>')
// 校验URL
/^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\S+(?::\S*)?@)?(?:(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[0-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))|localhost)(?::\d{2,5})?(?:(/|\?|#)[^\s]*)?$/