# RegExp
## 创建正则
~~~
let reg1 = new RegExp("^[a-zA-Z]", "g");
let reg2 = new RegExp(/^[a-zA-Z]/, "g")
let reg3 = /^[a-zA-A]/g;
~~~
## 参数
1. g:全局匹配
2. i:忽略大小写
3. m:多行匹配(匹配由\n或\r分开的行)
4. s:单行匹配
## 常用方法
#### exec
![](https://box.kancloud.cn/94161c6a1303af9ada88508c02c807b4_2168x616.png)
验证是否符合正则,符合就返回匹配的结果数组。包括:匹配的元素,索引值,搜索的数组。
~~~
/abc/.exec("defaabc")
// ["abc", index: 4, input: "defaabc", groups: undefined]
~~~
应用:找到以:开头,以.结尾的字符
~~~
const extractStr = (str) => {
const toSplit = /\:+(\w*)\.+/g;
let temp = null;
let result = [];
while(temp = toSplit.exec(str)){
result.push(temp[1]);
}
return result;
}
console.log(extractStr('My name is:Jerry. My age is:12.'))
~~~
在不设置g全局的情况下 对一个字符串反复调用exec都只会返回第一个匹配的对象 但是如果加了g就会一次返回
例如:
~~~
var text = "cat, bat, sat, fat";
var pattern1 = /.at/g;
var matches = pattern1.exec(text);
console.log(matches.index); //0
console.log(matches[0]); //cat
var matches = pattern1.exec(text);
console.log(matches.index); //5
console.log(matches[0]); //bat
var matches = pattern1.exec(text);
console.log(matches.index); //10
console.log(matches[0]); //sat
~~~
#### test
检查字符串是否符合正则的匹配结果,符合返回true,否则返回false。
## 匹配规则
#### 预定义类
1. \d数字,\D非数字
2. \s空白符,\S非空白符
3. \w数字,字母,下划线,\W非\w的内容
#### 匹配范围
1. [...]匹配字符范围以内的
2. [^...]匹配字范围以外的
3. ^匹配一次开头 $匹配一次结尾
4. /b 匹配边界
详情:
~~~
'this is aaa'.replace(/is\b/,'11')
// "th11 is aaa"
~~~
5. /B匹配非边界
~~~
'thisa is aaa'.replace(/is\B/,'11')
// "th11a is aaa"
~~~
#### 分组
1. (XYZ) 例如这里就是将XYZ分为一组。
2. (XYZ)\2 匹配XYZ是否重复两次。
#### 量词
1.?最多匹配一次。
2.+ 匹配一次或多次。
3.* 0次或多次。
4. {n,m}匹配n到m次。{n}n次 {n,}至少n次。
5. x|y 匹配x或y。
#### 断言
**x(?=y)** 匹配x当且仅当后面是y。
#### 反向引用
~~~
console.log('2011-11-13'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$2-$3-$1'));
// 11-13-2011
~~~
#### 贪婪匹配
/{{(.*?)}}/g为非贪婪匹配
#### match 非正则函数,是string的一个函数 但是可以配合正则使用。
match() 方法将检索字符串 stringObject,以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。
如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外,返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置,input 属性声明的是对 stringObject 的引用。
如果 regexp 具有标志 g,则 match() 方法将执行全局检索,找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串,则返回 null。如果找到了一个或多个匹配子串,则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同,它的数组元素中存放的是 stringObject 中所有的匹配子串,而且也没有 index 属性或 input 属性。
## 常用正则
[参考这个博客](https://juejin.im/post/5aed6da16fb9a07aac2457f6#comment)
[腾讯](http://imweb.io/topic/56e804ef1a5f05dc50643106)
- html
- 冒泡/捕获/委托
- 前端路由
- Dom
- 创建节点API
- 页面修改型API
- 节点查询型API
- 节点关系型API
- 元素属性API
- DOM事件
- classList
- 性能优化
- 节流防抖
- localStorage sessionStorage
- BOM
- meta
- data属性
- js实现拖拽
- html5
- 关于meta
- 轮播图
- js实现拖放
- 电话号inputFormater
- js
- es6
- promise
- iterator
- generator
- async
- proxy
- Set
- Map
- Object的扩展
- String
- Iterator
- Symbol
- 解构赋值
- 函数式编程
- module
- 基本数据类型
- 数组相关codings
- for of/for in
- this
- call bind apply
- 闭包
- 作用域
- prototype与继承
- 深浅拷贝
- setTimeOut/setInterval
- 垃圾处理机制
- 设计模式
- 观察者模式
- 单例模式
- 策略模式
- RegExp
- with
- 其他玩意
- Error/Stack Trace
- 面向对象
- css
- 回流重绘
- %取值
- 属性继承/属性优先级
- flex
- BFC
- 盒模型
- 设置css的方法
- 定位机制
- 块级/行内元素
- hack和一些别的玩意
- css动画
- 几个布局
- 画图形
- css3
- animation对比transform
- 点击不同图片区域跳转不同
- css选择器性能问题
- vh rem em
- css选择器
- 伪类伪元素
- css匹配原理
- 数据结构与算法
- 数据结构
- 树
- 链表
- 栈和队列
- 排序
- 归并排序
- 插入排序
- 选择排序
- 冒泡排序
- 快速排序
- 递归
- 回溯法
- 搜索算法
- 动态规划
- http
- 跨域问题
- CORS
- GET/POST
- ajax
- ajax上传文件
- http缓存
- https
- TCP/UDP
- cookie/session
- http2.0
- spdy
- websocket
- React
- redux
- 生命周期
- 虚拟dom与diff
- 双向数据绑定
- mvvm
- setState
- contextApi props reudx
- 高阶组件
- react-redux
- Fiber
- react-router
- 受控/非受控组件
- 待整理
- webpack
- loader实现
- 前端安全
- 移动端适配
- Vue
- 传值
- 其他