API-正则表达式

学习目标：

  • 掌握正则表达式

学习内容：

`

  1. 什么是正则表达式
  2. 语法
  3. 元字符
  4. 修饰符

什么是正则表达式：

正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。

通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

  • 使用场景

例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）

比如用户名： /^[a-zA-Z0-9-_]{6,16}$/

过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。

  • 小结
正则表达式用于匹配字符串中字符组合的模式
正则表达式的作用表单验证（匹配）；过滤敏感词（替换）；字符串中获取我们想要的部分（提取）

语法：

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

  • 1.定义正则表达式语法
const 变量名 = /表达式/

其中/ / 是正则表达式字面量。

比如：

const reg = /前端/
  • 2.判断是否有符合规则的字符串

test()方法 ：用来查看正则表达式与指定的字符串是否匹配。

regObj.test(被检测的字符串)

比如：

    const str = '要坚持努力学习前端，加油，加油'
    //正则表达式使用：
    //1. 定义规则
    const reg = /前端/
    //2.是否匹配
     console.log(reg.test(str)) //true

如果正则表达式与指定的字符串匹配，返回true，否则false。

  • 小结

正则表达式使用分为几步？

1.定义正则表达式
2.检测查找是否匹配
  • 检索（查找）符合规则的字符串

exec()方法：在一个指定字符串中执行一个搜索匹配。

regObj.exec(被检测的字符串)

比如：

    const str = '要坚持努力学习前端，加油，加油'
    //正则表达式使用：
    //1. 定义规则
    const reg = /前端/
    //2.是否匹配
    // console.log(reg.test(str)) //true
    //3.exec()
    console.log(reg.exec(str))  //返回数组

如果匹配成功，exec()方法返回一个数组，否则返回null。

  • 小结
正则表达式检测查找区别
test()方法用于判断是否有符合规则的字符串，返回的是布尔值。找到返回true，否则false。
exec()方法用于检索（查找）符合规则的字符串，找到返回数组，否则为null。
 <title>正则表达式的使用</title>
</head>

<body>
  <script>
    const str = '要坚持努力学习前端，加油，加油'
    //正则表达式使用：
    //1. 定义规则
    const reg = /前端/
    //2.是否匹配
    // console.log(reg.test(str)) //true
    //3.exec()
    console.log(reg.exec(str))  //返回数组
  </script>

</body>

元字符：

  • 普通字符

大多数的字符仅能够描述它们本身，这些字符称作普通字符。

例如所有的字母和数字。

也就是说普通字符只能够匹配字符串中与它们相同的字符。

  • 元字符（特殊字符）

是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。

比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…
但是换成元字符写法：[a-z]

在这里插入图片描述

  • 小结
元字符是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能
好处比如英文26个字母，我们使用元字符[a-z]简洁和灵活。
  • 元字符-边界符：
    表示位置，开头和结尾，必须用什么开头，用什么结尾。

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

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

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

 //1.边界符
    console.log(/^哈/.test('哈')) //true
    console.log(/^哈/.test('哈哈')) //true
    console.log(/^哈/.test('五哈')) //false
    console.log(/^哈$/.test('哈'))  //true  只有这个情况为true，否则全是false
    console.log(/^哈$/.test('哈哈'))//false
    console.log(/^哈$/.test('五哈'))//false
  • 元字符-量词：
    表示重复次数。

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

量词说明
*重复零次或更多次
+重复一次或更多次
？重复零次或一次
{n}重复n次
{n，}重复n次或更多次
{n,m}重复n到m次

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

  //量词 * 类似 >=0  次
    console.log(/^哈$/.test('哈'))//true
    console.log(/^哈*$/.test(''))//true
    console.log(/^哈*$/.test('哈'))//true
    console.log(/^哈*$/.test('哈哈'))//true
    console.log(/^哈*$/.test('五哈很傻'))//false
    console.log(/^哈*$/.test('哈很傻'))//false
    console.log(/^哈*$/.test('哈很哈'))//false

    console.log('--------------')
    //量词 + 类似 >=1 次
    console.log(/^哈$/.test('哈'))//true
    console.log(/^哈+$/.test(''))//false
    console.log(/^哈+$/.test('哈'))//true
    console.log(/^哈+$/.test('哈哈'))//true
    console.log(/^哈+$/.test('五哈很傻'))//false
    console.log(/^哈+$/.test('哈很傻'))//false
    console.log(/^哈+$/.test('哈很哈'))//false

    console.log('--------------')
    //量词 ？ 类似 0 || 1
    console.log(/^哈?$/.test(''))//true
    console.log(/^哈?$/.test('哈'))//true
    console.log(/^哈?$/.test('哈哈'))//false
    console.log(/^哈?$/.test('五哈很傻'))//false
    console.log(/^哈?$/.test('哈很傻'))//false
    console.log(/^哈?$/.test('哈很哈'))//false

    console.log('--------------')
    // 量词 {n} 写几，就必须出现几次
    console.log(/^哈{4}$/.test('哈')) //false
    console.log(/^哈{4}$/.test('哈哈')) //false
    console.log(/^哈{4}$/.test('哈哈哈')) //false
    console.log(/^哈{4}$/.test('哈哈哈哈')) //true
    console.log(/^哈{4}$/.test('哈哈哈哈哈')) //false
    console.log(/^哈{4}$/.test('哈哈哈哈哈哈')) //false

    console.log('--------------')
    // 量词 {n,}   >=n
    console.log(/^哈{4,}$/.test('哈')) //false
    console.log(/^哈{4,}$/.test('哈哈')) //false
    console.log(/^哈{4,}$/.test('哈哈哈')) //false
    console.log(/^哈{4,}$/.test('哈哈哈哈')) //true
    console.log(/^哈{4,}$/.test('哈哈哈哈哈')) //true 
    console.log(/^哈{4,}$/.test('哈哈哈哈哈哈')) //true

    console.log('--------------')
    // 量词 {n,m}  逗号左右两侧千万不能有空格    >=n && <= m
    console.log(/^哈{4,6}$/.test('哈')) //false
    console.log(/^哈{4,6}$/.test('哈哈')) //false
    console.log(/^哈{4,6}$/.test('哈哈哈')) //false
    console.log(/^哈{4,6}$/.test('哈哈哈哈')) //true 
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈')) //true 
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈')) //true 
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈'))  //false
  • 元字符-字符类：
    比如\d 表示0~9。

1.[ ] 匹配字符集合
后面的字符串只要包含abc中任意一个字符，都返回true。

 // 字符类   [abc]  只选1个
    console.log(/^[abc]$/.test('a'))  // true
    console.log(/^[abc]$/.test('b'))  // true
    console.log(/^[abc]$/.test('c'))  // true
    console.log(/^[abc]$/.test('ab'))  // false
    console.log(/^[abc]{2}$/.test('ab'))  // true

2.[ ] 里面加上 - 连字符：[A-Z]
使用连字符 - 表示一个范围。

console.log(/^[A-Z]$/.test('P')) // true

比如：

[a-z]表示a到z26个英文字母都可以
[a-zA-Z]表示大小写都可以
[0-9]表示0~9的数字都可以
// 字符类   [a-z]  只选1个
    console.log(/^[A-Z]$/.test('p'))  // false
    console.log(/^[A-Z]$/.test('P'))  // true
    console.log(/^[0-9]$/.test(2))  // true
    console.log(/^[a-zA-Z0-9]$/.test(2))  // true
    console.log(/^[a-zA-Z0-9]$/.test('p'))  // true
    console.log(/^[a-zA-Z0-9]$/.test('P'))  // true

3.[ ]里面加上^取反符号：[^a-z]

比如：

[^a-z]匹配除了小写字母以外的字符
注意要写到中括号里面-

4..匹配除换行符之外的任何单个字符。

  • 小结
字符类.(点)匹配除换行符之外的任何单个字符
[abc]匹配abc其中的任何单个字符
[a-z]匹配26个小写英文字母其中的任何单个字符
[^a-z]匹配除了26个小写英文字母之外的其他任何单个字符
  • 练习
 <title>练习-用户名验证案例</title>
  <style>
    span {
      display: inline-block;
      width: 250px;
      height: 30px;
      vertical-align: middle;
      line-height: 30px;
      padding-left: 15px;
    }

    .error {
      color: red;
      background: url(./images/error1.png) no-repeat left center;
    }

    .right {
      color: green;
      background: url(./images/right.png) no-repeat left center;
    }
  </style>
</head>

<body>
  <input type="text" name="" id="">
  <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>

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

预定类说明
\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]

修饰符：

  • 修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等。
/表达式/修饰符
i正则匹配时字母不区分大小写
g匹配所有满足正则表达式的结果
    console.log(/^java$/.test('java')) //true
    console.log(/^java$/i.test('JAVA')) //true
    console.log(/^java$/i.test('Java')) //true
  • 替换 replace替换
字符串.replace(/正则表达式/,'替换的文本')

 <title>修饰符</title>
</head>

<body>
  <script>
    console.log(/^java$/.test('java')) //true
    console.log(/^java$/i.test('JAVA')) //true
    console.log(/^java$/i.test('Java')) //true
    const str = 'java是一门编程语言,学习JAVA过程很难'
    // const re = str.replace(/java|JAVA/g, '前端')
    const re = str.replace(/java/ig, '前端')
    console.log(re)  // 前端是一门编程语言， 学习JAVA过程很难
  </script>

</body>
  • 练习
<title>练习-过滤敏感字</title>
</head>

<body>
  <textarea name="" id="" cols="30" rows="10"></textarea>
  <button>发布</button>
  <div></div>
  <script>
    const tx = document.querySelector('textarea')
    const btn = document.querySelector('button')
    const div = document.querySelector('div')
    btn.addEventListener('click', function () {
      // console.log(tx.value)
      div.innerHTML = tx.value.replace(/激情|基情/g, '**')
      tx.value = ''
    })
  </script>

</body>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

二叉树的链式访问 与 二叉树专题

二叉树的链式访问 与 二叉树专题

目录 二叉树的前、中、后序遍历求二叉树第K层节点的个数二叉树查找值为x的节点leetcode相同的树对称二叉树二叉树的前序遍历另一棵子树牛客 二叉树的遍历 二叉树的前、中、后序遍历 1.前序遍历&#xff1a;先访问根节点&#xff0c;再访问左子树&#xff0c;最后访问右子树 根…
阅读更多...
# windows 安装 mysql 显示 no packages found 解决方法

# windows 安装 mysql 显示 no packages found 解决方法

windows 安装 mysql 显示 no packages found 解决方法 一、问题描述&#xff1a; 安装 mysql 时&#xff0c;出现 no packages found 不能进行下一步安装了&#xff0c; 如下图&#xff1a; 二、解决方法&#xff1a; 1、路径问题&#xff0c;系统不能识别你的安装包路径&…
阅读更多...
MTK6769芯片性能参数_MT6769规格书_datasheet

MTK6769芯片性能参数_MT6769规格书_datasheet

联发科MT6769处理器采用了台积电12nm工艺。它具有8核CPU&#xff0c;采用2Cortex A75 2.0GHz 6Cortex A55 1.7GHz的构架。该处理器搭载了Mali-G52 MC2 GPU&#xff0c;运行速度高达820MHz&#xff0c;能够提供出色的图形处理性能。此外&#xff0c;MT6769还提供高达8GB的快速L…
阅读更多...
无法启动此程序，因为计算机中丢失 api-ms-win-crt-string-11-1-0.dl。尝试重新安装该程序以解决此问题。

无法启动此程序，因为计算机中丢失 api-ms-win-crt-string-11-1-0.dl。尝试重新安装该程序以解决此问题。

在windows server2012系统中利用WinSW部署jar包时&#xff0c;报错&#xff1a;无法启动此程序&#xff0c;因为计算机中丢失 api-ms-win-crt-string-11-1-0.dl。尝试重新安装该程序以解决此问题。 原因&#xff1a; 缺少Microsoft Visual C 2015运行库或者已安装低版本运行库…
阅读更多...
DevExpress WPF中文教程：Grid - 如何显示摘要（设计时）？

DevExpress WPF中文教程：Grid - 如何显示摘要（设计时）？

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…
阅读更多...
conda中创建环境并安装tensorflow1版本

conda中创建环境并安装tensorflow1版本

conda中创建环境并安装tensorflow1版本 一、背景二、命令三、验证一下 一、背景 最近需要使用tensorflow1版本的&#xff0c;发个记录&#xff01; 二、命令 conda create -n tf python3.6 #创建tensorflow虚拟环境 activate tf #激活环境&#xff0c;每次使用的时候都…
阅读更多...
机器学习与AI大数据的融合：开启智能新时代

机器学习与AI大数据的融合：开启智能新时代

在当今这个信息爆炸的时代&#xff0c;大数据和人工智能&#xff08;AI&#xff09;已经成为推动社会进步的强大引擎。作为AI核心技术之一的机器学习&#xff08;Machine Learning, ML&#xff09;&#xff0c;与大数据的深度融合正引领着一场前所未有的科技革命&#xff0c;不…
阅读更多...
太速科技-FMC209-基于FMC的4路125MAD输入、2路1GDA输出子卡

太速科技-FMC209-基于FMC的4路125MAD输入、2路1GDA输出子卡

FMC209-基于FMC的4路125MAD输入、2路1GDA输出子卡 一、板卡概述 本子卡基于FMC连接器实现4路125M采样率AD输出&#xff0c;两路1G采样率DA输出子卡&#xff0c;板卡默认由FMC连接器12V供电&#xff0c;支持外参考时钟&#xff0c;外输入时钟&#xff0c;外触发。 …
阅读更多...
PE文件学习

PE文件学习

一、介绍 PE文件&#xff0c;即Portable Executable文件&#xff0c;是一种标准的文件格式&#xff0c;主要用于微软的Windows操作系统上。这种格式被用来创建可执行程序&#xff08;如.exe文件&#xff09;、动态链接库&#xff08;.DLL文件&#xff09;、设备驱动&#xff0…
阅读更多...
汽车信息安全--数据安全：图像脱敏

汽车信息安全--数据安全：图像脱敏

General 随着车联网的发展&#xff0c;汽车越来越智能化&#xff0c;就像是一部“装着四个轮子的手机”。 有人说&#xff0c;智能手机就如同一部窃听器&#xff0c;无论你开机或者关机&#xff0c;它都会无时不刻地监听着用户的一举一动。 可想而知&#xff0c;智能车辆上…
阅读更多...
马工程刑法期末复习笔记重点2

马工程刑法期末复习笔记重点2

马工程刑法期末复习笔记重点2
阅读更多...
8人团队历时半年打造开源版GPT-4o，零延迟演示引爆全网！人人可免费使用！

8人团队历时半年打造开源版GPT-4o，零延迟演示引爆全网！人人可免费使用！

目录 01 Moshi 02 背后技术揭秘 GPT-4o可能要等到今年秋季才会公开。 然而&#xff0c;由法国8人团队开发的原生多模态Moshi&#xff0c;已经达到了接近GPT-4o的水平&#xff0c;现场演示几乎没有延迟&#xff0c;吸引了大量AI专家的关注。 令人惊讶的是&#xff0c;开源版的…
阅读更多...
rtsp地址 + 测试网站 + java(免环境、免插件、零编码转换http播放)

rtsp地址 + 测试网站 + java(免环境、免插件、零编码转换http播放)

目录 1、创建rtsp网站 2、测试rtsp网站 3、Java实现rtsp播放 ①maven添加依赖 ②访问http地址即可展示视频内容 1、创建rtsp网站 填写邮箱即可获得两个可用的rtsp网站&#xff08;每月可免费用2G&#xff09;&#xff1a; https://rtsp.stream/ 2、测试rtsp网站 测试网络…
阅读更多...
Springboot+Vue3开发学习笔记《2》

Springboot+Vue3开发学习笔记《2》

SpringbootVue3开发学习笔记《2》 博主正在学习SpringbootVue3开发&#xff0c;希望记录自己学习过程同时与广大网友共同学习讨论。 总共涉及两部分&#xff0c;第一部分为基础部分学习&#xff0c;第二部分为实战部分。 一、学习路径 1.1 基础部分 配置文件整合MyBatisBea…
阅读更多...
在docker配置Nginx环境配置

在docker配置Nginx环境配置

应用于商业模式集中&#xff0c;对于各种API的调用&#xff0c;对于我们想要的功能进行暴露&#xff0c;对于不用的进行拦截进行鉴权。用于后面的付费 开发环境 正式上线模式 一、常用命令 停止&#xff1a;docker stop Nginx重启&#xff1a;docker restart Nginx删除服务&a…
阅读更多...
【笔记】记录一次全新的Java项目部署过程

【笔记】记录一次全新的Java项目部署过程

记录一次全新的Java项目部署过程 环境&#xff1a;CentOS7 一、初始环境准备 yum install wget -y yum install vim -y yum install net-tools -y mkdir /data mkdir /data/html mkdir /data/backend一、安装JDK 17 安装JDK17 # 下载rpm wget https://download.oracle.com…
阅读更多...
@amap/amap-jsapi-loader 实现高德地图中添加多边围栏，并可编辑，编辑后获得围栏各个点的经纬度

@amap/amap-jsapi-loader 实现高德地图中添加多边围栏，并可编辑，编辑后获得围栏各个点的经纬度

先上一张效果图 看看是不是大家想要的效果&#xff5e; ❤️ 希望其中的小点能帮助大家&#xff0c;主要看怎么绘制在地图上的代码即可 1.第一步要加入项目package.json中或者直接yarn install它都可以 想必大家应该都会 "amap/amap-jsapi-loader": "0.0.7&qu…
阅读更多...
深圳合规新动向，这个关键环节要做好

深圳合规新动向，这个关键环节要做好

随着全球商业环境的日益复杂化&#xff0c;企业合规管理已成为维护公司稳健运营和市场竞争力的核心要素。特别是对于位于创新前沿的深圳市&#xff0c;有效的合规管理系统不仅是满足法律和监管要求的必须&#xff0c;更是企业可持续发展的关键。 深圳市在全国率先探索并成功实…
阅读更多...
卡尔曼滤波Q和R怎么调

卡尔曼滤波Q和R怎么调

卡尔曼滤波器是一种有效的估计算法&#xff0c;主要用于在存在噪声的环境中估计动态系统的状态。它通过结合预测模型&#xff08;系统动态&#xff09;和观测数据&#xff08;包括噪声&#xff09;来实现这一点。在卡尔曼滤波中&#xff0c;调整过程噪声协方差矩阵 ( Q ) 和测量…
阅读更多...
uboot run命令基本使用

uboot run命令基本使用

run 命令可以用于运行环境变量的中定义的命令,run bootcmd 可以运行bootcmd中启动命令 作用:可以运行我们自定义的环境变量 include/command.h common/cli.c /*** board_run_command() - Fallback function to execute a command** When no command line features are enabled …
阅读更多...
最新文章

Copyright @ 2022~2023