目录
正则表达式
正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象
补充:检测中文的正则表达式 /^[\u4e00-\u9fa5]$/
作用:
1、表单验证(匹配)
2、过滤敏感词(替换)
3、字符串中提取需要的部分(提取)
语法:
1、定义正则表达式(制定要匹配的规则)
2.1、判断是否有符合规则的字符串
使用test()方法检测要测试的数据是否与正则表达式相匹配
<script>
let reg = /前端/
// 正则表达式的的定义
let str = '前端工程师'
let Str = '后端工程师'
// 要匹配的数据
console.log(reg.test(str))
console.log(reg.test(Str))
// 语法test()方法检测要测试的数据是否与定义的正则表达式相匹配,匹配则返回true不匹配返回false
</script>
2.2、检索(查找)符合规则的字符串
使用exec()方法在测试数据中找到与正则表达式相匹配的部分并返回,匹配成功返回的是一个数组,否则返回null
<script>
let reg = /前端/
// 正则表达式的的定义
let STR = '测试,算法,前端,后端'
// 要匹配的数据
console.log(reg.exec(STR))
// exec()方法用于在测试数据中检索(查找)出与正则表达式相匹配的数据并返回,返回的是一个数组
// 输出打印: ['前端', index: 6, input: '测试,算法,前端,后端', groups: undefined]
// index表示索引号,从零开始在测试数据的第六个位置查找到
</script>
元字符
普通字符:大多数字符仅能描述他们本身,这些字符称作普通字符,例如所有的字母和数字
元字符(特殊字符):具有一些特殊含义的字符,可以极大提高灵活性和强大的匹配功能
参考文档:
正则测试工具: 在线正则表达式测试
元字符分类:
1、边界符(表示位置,开头和结尾,必须用什么开头,用什么结尾)
2、量词(表示重复次数)
3、字符类(比如 \d 表示 0~9)
边界符
^ 表示匹配行首的文本(以谁开始)
$ 表示匹配行尾的文本(以谁结尾)
<script>
// ^ 检测行首
console.log(/^哈/.test('二哈'))//false
console.log(/^哈/.test('哈哈'))//true
//$ 检测行尾
console.log(/哈$/.test('哈皮'))//false
console.log(/哈$/.test('二哈'))//true
// ^ 与 $ 搭配使用--精确匹配
console.log(/^哈$/.test('哈哈'))//false
// 在精确匹配/^ …… $/中检测对象必须与定义的正则表达式内容完全一样才能返回true
console.log(/^哈$/.test('哈'))//true
</script>
量词
量词用来设定某个模式出现的次数
书写量词表达式一定不要加空格
*表示重复零次或更多次
+表示重复一次或更多次
?表示重复零次或一次
{n} 表示重复n次
{n,} 表示重复n次或更多次
{n,m} 表示重复n到m次
<script>
// * 表示重复零次或更多次
console.log(/^a*$/.test(''))//true
console.log(/^a*$/.test('aaaaaa'))//true
console.log(/^a*$/.test('b'))//false
console.log('--------')
// + 表示重复一次或更多次
console.log(/^a+$/.test('a'))//true
console.log(/^a+$/.test('aaaa'))//true
console.log(/^a+$/.test(''))//false
console.log(/^a+$/.test('b'))//false
console.log(/^a+$/.test('aba'))//false
console.log('--------')
// ?表示重复零次或一次
console.log(/^a?$/.test(''))//true
console.log(/^a?$/.test('a'))//true
console.log(/^a?$/.test('aa'))//false
console.log('--------')
// {n} 表示重复n次
console.log(/^a{3}$/.test(''))//false
console.log(/^a{3}$/.test('aaa'))//true
console.log(/^a{3}$/.test('aaba'))//false
console.log(/^a{3}$/.test('baaa'))//false
console.log('--------')
// {n,} 表示重复n次或更多次
console.log(/^a{3,}$/.test(''))//false
console.log(/^a{3,}$/.test('aaa'))//true
console.log(/^a{3,}$/.test('aaaa'))//true
console.log(/^a{3,}$/.test('aabaa'))//false
console.log(/^a{3,}$/.test('baaaab'))//false
console.log('--------')
// {n,m} 表示重复n到m次,在{n,m}这个表达式中不能出现空格
console.log(/^a{3,6}$/.test(''))//false
console.log(/^a{3,6}$/.test('aaa'))//true
console.log(/^a{3,6}$/.test('aaaaaaa'))//false
console.log(/^a{3,6}$/.test('aabaa'))//false
console.log(/^a{3,6}$/.test('baaaab'))//false
</script>
字符类
(1) [ ] 匹配字符集合 —— 后面的字符串只要包含 abc 中任意一个字符,都返回 true 。
(2) [ ] 里面加上 - 连字符——使用连字符 - 表示一个范围,(1)的简写形式
<script>
// (1) [ ] 匹配字符集合---只要包含[]中任意一个字符即为true
console.log(/[abc]/.test('abc'))//true
console.log(/[abc]/.test('andy'))//true
console.log(/[abc]/.test('bilck'))//true
console.log(/[abc]/.test('cut'))//true
console.log(/[abc]/.test('drive'))//false
// 若加上精确匹配^$,则[]有且只能出现其中一个才为真
console.log(/^[abc]$/.test('abc'))//false
console.log(/^[abc]$/.test('a'))//true
console.log('-----------')
// (2)[ ] 里面加上 - 连字符---使用连字符 - 表示一个范围,算是(1)的简写
console.log(/[a-c]/.test('abc'))//true,[a-c]即表示abc
console.log(/[a-c]/.test('a'))//true,任有其中一个即为真
//[]里面加上^表示取反
console.log(/[^a-z]/.text('a'))//false
console.log(/[^a-z]/.text('A'))//true
// 若加上精确匹配^$,只能取其中一个才为真
console.log(/^[a-c]$/.test('abc'))//false
console.log(/^[a-c]$/.test('a'))//true
console.log('-----------')
console.log(/[a-zA-Z0-9-_]/.test('--aaZZ'))//true
// 表示测试数据中出现的是小写字母a-z大写字母A-Z数字0-9以及-和_即可返回true不限个数和出现次数
console.log(/^[a-zA-Z0-9-_]$/.test('-'))//true
console.log(/^[a-zA-Z0-9-_]$/.test('--'))//true
// 添加上精确匹配表示测试数据中有且只能出现小写字母a-z大写字母A-Z数字0-9以及-和_中的一个返回true
console.log(/^[1-9][0-9]{4,}$/.test('10123456'))
// 表示第一个数只能是[1-9]中的一个,后面的数字在[0-9]中取,因为添加了{4,}即表明后面的数字需要是4位及4位以上才返回true
// 在这种组合表达式在{}只对它前一个生效,就如这里因为使用了精确匹配所以[1-9]只能取一个,但[0-9]{4,}中[0-9]在{4,}就解除了精确匹配只能取一个的限制,变为取4个及以上
</script>
(3)[ ] 里面加上 ^ 表示取反,如[ ^a-z]表示除小写字母以外的所有字符(不要带空格,这里由于格式问题只能加个空格)
(4) .匹配除换行符之外的任何单个字符
(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] |
修饰符
修饰符约束正则执行的某些细节行为,如是否区分大小写,是否支持多行匹配等
语法:
/表达式/修饰符
i 是单词ignore的缩写,表示在正则匹配时字母不区分大小写
console.log(/a/i.test('a'))//true
console.log(/A/i.test('a'))//true
g 是单词global的缩写,表示在正则匹配时匹配所有满足正则表达式的结果(一般只匹配到满足表达式的第一个结果)
replace 替换
语法:
字符串.replace(/正则表达式/,'替换的文本')
案例---过滤敏感词
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<p></p>
<script>
let textarea = document.querySelector('textarea')
let btn = document.querySelector('button')
let p = document.querySelector('p')
btn.addEventListener('click', function () {
p.innerHTML = textarea.value.replace(/激情|基情/g, '**')
// | 是或的意思,表示这两个词都能检索到并进行替换操作,//g,这里在正则表达式后面加上g表示匹配所有满足条件的结果
})
</script>