APIs -- DOM正则表达式

news2024/12/26 9:20:04

1. 介绍

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

2. 语法

分两步：

定义规则
查找

2.1 定义正则表达式语法

语法：const 变量名 = /表达式/

其中/ /是正则表达式字面量

//比如
const reg = /前端/

2.2 检测是否匹配

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

//比如:
// 要检测的字符串
const str = 'IT培训,前端开发培训,IT培训课程,web前端培训,Java培训,人工智能培训'
// 1.定义正则表达式，检测规则
const reg = /前端/
// 2.检测方法
console.log(reg.test(str)) // true

检索(查找)符合规则的字符串
exec()方法在一个指定字符串中执行一个搜索匹配
语法：regobj.exec(被检测字符串 )

//比如:
//要检测的字符串
const str ='IT培训,前端开发培训,IT培训课程,web前端培训,Java培训,人工智能培训'
// 1.定义正则表达式，检测规则
const reg = /前谈/
// 2.检测方法
console.log(reg.exec(str)) // 返网的是数组

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

3. 元字符

普通字符：
大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字也就是说普通字符只能够匹配字符串中与它们相同的字符。
元字符(特殊字符)：
是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能
1. 比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…
2. 但是换成元字符写法: [a-z]
参考文档：
1. MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
2. 正则测试工具: http://tool.oschina.net/regex

分类：

边界符（位置符）用来提示字符所处的位置，主要有两个字符 (表示位置，开头和结尾，必须用什么开头，用什么结尾)
- ^ 表示匹配行首的文本(以谁开始)
- $ 表示匹配行尾的文本(以谁结束)
- 如果^和$在一起，表示必须是精确匹配

// 元字符

     console.log(/哈/.test('哈')) // true
     console.log(/哈/.test('哈哈')) // true
     console.log(/哈/.test('二哈')) // true
     console.log('------------------')
     // 1. 边界符
     console.log(/^哈/.test('哈')) // true
     console.log(/^哈/.test('哈哈')) // true
     console.log(/^哈/.test('二哈')) // flase
     console.log(/^哈$/.test('哈')) // true  只有这种情况为true 否则全是false
     console.log(/^哈$/.test('哈哈')) // false
     console.log(/^哈$/.test('二哈')) // false

量词是用来设定某个模式出现的次数(表示重复次数)

逗号左右两侧千万不能有空格

  //  量词 * 类似 >=0 次
    console.log(/^哈$/.test('哈')) // true
    console.log(/^哈*$/.test('')) // true
    console.log(/^哈*$/.test('哈')) // true
    console.log(/^哈*$/.test('哈哈')) // true
    console.log(/^哈*$/.test('二哈很傻')) //  false
    console.log(/^哈*$/.test('哈很傻')) //  false
    console.log(/^哈*$/.test('哈很哈')) // false
    console.log('------------------')
    //  量词 + 类似 >=1 次
    console.log(/^哈$/.test('哈')) // true
    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('------------------')
    

    //  量词 ? 类似  0 || 1
    console.log(/^哈?$/.test('')) // true
    console.log(/^哈?$/.test('哈')) // true
    console.log(/^哈?$/.test('哈哈')) // true
    console.log(/^哈?$/.test('二哈很傻')) //  false
    console.log(/^哈?$/.test('哈很傻')) //  false
    console.log(/^哈?$/.test('哈很哈')) // false


    // 量词 {n} 写几，就必须出现几次
    console.log(/^哈{4}$/.test('哈'))  //  false
    console.log(/^哈{4}$/.test('哈哈')) //  false
    console.log(/^哈{4}$/.test('哈哈哈')) //  false
    console.log(/^哈{4}$/.test('哈哈哈哈'))// true
    console.log(/^哈{4}$/.test('哈哈哈哈哈')) // false
    console.log(/^哈{4}$/.test('哈哈哈哈哈哈')) // false
    console.log('------------------')
    
    // 量词 {n,}   >=n
    console.log(/^哈{4,}$/.test('哈')) // false
    console.log(/^哈{4,}$/.test('哈哈')) // false
    console.log(/^哈{4,}$/.test('哈哈哈')) // false
    console.log(/^哈{4,}$/.test('哈哈哈哈'))// true
    console.log(/^哈{4,}$/.test('哈哈哈哈哈'))// true
    console.log(/^哈{4,}$/.test('哈哈哈哈哈哈'))// true
    console.log('------------------')
    
    // 量词 {n,m}  逗号左右两侧千万不能有空格    >=n && <= m
    console.log(/^哈{4,6}$/.test('哈'))// false
    console.log(/^哈{4,6}$/.test('哈哈'))// false
    console.log(/^哈{4,6}$/.test('哈哈哈'))// false
    console.log(/^哈{4,6}$/.test('哈哈哈哈'))// true
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈'))// true
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈'))// true
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈'))// false
    console.log('------------------')
    
    // 字符类   [abc]  只选1个
    console.log(/^[abc]$/.test('a'))  // true
    console.log(/^[abc]$/.test('b'))  // true
    console.log(/^[abc]$/.test('c'))  // true
    console.log(/^[abc]$/.test('ab'))  // false
    console.log(/^[abc]{2}$/.test('ab'))  // true
    console.log('------------------')
    
    // 字符类   [a-z]  只选1个
    console.log(/^[A-Z]$/.test('p'))  // false
    console.log(/^[A-Z]$/.test('P'))  // true
    console.log(/^[0-9]$/.test(2))  // true
    console.log(/^[a-zA-Z0-9]$/.test(2))  // true
    console.log(/^[a-zA-Z0-9]$/.test('p'))  // true
    console.log(/^[a-zA-Z0-9]$/.test('P'))  // true
    console.log('------------------')

字符类 (比如\d 表示0~9)
(1) [] 匹配字符集合

后面的字符串只要包含 abc 中任意一个字符，都返回 true。

// 只要中括号里面的任意字符出现都返回为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

(2) [] 里面加上 - 连字符

使用连字符 - 表示一个范围

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

比如:
[a-z] 表示a 到 z 26个英文字母都可以

[a-zA-Z] 表示大小写都可以

[0-9] 表示0~9 的数字都可以

腾讯QQ号: ^[1-9][8-9]{4,}$ (腾讯QQ号从10000开始

注意：

[]里面加上 ^ 代表取反符号
eg：[^ a-z]匹配除了小写字母以外的字符
**.**匹配除换行符之外的任何单个字符

(3)预定义:指的是某些常见模式的简写方式

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

日期格式：^\d{4}-ld{1,2}-\d{1,2]$

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>
    const tx = document.querySelector('textarea')
    const btn = document.querySelector('button')
    const div = document.querySelector('div')
    btn.addEventListener('click', function () {
      // console.log(tx.value)
      div.innerHTML = tx.value.replace(/傻逼|牛逼/g, '**')
      tx.value = ''
    })
  </script>
</body>