Web APIs笔记07——正则表达式

visionchyw

已于 2022-07-27 09:31:50 修改

阅读量107

点赞数 1

分类专栏： JavaScript 文章标签：正则表达式前端

于 2022-07-26 14:56:18 首次发布

本文链接：https://blog.csdn.net/visionchyw/article/details/125908320

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

正则表达式

介绍

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象
通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。
正则表达式在 JavaScript中的使用场景：
➢例如验证表单:用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文**(匹配)**
➢比如用户名: /^[a-z0-9_-]{3,16}$/
➢过滤掉页面内容中的一些敏感词**(替换)，或从字符串中获取我们想要的特定部分(提取)**等。

语法

定义正则表达式语法

语法: let变量名= /表达式/
其中 / / 是正则表达式字面量
比如：let reg = /前端/

判断是否有符合规则的字符串

test() 方法用来查看正则表达式与指定的字符串是否匹配
语法：regObj.test(被检测的字符串)
比如：

<script>
      let str='IT培训,前端开发培训,web前端培训,，软件测试培训，产品经理培训'
      let reg=/前端/
      let re = reg.test(str)
      console.log(re) // true
</script>

如果正则表达式与指定的字符串匹配，返回true，否则false

检索（查找）符合规则的字符串

exec() 方法在一个指定字符串中执行一个搜索匹配
语法：regObj.exec(被检测字符串)
比如：

<script>
      let str='IT培训,前端开发培训,web前端培训,软件测试培训，产品经理培训'
      let reg = /前端/
      let re = reg.exec(str)
      console.log(re) //返回的是个数组
</script>

如果匹配成功，exec() 方法返回一个数组，否则返回null

元字符

普通字符：大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
也就是说普通字符只能够匹配字符串中与它们相同的字符。
元字符(特殊字符）：是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
➢比如，规定用户只能输入英文26个英文字母,普通字符的话abcdefghijklm…
➢但是换成元字符写法: [a-z]

边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）

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

边界符	说明
^	表示匹配行首的文本(以谁开始)
$	表示匹配行尾的文本(以谁结束)

如果 ^ 和 $ 在一起，表示必须是精确匹配。
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

<script>
      console.log(/哈/.test('哈')) // true
      console.log(/二哈/.test('二哈')) // true
      console.log(/二哈/.test('很二哈哈')) // true
      
      //^开头
      console.log(/^二哈/.test('很二哈哈')) // false 
      console.log(/^二哈/.test('二哈很傻')) // true

      //$结尾
      console.log(/^二哈$/.test('二哈很傻')) // false
      console.log(/^二哈$/.test('二哈二哈')) // false
      console.log(/^二哈$/.test('二哈')) // true
</script>

量词（表示重复次数）

量词用来设定某个模式出现的次数

量词	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一-次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

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

<script>
      // * 表示重复0次或者更多次
      console.log(/^哈*$/.test('')) // true
      console.log(/^哈*$/.test('哈')) // true
      console.log(/^哈*$/.test( '哈哈哈')) // true

      // +表示重复1次或者更多次
      console.1og(/^哈+$/.test('')) // false
      console.log(/^哈+$/.test('哈')) // true
      console.log(/^哈+$/.test( '哈哈哈')) // true

      // ?表示重复0次或者1次 0||1
      console.log('------')
      console.log(/^哈?$/.test('')) // true
      console.log(/^哈?$/.test('哈')) // true
      console.log(/^哈?$/.test('哈哈哈')) // fasle
</script>

<script>
      console.1og(/^哈{2}$/.test('')) // false
      console.log(/^哈{2}$/.test('哈')) // false
      console.log(/^哈{2}$/.test('哈哈')) // true
      console.log(/^哈{2}$/.test( '哈哈哈')) // false 
</script>

<script>
      // {n,}是>=n的意思
      console.log(/^哈{2,}$/ .test('')) // false
      console.log(/^哈{2,}$/ .test('哈')) // false
      console.1og(/^哈{2,}$/ .test('哈哈')) // true
      console.1og(/^哈{2,}$/ .test('哈哈哈')) // true
</script>

<script>
      // {n,m}是次数>= n<= m的意思注意，逗号左右千万不要有空格
      console. log(/^哈{2,4}$/.test('')) // false
      console.log(/^哈{2,4}$/.test('哈')) // false
      console.log(/^哈{2,4}$/.test('哈哈')) // true 
      console.log(/^哈{2,4}$/.test('哈哈哈')) // true
      console. log(/^哈{2,4}$/.test('哈哈哈哈')) // true 
      console. log(/^哈{2,4}$/.test('哈哈哈哈哈')) // false
</script>

字符类（比如 \d 表示 0~9）

[]匹配字符集合：后面的字符串只要包含 abc 中任意一个字符，都返回 true 。

<script>
      //只要中括号里面的任意字符出现都返回为true
      console.log(/[abc]/.test('andy')) // true
      console.log(/[abc]/.test('baby')) // true 
      console.log(/[abc]/.test('cry')) // true
      console.log(/[abc]/.test('die')) // false
</script>

[]里面加上 - 连字符：使用连字符 - 表示一个范围

<script>
      console. log(/^[a-z]$/.test('c')) // true 
</script>

比如：
➢[a-z] 表示a到z 26个英文字母都可以
➢[a-zA-Z] 表示大小写都可以
➢[0-9] 表示0~9的数字都可以
腾讯QQ号(腾讯QQ号从10000开始): ^[1-9][0-9]{4,}$
[] 里面加上 ^ 取反符号
比如：
➢[^a-z]匹配除了小写字母以外的字符
➢注意要写到中括号里面
. 匹配除换行符之外的任何单个字符
预定义：指的是某些常见模式的简写方式。

预定类	说明
\d	匹配0-9之间的任一数字，相当于[0-9]
\D	匹配所有0-9以外的字符，相当于[^0-9]
/w	匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_ ]
/W	除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_ ]
/s	匹配空格(包括换行符、制表符、空格符等)，相等于[ \t\r\n\vf]
/S	匹配非空格的字符，相当于[^ \tlr\n\w\f]

日期格式: ^\d{4}-\d{1,2}-\d{1,2}

修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
语法：/表达式/修饰符
i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
g 是单词 global 的缩写，匹配所有满足正则表达式的结果

<script>
     console.log(/a/i.test('a')) // true
     console.log(/a/i.test('A')) // true 
</script>

替换 replace 替换
语法：字符串.replace(/正则表达式/，'替换的文本')

<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, '**')

            // div.innerHTML = textarea.value
        })
    </script>