Web APIs - 06 - overfit.cn

正则表达式

正则表达式是一种字符串匹配的规则

使用场景：

例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)
过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等

正则基本使用

定义规则const reg = /表达式/- 其中/ /是正则表达式字面量- 正则表达式也是对象
使用正则- test()方法 用来查看正则表达式与指定的字符串是否匹配- 如果正则表达式与指定的字符串匹配，返回true，否则false

<body><script>// 正则表达式的基本使用const str ='web前端开发'// 1. 定义规则const reg =/web/// 2. 使用正则  test()
    console.log(reg.test(str))// true  如果符合规则匹配上则返回true
    console.log(reg.test('java开发'))// false  如果不符合规则匹配上则返回 false</script></body>

元字符

是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/

边界符

正则表达式中的边界符用来提示字符所处的位置，主要有两个字符

表示以谁开始

表示以谁结束

如果 ^ 和 $ 在一起，表示必须是精确匹配

<body><script>// 元字符之边界符// 1. 匹配开头的位置 ^const reg =/^web/
    console.log(reg.test('web前端'))// true
    console.log(reg.test('前端web'))// false
    console.log(reg.test('前端web学习'))// false
    console.log(reg.test('we'))// false// 2. 匹配结束的位置 $const reg1 =/web$/
    console.log(reg1.test('web前端'))//  false
    console.log(reg1.test('前端web'))// true
    console.log(reg1.test('前端web学习'))// false
    console.log(reg1.test('we'))// false  // 3. 精确匹配 ^ $const reg2 =/^web$/
    console.log(reg2.test('web前端'))//  false
    console.log(reg2.test('前端web'))// false
    console.log(reg2.test('前端web学习'))// false
    console.log(reg2.test('we'))// false 
    console.log(reg2.test('web'))// true
    console.log(reg2.test('webweb'))// flase </script></body>

量词

量词用来设定某个模式重复次数

注意：逗号左右两侧千万不要出现空格

<body><script>// 元字符之量词// 1. * 重复次数 >= 0 次const reg1 =/^w*$/
    console.log(reg1.test(''))// true
    console.log(reg1.test('w'))// true
    console.log(reg1.test('ww'))// true
    console.log('-----------------------')// 2. + 重复次数 >= 1 次const reg2 =/^w+$/
    console.log(reg2.test(''))// false
    console.log(reg2.test('w'))// true
    console.log(reg2.test('ww'))// true
    console.log('-----------------------')// 3. ? 重复次数  0 || 1 const reg3 =/^w?$/
    console.log(reg3.test(''))// true
    console.log(reg3.test('w'))// true
    console.log(reg3.test('ww'))// false
    console.log('-----------------------')// 4. {n} 重复 n 次const reg4 =/^w{3}$/
    console.log(reg4.test(''))// false
    console.log(reg4.test('w'))// flase
    console.log(reg4.test('ww'))// false
    console.log(reg4.test('www'))// true
    console.log(reg4.test('wwww'))// false
    console.log('-----------------------')// 5. {n,} 重复次数 >= n const reg5 =/^w{2,}$/
    console.log(reg5.test(''))// false
    console.log(reg5.test('w'))// false
    console.log(reg5.test('ww'))// true
    console.log(reg5.test('www'))// true
    console.log('-----------------------')// 6. {n,m}   n =< 重复次数 <= mconst reg6 =/^w{2,4}$/
    console.log(reg6.test('w'))// false
    console.log(reg6.test('ww'))// true
    console.log(reg6.test('www'))// true
    console.log(reg6.test('wwww'))// true
    console.log(reg6.test('wwwww'))// false// 7. 注意事项： 逗号两侧千万不要加空格否则会匹配失败</script>

范围

[ ]表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围

<body><script>// 元字符之范围  []  // 1. [abc] 匹配包含的单个字符， 多选1const reg1 =/^[abc]$/
    console.log(reg1.test('a'))// true
    console.log(reg1.test('b'))// true
    console.log(reg1.test('c'))// true
    console.log(reg1.test('d'))// false
    console.log(reg1.test('ab'))// false// 2. [a-z] 连字符 单个const reg2 =/^[a-z]$/
    console.log(reg2.test('a'))// true
    console.log(reg2.test('p'))// true
    console.log(reg2.test('0'))// false
    console.log(reg2.test('A'))// false// 想要包含小写字母，大写字母 ，数字const reg3 =/^[a-zA-Z0-9]$/
    console.log(reg3.test('B'))// true
    console.log(reg3.test('b'))// true
    console.log(reg3.test(9))// true
    console.log(reg3.test(','))// flase// 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位const reg4 =/^[a-zA-Z0-9_]{6,16}$/
    console.log(reg4.test('abcd1'))// false 
    console.log(reg4.test('abcd12'))// true
    console.log(reg4.test('ABcd12'))// true
    console.log(reg4.test('ABcd12_'))// true// 3. [^a-z] 取反符const reg5 =/^[^a-z]$/
    console.log(reg5.test('a'))// false 
    console.log(reg5.test('A'))// true
    console.log(reg5.test(8))// true</script></body>

替换和修饰符

replace 替换方法，可以完成字符的替换

<body><script>// 替换和修饰符const str ='欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'// 1. 替换  replace  需求：把前端替换为 web// 1.1 replace 返回值是替换完毕的字符串// const strEnd = str.replace(/前端/, 'web') 只能替换一个</script></body>

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
g 是单词 global 的缩写，匹配所有满足正则表达式的结果

<body><script>// 替换和修饰符const str ='欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'// 1. 替换  replace  需求：把前端替换为 web// 1.1 replace 返回值是替换完毕的字符串// const strEnd = str.replace(/前端/, 'web') 只能替换一个// 2. 修饰符 g 全部替换const strEnd = str.replace(/前端/g,'web')
    console.log(strEnd)</script></body>

标签：前端 javascript

本文转载自: https://blog.csdn.net/tuoluoo/article/details/136157828
版权归原作者 tuoluoo 所有，如有侵权，请联系我们删除。

Web APIs - 06

正则表达式

正则基本使用

元字符

边界符

量词

范围

替换和修饰符

发表评论

“Web APIs - 06”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航