正则表达式

最新推荐文章于 2024-05-11 15:11:58 发布

橘颂_Wendy

最新推荐文章于 2024-05-11 15:11:58 发布

阅读量268

点赞数

分类专栏：前端开发学习笔记文章标签：正则表达式 javascript 前端

本文链接：https://blog.csdn.net/weixin_46121269/article/details/126624030

版权

正则表达式 JavaScript 数据验证字符串处理 DOM操作

关键词由CSDN通过智能技术生成

前端开发学习笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

正则表达式

JavaScript工作在浏览器一侧，主要实现三部分功能：

DOM网页特效
- 核心技术：DOM操作
数据验证
- 核心技术：DOM操作、正则表达式
异步请求
- 核心技术：DOM操作、XMLHttpReqeust对象

1、认识正则表达式

正则表达式，英文单词Regular Expression，简称RegExp

描述了一种快捷处理字符串的操作对象！从网页中获取的所有数据原始数据类型都是字符串类型，需要进行数据运算时才会转换成对应的格式！

对字符串的高效率的处理是非常有必要的！解决方案：正则表达式

什么是正则表达式？

正则表达式Regular Express是一种独立的技术，很多编程语言支持正则表达式技术！主要用于在编程语言中快捷的处理字符串数据【查询、匹配、替换…】

2、快速入门案例

网站应用中，几乎所有的网站都包含用户注册、登录相关的表单form处理功能；一个良好的数据验证的表单，能给网站带来非常好的用户体验！

需求：验证用户的账号必须是158/188开头手机号码

① 原始验证

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <label for="username">账号：</label>
    <input type="text" name="username" id="username">
    <p id="result">等待验证结果</p>
  </div>
  <script>
    function $(selector) {
      return document.querySelector(selector)
    }

    // 获取需要的标签
    var _input = $("#username") // 用户输入的账号
    var _result = $("#result")  // 展示验证结果

    _input.onkeyup = function () {
      // 声明了变量，默认是合法账号
      var flag = true
       
      // 账号长度 11位
      // 158/188开头
      // 每一位都是数字
      var _value = _input.value // 获取用户输入的数据

      // 验证长度
      if (_value.length === 11) {

        // 验证158/188开头
        if (_value.startsWith("158") || _value.startsWith("188")) {

          // 验证数字
          for (var i = 0; i < _value.length; i++) {

            if (_value.charCodeAt(i) >= 48 && _value.charCodeAt(i) <= 57) {
              flag = true
            } else {
              console.log("账号中包含了非法字符")
              // _result.innerText = "账号中包含了非法字符"
              flag = false
              break
            }
          }
        } else{
          // _result.innerText = "账号不是158/188开头"
          flag = false
        }
      } else {
        // _result.innerText = "账号长度不合法"
        flag = false
      }

      // 展示结果
      if(flag) {
        _result.innerText = "账号合法，可用"
      } else {
        _result.innerText = "账号不合法，长度11位、158|188开头"
      }
    }

  </script>
</body>

</html>

② 正则验证

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <label for="username">账号：</label>
    <input type="text" name="username" id="username">
    <p id="result">等待验证结果</p>
  </div>
  <script>
    function $(selector) {
      return document.querySelector(selector)
    }

    // 获取需要的标签
    var _input = $("#username") // 用户输入的账号
    var _result = $("#result")  // 展示验证结果

    _input.onkeyup = function () {
      // 声明一个正则表达式
      var reg = /^(158|188)\d{8}$/ig
      // 验证账号
      if(reg.test(_input.value)) {
        _result.innerText = "账号合法，可用"
      } else {
        _result.innerText = "账号11位、158|188开头."
      }
    }

  </script>
</body>

</html>

3、正则表达式语法

正则表达式，可以很方便的进行字符串的处理

① 正则表达式声明

JavaScript中正则表示的声明方式有两种：

// 创建一个正则表达式对象
var reg = /hello/      // 创建了一个匹配hello单词的正则表达式【推荐】

// 创建一个正则表达式对象
var reg = new RegExp("hello") // 创建了一个匹配hello单词的正则表达式

操作正则表达式的修饰符：

修饰符	描述
`i`	`ignorecase` 忽略大小写的意思
`g`	`global`全局匹配的意思，对目标字符串进行全部测试
`m`	`multiple rows`多行匹配

// 创建一个正则表达式对象
var reg = /hello/i      // 创建了一个匹配hello单词的正则表达式，忽略大小写

// 创建一个正则表达式对象
var reg = new RegExp("hello", "i") // 创建了一个匹配hello单词的正则表达式

② 常见描述符号

a. 任意单个字符匹配、字符串开头、字符串结尾匹配

符号	描述
`.`	表示匹配任意单个字符
`^`	表示匹配字符串开头位置
`$`	表示匹配字符串结束位置

// 符号：
// . ：匹配任意一个字符
// ^ ：匹配字符串开头位置
// $ ：匹配字符串结束位置
var url = "http://www.baidu.com"

var reg = /^http/i // 测试目标字符串是否以http开头
console.log( reg.test(url) )

var email = "damu@aliyun.com"
var reg2 = /@aliyun.com$/ig // 测试目标字符串是否@aliyun.com结尾
console.log( reg2.test(email) )

var intro = "helloworld"
var reg3 = /wo/ig   // 判断目标字符串中是否包含wo
console.log( reg3.test(intro) )

b. 匹配任意单个数字、小写字母、大写字母

符号	描述
`[0-9]`	匹配任意一个0~9的数字
`\d`	匹配任意一个0~9的数字，等价于`[0-9]`
`[a-z]`	匹配任意一个小写字母
`[A-Z]`	匹配任意一个大写字母
`[a-zA-Z]`	匹配任意一个字母
`[a-zA-Z0-9_]`	匹配任意一个数字、字母或者下划线
`\w`	匹配任意一个数字、字母或者下划线
`[abc]`	匹配任意一个字母`a`或者`b`或者`c`
`\D`	匹配任意一个非数字字符
`\W`	匹配任意一个非数字/字母/下划线的字符

// 匹配字符、数字、下划线
// [0-9]、\d：表示匹配任意单个数字
// [a-z]：表示匹配任意单个小写字母
// [A-Z]：表示匹配任意单个大写字母
// [a-zA-Z0-9_]、\w：表示匹配任意单个数字、下划线、字母
var strNo = "0abc"
var r1 = /^[0-9]/ig // 判断是否以数字开头
console.log( r1.test(strNo) )   // true

var name = "tom"
var r2 = /^[a-z]/    // 判断是否以（单个）小写字母开头
var r3 = /^[A-Z]/    // 判断是否以（单个）大写字母开头
console.log( r2.test(name) )  // true
console.log( r3.test(name) )  // false

var username = "_admin"
var r4 = /^\w/ // 判断是否以 下划线/数字/字母 开头
console.log( r4.test(username) )

var str = "administrator"
var r5 = /^[abc]/  // 判断是否a或者b或者c开头
console.log( r5.test(str) )

c. 正则表达式中的量词

符号	描述
`x*`	表示前面的字符`x`出现了0次或者多次
`x?`	表示前面的字符`x`出现了0次或者1次
`x+`	表示前面的字符`x`出现了1次或者多次
`x{m,n}`	表示前面的字符`x`出现了至少m次最多n次
`x{m,}`	表示前面的字符`x`出现了至少m次
`x{,n}`	表示前面的字符`x`之多出现了n次
`x{m}`	表示前面的字符`x`出现了m次

// 量词测试：某个字符出现的次数(量词)
// *
// ?
// +
// {}
var str = "hello world"

var r1 = /x*/   // 测试字符串中x出现了0次或者多次
console.log(r1.test(str)) // true

var r2 = /e?/  // 测试字符串中e出现了0次或者1次
console.log(r2.test(str)) // true

var r3 = /x+/  // 测试字符串中x出现了1次或者多次
console.log(r3.test(str))  // false

var r4 = /l{3,5}/ // 测试字符l连续出现了至少3次最多5次
console.log(r4.test(str))  //false

var r5 = /l{2,}/ // 测试字符l连续出现了至少2次以上
console.log(r5.test(str))

var r6 = /l{,3}/  // 测试字符l连续出现了最多3次
console.log(r6.test(str))  // false ?思考，这里为什么是false

var r7 = /l{3}/  // 测试字符l是否连续出现了3次
console.log(r7.test(str))

d. 正则表达式中的分组，使用圆括号|小括号，将一段字符作为一个整体进行匹配

符号	描述
`(abc)`	表示匹配字符串中是否出现了`abc`字符
`(com	cn)`

e. 正则表达式中的转义符号：字符串中可能出现了特殊符号

符号	描述
`\`	转义符号
`\[`	匹配一个字符`[`

// 转义符号
var fav = "['篮球', '游戏', '音乐']"

var reg = /^\[/    // 测试字符串是否以[符号开头
// \[：表示[符号只是一个普通字符，不是正则表达式中的特殊符号
console.log(reg.test(fav))

f.思考，进行用户注册时，如何验证用户的邮箱必须是

@aliyun.com

@aliyun.com.cn

@126.com

@126.com.cn

@163.com

@163.com.cn

提示：
var reg = /^\w+@(aliyun|126|163)\.(com|com\.cn)$/ig

4、正则表达式扩展

① 正则表达式的应用场景非常多，如编辑工具VSCode / Webstrom

② 字符串的操作函数match() / search() / replace() 也可以使用正则表达式进行替换

var s = "he22llo55 wor66ld99"

s.replace(/\d+/， "**") // "he**llo** wor**ld**"

③ 字符串替换：贪婪模式、懒惰模式(非贪婪模式)

贪婪模式：正则表示尽可能多的匹配目标数据
懒惰模式(非贪婪模式)：尽可能精确的匹配目标数据

// 原始数据
var s = "<div> <p>1111</p> <div>内容</div> <p>222</p> </div>"

// 1、贪婪模式：尽可能多的匹配数据
var r1 = /^<div>.*<\/div>/ig

s.match(r1) // "<div> <p>1111</p> <div>内容</div> <p>222</p> </div>"

// 2、非贪婪模式：也称为懒惰模式，尽可能精确的匹配数据
var r2 = /^<div>.*?<\/div>/ig

s.match(r2) // "<div> <p>1111</p> <div>内容</div>"

// 结论：任意正则表达式语句，匹配数据时添加上?结尾，都会从贪婪模式转换为非贪婪模式

④ 正则表达式高级应用：零宽断言

零宽断言：描述或者查询以xxx结尾或者以xxx开头的目标数据，不包含xxx字符

做一些高级数据查询时才可能遇到，尤其~正则表达式的使用，大部分都是搜索查询改造成自己需要的正则表达式即可！

5、扩展案例

使用正则表达式，处理密码强度等级

如果密码只使用了数字或者字母或者特殊符号，定义：弱
如果密码只使用了数字或者字母或者特殊符号里面的两种，定义：较强
如果密码只使用了数字或者字母或者特殊符号里面三种，定义：强

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #strong{
      margin: 10px;
      display: flex;
    }
    #strong span{
      display: inline-block;
      margin-right:5px;
      border-radius: 5px;
      width:50px;
      height:10px;
      border:solid 1px #000;
    }
  </style>
</head>
<body>
  <div>
    <label for="password">密码：
      <input type="text" name="password" id="password">
      <div id="strong">
        <span></span>
        <span></span>
        <span></span>
        <p></p>
      </div>
    </label>
  </div>

  <script>
    function $(selector) {
      return document.querySelectorAll(selector)
    }

    // 获取密码输入框
    var _password = $("#password")[0]
    // 获取span
    var _spans = $("span")
    var _p = $("p")[0]

    _password.onkeyup = function() {
      // 每次输入时，清空强度显示
      for(var i = 0; i < _spans.length; i++) {
        _spans[i].style.background = "white"
      }
      // 获取密码
      var _passVal = _password.value
      // 判断强度等级：count:默认0 1-弱  2-较强 3-强
      var count = 0 
      if(/[a-zA-Z]/.test(_passVal)) {
        count++
      }
      if(/\d/.test(_passVal)) {
        count++
      }
      if(/\W/.test(_passVal)) {
        count++
      }
      // 设置密码强度
      for(var i = 0; i < count; i++) {

        var bg = "white"
        switch(count) {
          case 1:
            bg = "red";
            _p.innerText = "弱密码"
            break;
          case 2:
            bg = "orange"
            _p.innerText = "较强密码"
            break;
          case 3:
            _p.innerText = "强密码"
            bg = "green"
        }

        _spans[i].style.background = bg
        _p.style.color = bg
      }
    }

  </script>
</body>
</html>