JavaScript Web APIs - 06 正则表达式

Web APIs - 06

文章目录

  • Web APIs - 06
    • 正则表达式
      • 正则基本使用
      • 元字符
        • 边界符
        • 量词
        • 范围
        • 字符类
    • 替换和修饰符
    • 正则插件
    • change 事件
    • 判断是否有类

目标:能够利用正则表达式完成小兔鲜注册页面的表单验证,具备常见的表单验证能力

  • 正则表达式
  • 综合案例
  • 阶段案例

正则表达式

正则表达式(Regular Expression)是一种字符串匹配的模式(规则)

使用场景:

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

正则基本使用

  1. 定义规则

    const reg =  /表达式/
    
    • 其中/ /是正则表达式字面量
    • 正则表达式也是对象
  2. 使用正则

    • test()方法 用来查看正则表达式与指定的字符串是否匹配
    • 如果正则表达式与指定的字符串匹配 ,返回true,否则false
<body><script>// 正则表达式的基本使用const str = 'web前端开发'// 1. 定义规则const reg = /web/// 2. 使用正则  test()console.log(reg.test(str))  // true  如果符合规则匹配上则返回trueconsole.log(reg.test('java开发'))  // false  如果不符合规则匹配上则返回 false</script>
</body>

元字符

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

边界符

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

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

量词

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

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

范围

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<body><script>// 元字符之范围  []  // 1. [abc] 匹配包含的单个字符, 多选1const reg1 = /^[abc]$/console.log(reg1.test('a'))  // trueconsole.log(reg1.test('b'))  // trueconsole.log(reg1.test('c'))  // trueconsole.log(reg1.test('d'))  // falseconsole.log(reg1.test('ab'))  // false// 2. [a-z] 连字符 单个const reg2 = /^[a-z]$/console.log(reg2.test('a'))  // trueconsole.log(reg2.test('p'))  // trueconsole.log(reg2.test('0'))  // falseconsole.log(reg2.test('A'))  // false// 想要包含小写字母,大写字母 ,数字const reg3 = /^[a-zA-Z0-9]$/console.log(reg3.test('B'))  // trueconsole.log(reg3.test('b'))  // trueconsole.log(reg3.test(9))  // trueconsole.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'))  // trueconsole.log(reg4.test('ABcd12'))  // trueconsole.log(reg4.test('ABcd12_'))  // true// 3. [^a-z] 取反符const reg5 = /^[^a-z]$/console.log(reg5.test('a'))  // false console.log(reg5.test('A'))  // trueconsole.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>

正则插件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

change 事件

给input注册 change 事件,值被修改并且失去焦点后触发

判断是否有类

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

元素.classList.contains() 看看有没有包含某个类,如果有则返回true,么有则返回false

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/115129.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker harbor私有仓库部署与管理

一、搭建本地私有仓库二、Harbor私有仓库部署与管理1、Harbor概述2、Harbor的特性3、Harbor的核心组件3.1 Proxy3.2 Registry3.3 Core services3.3.1 UI&#xff08;harbor-ui&#xff09;3.3.2 WebHook3.3.3 Token 服务 3.4 Database&#xff08;harbor-db&#xff09;3.5 Log…

C++ 学习系列 -- const 关键字

C 中引入了 const 关键字&#xff0c;被 const 关键字修饰的变量其值不能修改&#xff0c;是只读的。 一 const 变量的初始化与存储 1. const 变量初始化时就需要赋初值&#xff0c;否则无法编译通过 二 const 与指针 指针常量&#xff1a; 指针所指向的值不可改变&…

Python程序化交易接口批量获取数据源码

小编举例下面是一个简单的示例代码&#xff0c;展示如何使用Python的程序化交易接口批量获取数据&#xff0c;例如开发文档参考&#xff1a;MetaTradeAPI (metatradeapi) - Gitee.com 签名 int Init(); 功能 API 初始化 参数 无 返回值 授权成功的交易账户数量 返回值 &…

一百六十六、MySQL——systemctl stop mysqld无法停止MySQL8.0服务

一、目的 为了解决MySQL的中文乱码问题&#xff0c;需要对/etc/my.cnf文件进行参数配置。 而对/etc/my.cnf文件进行配置参数之前&#xff0c;需要先停止MySQL服务 二、错误命令语句示范 &#xff08;一&#xff09;错误的命令语句 # systemctl stop mysqld &#xff08;…

C++进阶之多态

多态 多态的概念多态的定义及实现1.多态的构成条件2.虚函数3.虚函数的重写4.虚函数重写的两个例外5.C11 override 和 final6.重载、覆盖(重写)、隐藏(重定义)的对比 抽象类1.概念2.接口继承和实现继承 多态的原理1.虚函数表2.多态的原理3.动态绑定与静态绑定 单继承和多继承关系…

SQL高阶语句

目录 1、概念 1.1、概述 1.2、常见的MySQL高阶语句的概念&#xff1a; 1.3、 SQL高阶语句的作用 2、常用查询 2.1、按关键字排序 2.1.1、概述和作用 2.1.2、 &#xff08;1&#xff09;语法 2.1.3、模板表&#xff1a;ky30 ​编辑2.1.4、分数按降序排列 2.1.5、ORDER…

Kubernetes技术--使用kubeadm搭建高可用的K8s集群(贴近实际环境)

1.高可用k8s集群架构(多master) 2.安装硬件要求 一台或多台机器,操作系统 CentOS7.x-86_x64 硬件配置:2GB或更多RAM,2个CPU或更多CPU,硬盘30GB或更多 注: 这里属于教学环境,所以使用三台虚拟机模拟实现。 3.部署规划 4.部署前准备 (1).关闭防火墙 systemctl stop fi…

《Go 语言第一课》课程学习笔记(十二)

函数 Go 函数与函数声明 在 Go 语言中&#xff0c;函数是唯一一种基于特定输入&#xff0c;实现特定任务并可返回任务执行结果的代码块&#xff08;Go 语言中的方法本质上也是函数&#xff09;。在 Go 中&#xff0c;我们定义一个函数的最常用方式就是使用函数声明。 第一部…

重新理解百度智能云:写在大模型开放后的24小时

在这些回答背后共同折射出的一个现实是——大模型不再是一个单选题&#xff0c;而更是一个综合题。在这个新的时代帆船上&#xff0c;产品、服务、安全、开放等全部都需要成为必需品&#xff0c;甚至是从企业的落地层面来看&#xff0c;这些更是刚需品。 作者| 皮爷 出品|产…

在Nodejs中使用JWT进行鉴权

什么是 JSON Web Token&#xff08;JWT&#xff09;&#xff1f; JSON Web Token&#xff08;JWT&#xff09;是一种用于在web上传递信息的标准&#xff0c;它以JSON格式表示信息&#xff0c;通常用于身份验证和授权。 JWT由三个部分组成&#xff1a;Header&#xff08;头部&…

软件测试Day4|软件测试理论02

目录 6. 测试用例基础6.1 测试用例的定义6.2 测试用例要素6.3 测试用例设计和编写的作用 7. 黑盒测试用例设计方法7.1 用例设计方法分类7.2 测试数据选择7.2.1 等价类划分&#xff08;1&#xff09;等价类划分原理&#xff08;2&#xff09;确定等价类的原则&#xff08;3&…

摆动序列【贪心算法】

摆动序列 如果连续数字之间的差严格地在正数和负数之间交替&#xff0c;则数字序列称为 摆动序列 。第一个差&#xff08;如果存在的话&#xff09;可能是正数或负数。仅有一个元素或者含两个不等元素的序列也视作摆动序列。 class Solution {public int wiggleMaxLength(int…

zabbix安装部署

前期准备&#xff1a;安装mysql数据库和nginx 一、下载zabbix rpm -Uvh https://repo.zabbix.com/zabbix/4.4/rhel/7/x86_64/zabbix-release-4.4-1.el7.noarch.rpm yum-config-manager --enable rhel-7-server-optional-rpms yum install epel-release numactl yum install…

Spring Cloud Gateway的快速使用

环境前置搭建Nacos&#xff1a;点击跳转 Spring Cloud Gateway Docs 新建gateway网关模块 pom.xml导入依赖 <!-- 网关 --> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifact…

Spring MVC 学习总结

学习目标 了解 Spring MVC 是什么&#xff0c;为什么要使用它或者说它能解决什么问题&#xff0c;其与 Spring 是什么关系。理解为什么配置 Spring MVC 的前端控制器的映射路径为 “/” 会导致静态资源访问不了&#xff0c;掌握怎么处理这个问题。掌握基于注解方式使用 Spring…

Zookeeper的使用

一、Zookeeper简介 分布式协调框架&#xff0c;小型的树形结构数据共享储存系统。 zookeeper的应用场景 集群管理 注册中心 配置中心 发布者将数据发布到ZooKeeper一系列节点上面&#xff0c;订阅者进行数据订阅&#xff0c;当数据有变化时&#xff0c;可及时得到数据的变…

算法通关村——从40个亿中产生一个不存在的整数

Titile: 海量数据场景下的热门算法题 从40个亿中产生一个不存在的整数 题目要求&#xff1a;给定一个输入文件&#xff0c;包含40亿个非负整数&#xff0c;请设计一个算法&#xff0c;产生一个不存在该文件中的整数&#xff0c;假设你有1GB的内存来完成这项任务。 进阶&…

MySQL 5种索引应用

文章目录 简介一、聚集索引二、唯一索引三、聚集索引和唯一索引对比四、非唯一&#xff08;普通&#xff09;索引五、全文索引六、组合索引七、索引验证总结 简介 在本篇文章中&#xff0c;我们将学习MySQL中5种不同类型的索引及其应用场景&#xff0c;以及它们的优缺点。 一…

基于YOLOv8分割模型实现垃圾识别

基于YOLOv8分割模型实现垃圾识别 本文首发于公众号【DeepDriving】&#xff0c;欢迎关注。 0. 引言 YOLOv8是Ultralytics开源的一个非常火的AI算法&#xff0c;目前支持目标检测、实例分割、姿态估计等任务。如果对YOLOv8的安装和使用还不了解的可以参考我之前写的这篇文章&am…

从C语言到C++_36(智能指针RAII)auto_ptr+unique_ptr+shared_ptr+weak_ptr

目录 1. 智能指针的引入_内存泄漏 1.1 内存泄漏 1.2 如何避免内存泄漏 2. RAII思想 2.1 RAII解决异常安全问题 2.2 智能指针原理 3. auto_ptr 3.1 auto_ptr模拟代码 4. unique_ptr 4.1 unique_ptr模拟代码 5. shared_ptr 5.1 shared_ptr模拟代码 5.2 循环引用 6.…