正则表达式 RegExp 学习
一,思考练习题
var str = "form-data-dialog"
// 把str 处理成 fromDataDialog
// 这个都不陌生吧,短横线转驼峰
二,创建正则
// 第一种方式 - 字面量方式
var reg = /abc/g
// 构造函数
var reg = new RegExp("abc",'g')
三,场景教学
// 1.简单的 匹配字符串中 是否含有 abc
var str = 'abcdef';
var reg = /abc/
reg.test(str) //true
reg.test('ab') //false
// 2.匹配是否含有数字
var reg = /[0-9]+/ // 这里注意“ + ”
reg.test('abc') // false
reg.test('abc1') // true
// 3. 高级点的是有效数字
var reg = /^-?(0?|[1-9]+)\.?\d*$/ // 这里注意 "+" ,"?", "*"
reg.test("1.23") //true
reg.test("-1.2") // true
reg.test("12a33") //false
这里的 "+" ,"?", "*" 都叫做量词
n+ 表示 1-无限个n
n? 表示 0-1个n
n* 表示 0-无限个n
那这里肯定会想到,如果想表示固定个数个呢
n{x} 表示x个n
n{x,} 表示x 到 无限个 n
n{x, y}表示x-y个n
还有上面的”^“,”$“ 叫做首尾匹配
^n 表示以n 开头
n$ 表示以n 结尾
四,贪婪匹配
上面讲到量词,这里我们说一个正则的特性 - 贪婪匹配
什么叫贪婪匹配呢?
var reg = /a*/ // 正则是匹配 0-无限个a
var str1 = "a"
var str2 = "aaa"
reg.test(str1) // true
reg.test(str2) // true
// 这里很容易知道两个字符串都是可以匹配成功的,我们使用string 的 match 可以查看正则匹配结果
str1.match(reg) // ['a',...]
str2.match(reg) // ['aaa',...]
// 这里我们思考一下,我们的正则是匹配 0- 无限个 a,按理说,a , aa, aaa ,a...都是一个成功的结果
// 为什么这里的输出结果都只有1个。原因就是因为正则的贪婪匹配原则(在量词匹配上能匹配多就不匹配少)
// 我们怎么取消掉这个贪婪匹配原则呢?只需要在量词匹配后面多写一个"?"就行
var reg = /a*?/ //非贪婪匹配a
str2.match(reg)
// 这里我们先猜想一下结果是什么
// 结果是[''...]。一旦我们在量词匹配后面加上了?就会采取最小匹配原则 * 最小就是0 就是没有,
// 讲到这我们顺便提一下 g修饰符
var reg = /a*?/g //非贪婪匹配a
str2.match(reg)
// 想想这里输出的又是什么呢
五,元字符
我们知道[0-9]?可以表示所有的数字组合,[A-ZA-z]可以表示 所有英文字母,那正则有没有什么简写能够直接帮我们实现呢?
www.w3school.com.cn/jsref/jsref… w3c正则参考手册
六,正则反向引用
如果现在我们有个需求是 查找 形如 aaaa bbbb cccc 这样4连重复的应该怎么写呢
// 这里介绍一下正则的反向引用
// /\w/ 可以匹配1位单词对吧,我们现在要找到连续4个相同单词
// /(\w)/ 我们先将 \w 括起来,这里()叫做可引用表达式
// ()表达式的结果会以\1,\2 .... 作为一个反向引用
var reg = /(\w)\1\1\1/
reg.test('aaaa') // true
reg.test("aaac") //false
// 匹配 aabb
var reg = /(\w)\1(\w)\2/
reg.test("aabb")
七,正则表达式在js中的常用
String 原型上的 split,replace 都可以使用正则
"1a2b3".split(/[A-z]+/) // [1,2,3] 更具引文字母拆分
"a1c2332bd".replace(/[A-z]/g,'') // "12332" //替换掉所有的英文字母
replace 这里重点讲解一下
replace 第二个参数是可以传入function 的当我们第一个参数是正则的时候 cb($,$1,$2)
callback的第一个参数是匹配到的结果,后续参数分别是 反向引用值 1,2,3....
现在试着解决一下第一题吧。。。。。。。
八,补充知识,RegExp的属性和方法
RegExp 对象属性
global | RegExp 对象是否具有标志 g。 |
---|---|
ignoreCase | RegExp 对象是否具有标志 i。 |
lastIndex | 一个整数,标示开始下一次匹配的字符位置。 |
multiline | RegExp 对象是否具有标志 m。 |
source | 正则表达式的源文本。 |
RegExp 对象方法
compile | 编译正则表达式。 |
---|---|
exec | 检索字符串中指定的值。返回找到的值,并确定其位置。 |
test | 检索字符串中指定的值。返回 true 或 false。 |
最后公布第一题的答案
var str = "form-data-dialog"
str.replace(/-(\w)/g,function($,$1){
return $1.toUpperCase()
})
// "formDataDialog"