Web APIs - 06

正则表达式

正则表达式是一种字符串匹配的规则

使用场景:

  • 例如验证表单:手机号表单要求用户只能输入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>

元字符

  • 是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能。
  • 比如,规定用户只能输入英文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>

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

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

相关文章

手把手教你绘制自定义控件

主要是注意两点,一点是在控件构造函数中设置一些属性,另一点是重写OnPaint方法,参考代码那如下: class SelfControl:Control{public SelfControl(){//this.SetStyle(ControlStyles.ResizeRedraw, true);//空间大小改变时,控件会重绘//this.SetStyle(ControlStyles.UserPai…

代码随想录算法训练营第三十四天 860.柠檬水找零 、 406.根据身高重建队列、452. 用最少数量的箭引爆气球

代码随想录算法训练营第三十四天 | 860.柠檬水找零 、 406.根据身高重建队列、452. 用最少数量的箭引爆气球 860.柠檬水找零 题目链接&#xff1a;860. 柠檬水找零 - 力扣&#xff08;LeetCode&#xff09; class Solution {public boolean lemonadeChange(int[] bills) {//…

TOP100 图论

3.207. 课程表 你这个学期必须选修 numCourses 门课程&#xff0c;记为 0 到 numCourses - 1 。 在选修某些课程之前需要一些先修课程。 先修课程按数组 prerequisites 给出&#xff0c;其中 prerequisites[i] [ai, bi] &#xff0c;表示如果要学习课程 ai 则 必须 先学习课…

el-form validator的校验提示遮盖下边的内容

问题&#xff1a;表单的validator校验&#xff0c;无法自动撑起tip提示的高度&#xff0c;导致遮盖了下边内容 解决方式&#xff1a;将tip提示的样式的定位设置为遵循正常的文档流对象&#xff0c;实现自适应高度。 .el-form-item .el-form-item__content .el-form-item__err…

探索ls命令中的通配符匹配

在Linux系统中&#xff0c;ls命令是一个常用的文件列表显示工具。除了基本的文件显示功能外&#xff0c;ls还支持通配符匹配&#xff0c;通过使用通配符&#xff0c;用户可以更灵活地过滤和显示文件。本篇博客将介绍ls命令中的通配符&#xff0c;包括问号&#xff08;?&#x…

数据库MySQL中出现乱码和表格不对齐怎么解决

MySQL中出现乱码问题及解决办法&#xff1a; 情况类似&#xff1a; 首先进入到数据库中&#xff0c;命令&#xff1a;mysql -h localhost -uroot -p或者mysql -uroot -p;进入数据库后选择一个你的数据库查看表中的中文是否乱码 以上是数据库中表格出现乱码情况&#xff0c;原…

Cesium 问题——加载 gltf 格式的模型之后太小,如何让相机视角拉近

文章目录 问题分析问题 刚加载的模型太小,如何拉近视角放大 分析 在这里有两种方式进行拉近视角, 一种是点击复位进行视角拉近一种是刚加载就直接拉近视角// 模型三加载 this.damModel = new Cesium.Entity({name: "gltf模型",position:</

Redis:常用数据类型及其应用场景

Redis中常见的数据类型有五种&#xff1a;String&#xff08;字符串&#xff09;&#xff0c;Hash&#xff08;哈希&#xff09;&#xff0c;List&#xff08;列表&#xff09;&#xff0c;Set&#xff08;集合&#xff09;、Zset&#xff08;有序集合&#xff09;。下面我来分…

Java 基于 SpringBoot+Vue 的高校招生系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

[计算机网络]---Http协议

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 本期学习&#xf…

C++智能指针的知识!

个人主页&#xff1a;PingdiGuo_guo 收录专栏&#xff1a;C干货专栏 大家好呀&#xff0c;我是PingdiGuo_guo&#xff0c;今天我们来学习一下智能指针。 文章目录 1.智能指针的概念 2.智能指针的思想 3.智能指针的作用 3.1 自动内存管理 3.2 共享所有权 3.3 避免悬挂指针…

【DRAM存储器二十】DDR3介绍-主要功能之ODT

👉个人主页:highman110 👉作者简介:一名硬件工程师,持续学习,不断记录,保持思考,输出干货内容 参考资料:《镁光DDR3数据手册》 、《JESD79-3E》 目录 DDR3 ODT

【多线程】线程的概念与创建

多线程 1. 认识线程&#xff08;Thread&#xff09;线程是什么为啥要有线程进程和线程的区别Java 的线程 和 操作系统线程 的关系 2.第⼀个多线程程序3.创建线程⽅法1 继承 Thread 类⽅法2 实现 Runnable 接⼝方法3 匿名内部类创建 Thread ⼦类对象方法4 匿名内部类创建 Runnab…

01_basicLinux内核模块

环境 rootT:/media/sf_D_DRIVE/kmodule/01_basic# cat /etc/os-release PRETTY_NAME"Ubuntu 22.04.1 LTS" NAME"Ubuntu" VERSION_ID"22.04" VERSION"22.04.1 LTS (Jammy Jellyfish)" VERSION_CODENAMEjammy IDubuntu ID_LIKEdebian HO…

JavaScript:面向对象编程

文章目录 对象&#xff08;Objects&#xff09;构造函数&#xff08;Constructor functions&#xff09;原型&#xff08;Prototypes&#xff09;原型链&#xff08;Prototype chain&#xff09;类&#xff08;Classes&#xff09;继承&#xff08;Inheritance&#xff09; Jav…

linux 中date 命令的用法

在Linux系统中&#xff0c;date命令用于显示或设置系统的日期和时间。date命令可以显示当前日期时间、设置系统时间、格式化日期时间等。以下是date命令的一些常用用法&#xff1a; 显示当前日期时间 date这会显示当前系统时间和日期。 显示特定格式的日期时间 date "…

python-自动化篇-办公-批量新建文件夹并保存日志信息

文章目录 说明代码效果 说明 因为业务需要&#xff0c;每天都需要按当天的日期创建很多新文件夹。把这种重复又繁重的操作交给Python来做&#xff0c;一直是我的目标。先说下要求&#xff1a; 默认在桌面新建文件夹。文件夹命名方式&#xff0c;“月.日-1”&#xff0c;比如7…

transformer 最简单学习1 输入层embeddings layer

词向量的生成可以通过嵌入层&#xff08;Embedding Layer&#xff09;来完成。嵌入层是神经网络中的一种常用层&#xff0c;用于将离散的词索引转换为密集的词向量。以下是一个典型的步骤&#xff1a; 建立词表&#xff1a;首先&#xff0c;需要从训练数据中收集所有的词汇&…

Instagram 账号被封如何申诉?ins账号解封经验分享

不知道各位在玩转海外社媒平台时有没有遇到过Instagram账号异常的情况&#xff0c;比如会出现账号受限、帖子发不出去、账号被封号等情况?Instagram账号如果被封不用马上弃用&#xff0c;我们可以先尝试一下申诉&#xff0c;看看能不能把账号解封。所以今天将会出一篇Instagra…

开工大吉!秀一下我们假期の战绩

开工大吉&#xff0c;新年新气象 首先祝大家开工大吉&#xff0c;新年新气象。 祝我的粉丝股东们都能&#xff1a;顺利上岸&#xff0c;升职加薪&#xff0c;日进斗金&#xff01; 开工就要冲冲冲&#xff01; 春节假期我是好好放松了&#xff0c;在努力克制自己不要像之前…