Web API 第六天

正则表达式

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

语法

定义正则表达式语法

// var 变量名 = /表达式/
var reg = /前端/

判断是否有符合规则的字符串：
- ```
regObj.text(str)
```
  - 用来查看正则表达式与指定的字符串是否匹配
  - 如果正则表达式与指定的字符串匹配，返回true，否则false
- ```
regObj.exec(str)
```
  - 在一个指定字符串中执行一个搜索匹配
  - 如果匹配成功，exec() 方法返回一个数组，否则返回null

元字符

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

边界符

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

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

^ 和 $ 在一起，表示精确匹配。

量词

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

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

注意{n,m}逗号后不能加空格

字符类

[ ] 匹配字符集合
- [ ] 里面加上-连字符
  - [a-z] 表示 a 到 z 26个英文字母都可以
  - [a-zA-Z] 表示大小写都可以
  - [0-9] 表示 0~9 的数字都可以
  - ```
  腾讯QQ号： ^[1,9][0,9]{4,0}$    (腾讯QQ号从10000开始)
```
- [ ] 里面加上 ^ 取反符号
  - [^a-z] 匹配除了小写字母以外的字符
  - 注意要写到中括号里面
- [ ] 里面加上 | 或符号
. 匹配除换行符之外的任何单个字符

预定义：指的是某些常见模式的简写方式。

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

修饰符

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

语法：
```
/表达式/修饰符

console.log(/a/i.test('a'))  // true
console.log(/a/i.test('A'))  // true
```
- i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
- g 是单词 global 的缩写，匹配所有满足正则表达式的结果

replace 替换

语法：

字符串.replace(/正则表达式/, '替换的文本')

const str = 'java是天下最好的编程语言， 学完JAVA工资很高'
const re = str.replace(/java/ig, 'javascript')  // javascript是天下最好的编程语言， 学完javascript工资很高

案例：验证用户名

/^[a-zA-Z0-9-_]{6,16}$/

<body>
  <input type="text">
  <span></span>
  <script>
    // 1. 准备正则
    const reg = /^[a-zA-Z0-9-_]{6,16}$/
    const input = document.querySelector('input')
    const span = input.nextElementSibling
    input.addEventListener('blur', function () {
     // console.log(reg.test(this.value))
      if (reg.test(this.value)) {
        span.innerHTML = '输入正确'
        span.className = 'right'
      } else {
        span.innerHTML = '请输入6~16位的英文数字下划线'
        span.className = 'error'
      }
    })
  </script>
</body>

案例：中文昵称

/^[\u4e00-\u9fa5]{2,8}$/

案例：过滤敏感词

综合案例：新用户注册登录

发送验证码模块

通过一个变量控制节流阀

flag = true
code.addEventListener('click', function () {
  if (flag) {
    flag = false
    let i = 5
    code.innerHTML = `0${i}秒后重新获取`
    let timerId = setInterval(function () {
      i--
      code.innerHTML = `0${i}秒后重新获取`
      if (i === 0) {
        clearInterval(timerId)
        code.innerHTML = `重新获取`
        flag = true
      }
    }, 1000)
  }
})

各个表单验证模块

// 2. 验证的是用户名
// 2.1 获取用户名表单
const username = document.querySelector('[name=username]')
// 2.2 使用change事件  值发生变化的时候
username.addEventListener('change', verifyName)
// 2.3 封装verifyName函数
function verifyName() {
  // console.log(11)
  const span = username.nextElementSibling
  // 2.4 定规则  用户名
  const reg = /^[a-zA-Z0-9-_]{6,10}$/
  if (!reg.test(username.value)) {
    // console.log(11)
    span.innerText = '输入不合法,请输入6~10位'
    return false
  }
  // 2.5 合法的 就清空span
  span.innerText = ''
  return true
}

勾选已经阅读同意模块
下一步验证全部模块

只要上面有一个input验证不通过就不同意提交

posted @ 2022-04-28 20:27 卷饼侠阅读(32) 评论(0) 收藏举报

刷新页面返回顶部

succodes