正则表达式
1.1什么是正则表达式
- 正则表达式( Regular Expression)是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象
- 通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式。
正则表达式在JavaScript中的使用场景:
- 例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文**(匹配)**
- 比如用户名: /1{3,16}$/
- 过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分**(提取)**等。
1.2语法
1.2.1定义正则表达式语法
// 其中/ / 是正则表达式字面量
let 变量名 = /表达式/
<body>
<script>
//定义正则表达式 reg 里面存的是对象
let reg = /前端/
</script>
</body>
1.2.2判断是否有符合规则的字符串:
- **test()方法 ** 用来查看正则表达式与指定的字符串是否匹配
语法:
reg0bj.test(被检测的字符串)
比如:
letstr='IT培训,前端开发培训,web前端培训,软件测试培训,产品经理培训’
let reg= /前端/
let re = reg.test(str)
console.log(re) // true
- 如果正则表达式与指定的字符串匹配,返回true,否则false
1.2.3检索(查找)符合规则的字符串:
-
**exec()**方法 在一个指定字符串中执行一个搜索匹配
-
语法:
reg0bj.exec(被检测字符串)
-
比如:
let str = 'IT培训,前端开发培训,web前端培训,软件测试培训,产品经理培训' let reg = /前端/ let re = reg.exec(str) console.1og(re) // 返回的是个数组
1.3元字符
-
普通字符:
大多数的字符仅能够描述它们本身,这些字符称作普通字符,例如所有的字母和数字。
也就是说普通字符只能够匹配字符串中与它们相同的字符。 -
元字符(特殊字符)
- 是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能。
- 比如,规定用户只能输入英文26个英文字母,普通字符的话abcdefghijklm…
- 但是换成元字符写法: [a-z]
-
参考文档:
- MDN: 正则表达式 - JavaScript | MDN (mozilla.org)
- 正则测试工具: http://tool.oschina.net/regex
1.3.1边界符
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符
边界符 | 说明 |
---|---|
^ | 表示匹配行首的文本(以谁开始) |
$ | 表示匹配行尾的文本(以谁结束) |
如果^和$在一起,表示必须是精确匹配。
<body>
<script>
// console.log(/哈/.test('哈哈'))
// console.log(/哈/.test('二哈'))
// // 以 ^ 开头
console.log(/^哈/.test('二哈')) // false
console.log(/^二哈/.test('二哈我开心')) // true
// 以 $ 结尾
console.log(/哈$/.test('我开心的哈哈')) // true
console.log(/哈$/.test('我开心的哈哈大笑')) // false
// 以 ^ 开头, 以 $ 结尾 (精确匹配)
console.log(/^哈$/.test('哈哈大笑')) // false
console.log(/^哈$/.test('大笑哈哈')) // false
console.log(/^哈$/.test('哈哈大笑哈哈')) // false
console.log(/^哈$/.test('哈')) // true 精确匹配
</script>
</body>
1.3.2量词
量词用来 设定某个模式出现的次数
量词 | 说明 |
---|---|
* | 重复零次或更多次 |
+ | 重复一次或更多次 |
? | 重复零次或一次 |
{n} | 重复n次 |
{n,} | 重复n次或更多次 |
{n,m} | 重复n到m次 |
// * 量词 n >= 0
console.log(/a*/.test('')) //true
console.log(/a*/.test('a')) //true
console.log(/a*/.test('aa')) //true
console.log(/a*/.test('aaaaaaaa')) //true
console.log(/a*/.test('b')) //true
// + 量词 n >= 1
console.log(/a+/.test('')) //false
console.log(/a+/.test('a')) //true
console.log(/a+/.test('aa')) //true
console.log(/a+/.test('aaaaa')) //true
console.log(/a+/.test('b')) //false
// ? 出现 0 || 1
console.log(/^a?$/.test('')) // true
console.log(/^a?$/.test('a')) // true
console.log(/^a?$/.test('aa')) // false
// {n} 只能出现 n次 符号之间不要加空格
console.log(/^a{3}$/.test('aa')) //false
console.log(/^a{3}$/.test('aaa')) //true
console.log(/^a{3}$/.test('aaaa')) //false
// {n,} >= n
console.log(/^a{3,}$/.test('aa')) //false
console.log(/^a{3,}$/.test('aaa')) //true
console.log(/^a{3,}$/.test('aaaa')) //true
// {n,m} >= n <= m
console.log(/^a{3,6}$/.test('aa')) //false
console.log(/^a{3,6}$/.test('aaa')) //true
console.log(/^a{3,6}$/.test('aaaa')) //true
console.log(/^a{3,6}$/.test('aaaaa')) //true
console.log(/^a{3,6}$/.test('aaaaaaaa')) //false
1.3.3字符类
1.3.3.1[] 匹配字符集合
- 后面的字符串只要包含abc中任意一个字符,都返回true。
// 字符类 [], abc中存在一个即为true
console.log(/[abc]/.test('abc')) //true
console.log(/[abc]/.test('')) //false
console.log(/[abc]/.test('andy')) //true
console.log(/[abc]/.test('baby')) //true
console.log(/[abc]/.test('cry')) //true
console.log(/[abc]/.test('die')) //false
// 字符类[], abc中只能存在一个才能为true
console.log(/^[abc]$/.test('abc')) //false
console.log(/^[abc]$/.test('a')) //true
console.log(/^[abc]$/.test('b')) //true
console.log(/^[abc]$/.test('c')) //true
console.log(/^[abc]$/.test('cc')) //false
1.3.3.2[] 里面加上 - 连字符
-
使用连字符 - 表示一个范围
console.log(/^[a-z]$/.test('c')) // true
-
比如:
- [a-z] 表示a到z 26个英文字母都可以
- [a-zA-Z] 表示大小写都可以
- [0-9]表示0~9的数字都可以
// 26个英文字母选其中的一个
console.log(/^[a-zA-Z]$/.test('d')) // true
console.log(/^[a-zA-Z]$/.test('D')) // true
console.log(/^[a-zA-Z]$/.test('DD')) // false
console.log(/^[a-zA-Z0-9]$/.test('6')) // true
console.log(/^[a-zA-Z0-9-_]$/.test('6')) // true
1.3.3.3[] 里面加上^取反符号
- 比如:
- [^a-z] 匹配除了小写字母以外的字符
- 注意要写到中括号里面
1.3.3.4字符 . 匹配除换行符之外的任何单个字符
1.3.3.5预定义:指的是某些常见模式的简写方式
预定类 | 说明 |
---|---|
\d | 匹配0-9之间的任一数字, 相当于[0-9] |
\D | 匹配所有0-9以外的字符,相当于*[^0-9]* |
\w | 匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_ ] |
\W | 除所有字母、数字和下划线以外的字符,相当于*[^A-Za-z0-9_]* |
\s | 匹配空格(包括换行符、制表符、空格符等) , 相等于[ \t\r\n\v\f] |
\S | 匹配非空格的字符,相当于*[^ \t\r\n\v\f]* |
日期格式: ^\d{4}-\d{1,2}-\d{1,2}
1.4 修饰符
修饰符约束正则执行的某些细节行为,如是否区分大小写、是否支持多行匹配等
语法:
/表达式/修饰符
- i是单词ignore的缩写,正则匹配时字母不区分大小写
- g是单词global的缩写,匹配所有满足正则表达式的结果
console.log(/a/i.test('a')) // true
console.log(/a/i.test('A')) // true
替换replace替换
字符串.replace(/正则表达式/,'替换的文本')
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<div></div>
<script>
let btn = document.querySelector('button')
let textarea = document.querySelector('textarea')
let div = document.querySelector('div')
btn.addEventListener('click', function () {
// 过滤用户输入的内容
div.innerHTML = textarea.value.replace(/激情|基情/g, '**') //加了g就是全部出现'激情'或者'基情'的地方都会替换
// div.innerHTML = textarea.value
})
</script>
</body>
a-z0-9_ - ↩︎