正则表达式

454 阅读1分钟

正则表达式 RegExp 学习

一,思考练习题

var str = "form-data-dialog"
// 把str 处理成 fromDataDialog
// 这个都不陌生吧,短横线转驼峰

二,创建正则

// 第一种方式 - 字面量方式
var reg = /abc/g

// 构造函数
var reg = new RegExp("abc",'g')

正则构造函数MDN文档

三,场景教学

// 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]可以表示 所有英文字母,那正则有没有什么简写能够直接帮我们实现呢?

image-20200515125806543

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"