【JS】Chapter11-正则阶段案例

站在巨人的肩膀上

黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

(十一)正则&阶段案例

1. 正则表达式

1.1 介绍

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

1.2 语法

JavaScript 中定义正则表达式的语法有两种,我们先学习其中比较简单的方法:

  1. 定义正则表达式语法:

    const 变量名 = /表达式/
    
    • 其中 / / 是正则表达式字面量
    • 比如:
      const reg = /前端/
      
  2. 判断是否有符合规则的字符串:

    • test() 方法用来查看正则表达式与指定的字符串是否匹配
    • 语法:
      regObj.test
      
    • 比如:
      // 要检测的字符串
      const str = 'IT培训,前端开发培训,IT培训课程,web前端培训,Java培训,人工智能培训'
      // 1. 定义正则表达式,检测规则
      const reg = /前端/
      // 2. 检测方法
      console.log(reg.test(str))  // true
      
    • 如果正则表达式与指定的字符串匹配,返回true,否则false
  3. 检索(查找)符合规则的字符串:

    • exec() 方法在一个指定字符串中执行一个搜索匹配
    • 语法:
      regObj.exec(被检测字符串)
      
    • 比如:
      // 要检测的字符串
      const str = 'IT培训,前端开发培训,IT培训课程,web前端培训,Java培训,人工智能培训'
      // 1. 定义正则表达式,检测规则
      const reg = /前端/
      // 2. 检测方法
      console.log(reg.exec(str))  // 返回的是数组
      // ['前端', index: 5, input: 'IT培训,前端开发培训,IT培训课程,web前端培训,Java培训,人工智能培训', groups: undefined]
      
    • 如果匹配成功,exec()方法返回一个数组,否则返回null

1.3 元字符

  • 普通字符:
    • 大多数的字符仅能够描述它们本身,这些字符称作普通字符,例如所有的字母和数字。
    • 也就是说普通字符只能够匹配字符串中与它们相同的字符。
  • 元字符(特殊字符)
    • 是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能。
    • 比如,规定用户只能输入英文26个英文字母,普通字符的话 abcdefghijklm…
    • 但是换成元字符写法: [a-z]
  • 参考文档:
    • MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
    • 正则测试工具: http://tool.oschina.net/regex
  • 为了方便记忆和学习,我们对众多的元字符进行了分类:
    • 边界符(表示位置,开头和结尾,必须用什么开头,用什么结尾)
    • 量词(表示重复次数)
    • 字符类(比如 \d 表示 0~9)
1.3.1 边界符
  • 正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符

    边界符说明
    ^表示匹配行首的文本(以谁开始)
    $表示匹配行尾的文本(以谁结束)
  • 如果 ^ 和 $ 在一起,表示必须是精确匹配

  • 例子:

    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
    
1.3.2 量词
  • 量词用来设定某个模式出现的次数。

    量词说明
    *重复零次或更多次
    +重复一次或更多次
    ?重复零次或一次
    {n}重复n次
    {n,}重复n次或更多次
    {n,m}重复n到m次
  • 注意:逗号左右两侧千万不要出现空格。

  • 例子:

    // * 表示重复 0 次或者更多次
    console.log(/^哈*$/.test(''))           // true
    console.log(/^哈*$/.test('哈'))         // true
    console.log(/^哈*$/.test('哈哈哈'))     // true// + 表示重复 1 次或者更多次
    console.log(/^哈+$/.test(''))           // false
    console.log(/^哈+$/.test('哈'))         // true
    console.log(/^哈+$/.test('哈哈哈'))     // true// ? 表示重复 0 次或者 1 次
    console.log(/^哈?$/.test(''))           // true
    console.log(/^哈?$/.test('哈'))         // true
    console.log(/^哈?$/.test('哈哈哈'))     // falseconsole.log(/^哈{2}$/.test(''))         // false
    console.log(/^哈{2}$/.test('哈'))       // false
    console.log(/^哈{2}$/.test('哈哈'))     // true
    console.log(/^哈{2}$/.test('哈哈哈'))   // falseconsole.log(/^哈{2,}$/.test(''))        // false
    console.log(/^哈{2,}$/.test('哈'))      // false
    console.log(/^哈{2,}$/.test('哈哈'))    // true
    console.log(/^哈{2,}$/.test('哈哈哈'))  // trueconsole.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
    
1.3.3 字符类
1.3.3.1 [ ] 匹配字符集合
  1. 后面的字符串只要包含 abc 中任意一个字符,都返回 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][0-9]{4,}$  (腾讯QQ号从10000开始)
    
  1. 里面加上 ^ 取反符
  • 比如:
    • [^a-z] 匹配除了小写字母以外的字符
    • 注意要写到中括号里
1.3.3.2 . 匹配除换行符之外的任何单个字符

要求用户只能输入中文:/^[\u4e00-\u9fa5]{2,8}$/

1.3.3.3 预定义:指的是某些常见模式的简写方式
预定类说明
\d匹配0-9之间的任意数字,相当于[0-9]
\D匹配所有0-9以外的字符,相当于[^0-9]
\w匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_]
\W除所有字母、数字和下划线以外的字符,相当于[^A-Za-z0-9_]
\s匹配空格(包括换行符、制表符、空格符等),相当于[\t\r\n\v\f]
\S匹配非空格的字符,相当于[^\t\r\n\v\f]
  • 日期格式:^\d{4}-\d{1,2}-\d{1,2}

1.4 修饰符

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

  • 语法:

    /表达式/修饰符
    
  • i 是单词 ignore 的缩写,正则匹配时字母不区分大小写

  • g 是单词 global 的缩写,匹配所有满足正则表达式的结果

  • 例子:

    console.log(/a/i.test('a'))     // true
    console.log(/a/i.test('A'))     // true
    
  • 替换 replace 替换。语法:

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

2. 综合案例

  • 手机号验证:/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
  • 验证码验证:/^\d{6}$/
  • 密码验证:/^[a-zA-Z0-9-_]{6,20}$/

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

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

相关文章

21 移动网络的前世今生

1、移动网络的发展历程 发展过程就是:2G,3G,4G,5G的过程,用2G看txt,用3G看jpg,用4G看avi。 2、2G网络 手机本来是用来打电话的,不是用来上网的,所以原来在2G时代,上网使用的不是IP网络&#…

Ubuntu 安装最新版python

首先,打开终端并更新包列表: sudo apt update 然后,你需要安装一些依赖的软件包来构建Python源码。可以使用下面的命令来安装这些依赖: sudo apt install -y build-essential zlib1g-dev libncurses5-dev libgdbm-dev libnss3-…

关于视频封装格式和视频编码格式的简介

文章目录 简介视频封装格式(Video Container Format)视频编码格式(Video Compression Format)两者关系总结webm 格式简介webm视频编码格式webm音频编码格式webm总结 简介 视频封装格式(Video Container Format&#x…

直方图学习

直方图均衡化(Histogram Equalization)是一种用于增强图像对比度的图像处理技术,通过重新分配图像的像素值,使图像中的亮度级别更加均匀,以改善图像的视觉质量。下面是进行直方图均衡化的一般步骤: 计算原始…

sql学习

因为之前sql学的太烂了,想整理一下 一.什么是 SQL? SQL 是用于访问和处理数据库的标准的计算机语言。 SQL 指结构化查询语言SQL 使我们有能力访问数据库SQL 是一种 标准计算机语言 二.SQL 能做什么? SQL 面向数据库执行查询SQL 可从数据库…

2020 ICPC 澳门(G,J,I)详解

链接&#xff1a;The 2020 ICPC Asia Macau Regional Contest G Game on Sequence 题意 给定长度为 n n n 数组 a i a_i ai​&#xff0c;A与G博弈&#xff0c;G先手&#xff0c;给定初始位置 k k k&#xff0c;若当前在 i i i 点转移到 j j j&#xff0c;满足 i <…

【编程语言发展史】SQL的发展历史

目录 目录 SQL概述 SQL发展历史 SQL特点 SQL基本语句 SQL是结构化查询语言(Structure Query Language)的缩写&#xff0c;它是使用关系模型的数据库应用语言&#xff0c;由IBM在70年代开发出来&#xff0c;作为IBM关系数据库原型System R的原型关系语言&#xff0c;实现了…

uni-app使用echarts数据不更新

问题描述 uni-app使用echarts图表&#xff0c;接口请求数据更新后&#xff0c;图表不刷新。 解决方案 更新option前先调用clear() clear()&#xff1a;清空当前实例&#xff0c;会移除实例中所有的组件和图表。 initChart() {this.gaugeChart echarts.init(document.getE…

安卓常见设计模式5------桥接模式(Kotlin版)

1. W1 是什么&#xff0c;什么是桥接模式&#xff1f; 桥接模式是一种结构性模式。 桥接模式旨在将抽象与实现解耦&#xff0c;使它们可以独立地变化。可以这么理解&#xff0c;面向对象编程是单继承多实现的&#xff0c;如果我们有一个可扩展类&#xff0c;和多个相关的可扩展…

农业4.0中麦田的精确杂草检测:实现技术、方法和研究挑战的综述

Precision weed detection in wheat fields for agriculture 4.0: A survey of enabling technologies, methods, and research challenges 摘要1、引言2、相关工作3、麦田常见杂草的种类及分布特征3.1 天然麦田中常见的杂草3.2 杂草分布格局4、先进的麦田杂草检测技术4.1 光谱…

MySQL -- 用户管理

MySQL – 用户管理 文章目录 MySQL -- 用户管理一、用户1.用户信息2.创建用户3.删除用户4.远端登录MySQL5.修改用户密码6.数据库的权限 一、用户 1.用户信息 MySQL中的用户&#xff0c;都存储在系统数据库mysql的user表中&#xff1a; host&#xff1a; 表示这个用户可以从…

关于Alibaba Cloud Toolkit 下载配置以及后端自动部署

idea中File-Settings-Plugins 搜索Alibaba Cloud Toolkit点击下载&#xff0c;下载完成重启 1、点击 Tools-Alibaba Cloud-Deploy to Host 部署到主机 2、配置服务器ip、jar包启动命令、服务器jar存放位置 3、设置服务器ip用户名密码&#xff0c;点击测试连接情况 4、配置脚本…

微信支付测试用例设计怎么设计?

功能测试用例&#xff1a; 测试支付流程是否正常&#xff0c;包括选择支付方式&#xff0c;输入金额&#xff0c;确认支付&#xff0c;输入密码&#xff0c;支付成功等步骤 测试不同的支付方式&#xff0c;如微信零钱&#xff0c;银行卡&#xff0c;信用卡等 测试不同的支付场…

写给新用户-Mac软件指南篇:让你的Mac更好用

用了macOS也有小四年了&#xff0c;今天打算分享一下Mac上的常用软件&#xff0c;说不上精通&#xff0c;但也算是有一些心得体会。平时也会定期对软件做整理&#xff0c;所以有了这篇文章。如果能帮到刚刚接触macOS或正在寻觅软件的你&#xff0c;那当然再好不过了。 软件推荐…

《第三期(先导课)》之《Python 开发环境搭建》

文章目录 《第 1 节 初始Python》《第 6 节 pip包管理工具》 《第 1 节 初始Python》 。。。 《第 6 节 pip包管理工具》 pip是Python的包管理工具,用于安装、升级和管理Python包。 pip是Python标准库之外的一个第三方工具,可以从Python Package Index(PyPI)下载和安装各种P…

自动化实战 - 测试个人博客系统

前言 本篇使用Selenium3Junit5对个人博客进行自动化测试&#xff0c;如有错误&#xff0c;请在评论区指正&#xff0c;让我们一起交流&#xff0c;共同进步&#xff01; 文章目录 前言一.web自动化测试用例二.测试准备1.注册界面自动化测试测试过程中遇到的Bug: 2.登录界面自动…

Naocs配置中心配置映射List、Map、Map嵌套List等方式

一、配置映射List 1、常规逐个配置方式,示例如下: 代码: @Data @Configuration @ConfigurationProperties(prefix = "list-json-str") public class ConfListByJsonStr implements Serializable, InitializingBean {@ApiModelProperty("映射结果集")…

React 测试笔记 03 - 测试 Redux 中 Reducer 状态变化

React 测试笔记 03 - 测试 Redux 中 Reducer 状态变化 这段时间都在重构代码&#xff0c;把本来奇奇怪怪(singleton)的实现改成用 redux 的实现&#xff0c;然后就突然想到……即然 redux 的改变不涉及到 UI 的改变&#xff0c;那么是不是说可以单独写 redux 的测试……&#…

【遍历二叉树的非递归算法,二叉树的层次遍历】

文章目录 遍历二叉树的非递归算法二叉树的层次遍历 遍历二叉树的非递归算法 先序遍历序列建立二叉树的二叉链表 中序遍历非递归算法 二叉树中序遍历的非递归算法的关键&#xff1a;在中序遍历过某个结点的整个左子树后&#xff0c;如何找到该结点的根以及右子树。 基本思想&a…

Mabitys总结

一、ORM ORM(Object/Relation Mapping)&#xff0c;中文名称&#xff1a;对象/关系 映射。是一种解决数据库发展和面向对象编程语言发展不匹配问题而出现的技术。 使用JDBC技术时&#xff0c;手动实现ORM映射&#xff1a; 使用ORM时&#xff0c;自动关系映射&#xff1a; &am…