【Web APIs】正则表达式

目录

1.正则表达式

2.正则表达式语法

3.元字符

3.1边界符 

3.2量词 

3.3字符类 

4.修饰符


1.正则表达式

正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式,在 JavaScript中,正则表达式也是对象。通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式。

使用场景:

  • 验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)
  • 过滤掉页面内容中的一些敏感词(替换)
  • 从字符串中获取我们想要的特定部分(提取) 

2.正则表达式语法

定义正则表达式语法:

①定义规则

  • let 变量名 = /表达式/   比如let reg = /前端/
  • 其中/ /是正则表达式字面量

②查找

🔷判断是否有符合规则的字符串

  • test()方法 用来查看正则表达式与指定字符串是否匹配
  • 语法:regObj.test(被检测的字符串)
  • 找到返回true,没找到返回false

🔷检索(查找)符合规则的字符串

  • exec()方法 在一个指定字符串中执行一个搜索匹配
  • 语法:regObj.exec(被检测的字符串)
  • 如果匹配成功,exec()方法返回一个数组,否则返回null

3.元字符

普通字符:

仅能够描述它们本身,例如所有的字母和数字。也就是说普通字符只能够匹配字符串中与它们相同的字符。

元字符(特殊字符)

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

比如,规定用户只能输入英文26个英文字母

  • 普通字符写法: abcdefghijklm…..
  • 元字符写法: [a-z]  

参考文档:

正则测试工具: http://tool.oschina.net/regex 

元字符分类:

  1. 边界符(表示位置,开头和结尾,必须用什么开头,用什么结尾)
  2. 量词 (表示重复次数)
  3. 字符类 (比如 \d  表示 0~9)

3.1边界符 

边界符:用来提示字符所处的位置,主要有两个字符

📖Note:

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

3.2量词 

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

📖Note:

  • 逗号左右两侧千万不要出现空格 

3.3字符类 

字符类:

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


 [ ]  里面加上 - 连字符

  • [a-z]  表示 a 到 z 26个英文字母都可以
  • [a-zA-Z]   表示大小写都可以
  • [0-9]  表示 0~9 的数字都可以

量词就近原则:只和最近的字符集合匹配

^[1-9][0-9]{4,}$   //其中的量词{4,}表示的是[0-9]出现的次数大于等于4

案例:表单验证

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.error {color: red;}.right {color: green;}</style></head>
<body><input type="text"><span></span><script>let input = document.querySelector('input')let span = input.nextElementSibling// 监听事件 失去焦点input.addEventListener('blur', function() {if(/^[a-zA-Z0-9-_]{6,16}$/.test(input.value)) {// 合法span.className = 'right'span.innerHTML = '输入正确'} else {// 非法// className会覆盖span.className = 'error'span.innerHTML = '只能输入6~16位的字符'}})</script>
</body>
</html>

③[ ]  里面加上 ^ 取反符号

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

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

预定义:指的是某些常见模式的简写方式

4.修饰符

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

语法:/表达式/修饰符

  • i 是单词 ignore 的缩写,正则匹配时字母不区分大小写
  • g 是单词 global 的缩写,匹配所有满足正则表达式的结果

replace 替换

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

案例:替换敏感词

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><textarea name="" id="" cols="30" rows="10"></textarea><button>发布</button><div></div><script>let btn = document.querySelector('button')let textarea = document.querySelector('textarea')let div = document.querySelector('div')// 按钮监听事件btn.addEventListener('click', function() {div.innerHTML = textarea.value.replace(/的/g, '*')// 过滤用户输入内容})</script>
</body>
</html>

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

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

相关文章

主流公链 - Solana

探索Solana区块链&#xff1a;下一代高性能区块链平台 1. Solana简介 Solana是一个高性能的区块链平台&#xff08;TPS能达到10W级别&#xff09;&#xff0c;旨在实现高吞吐量和低延迟的区块链交易处理。它采用了一系列创新技术&#xff0c;其中包括Proof of History (PoH)&a…

管理能力学习笔记三:管理者的时间管理法

时间管理三步法 1、对任务进行分类 2、估算任务时间 3、持续反思评估 对任务进行分类 分类方法&#xff1a;时间管理四象限 A类 B类 C类 D类 估算时间 需要预留休息时间和机动时间 持续反思评估 核对检查任务 自我提问 处理日常干扰的办法 对事情发出提问 对话内容进行…

华为云服务器租用价格_云服务器优惠活动_2024年新版报价

2024年华为云服务器租用价格表&#xff0c;云服务器优惠价格35元一年&#xff0c;配置为1核2G1M带宽HECS云服务器、L实例-2核2G3M配置46元1年、4核16G10M华为云服务器24元一个月、2核4G5M服务器158元一年&#xff0c;3年1010元、华为云香港服务器99元一年、增强型C7云服务器4核…

Unity 中的特殊文件

一 Resources 打包时&#xff0c;Resources下的所有资源都会被打进包。优化时确保Resources下的资源不重复 打包时Unity会对其加密压缩&#xff0c;打包后只读。可以用过Resourcrs.Load&#xff08;&#xff09;加载资源 二 StreamingAssets 打包后不会被压缩加密&#x…

P1036 [NOIP2002 普及组] 选数

思路&#xff1a;也算典型的dfs&#xff0c;题目就是要求从n个数中选择k个数&#xff0c;计算这k个数的和&#xff0c;看这个和是否是素数。我们知道在dfs时相当于是进行全排列&#xff0c;而结果要求的是组合后和的情况。根据排列和组合的关系&#xff0c;他们之间差K&#xf…

压测利器Webbench(附源码)

web压力测试工具webbench介绍 webbench最多可以模拟3万个并发连接去测试网站的负载能力&#xff0c;并发能力比较高&#xff0c;可以测试https及动态静态页面。 核心原理 父进程fork若干个子进程&#xff0c;每个子进程在用户要求时间或默认的时间内对目标web循环发出实际访问…

一眼就看明白的Rust 的 Json 字符串处理示例大全

一、已知结构的数据 在Rust中&#xff0c;你可以使用serde_json库来解析JSON字符串&#xff0c;包括位置结构&#xff08;即嵌套的JSON对象&#xff09;。首先&#xff0c;你需要确保在你的Cargo.toml文件中已经包含了serde和serde_json这两个依赖项。如果没有&#xff0c;你可…

C#打印50*30条码标签

示例图&#xff1a; 源码下载地址&#xff1a;https://download.csdn.net/download/tiegenZ/89035407?spm1001.2014.3001.5503

《相关学习资料汇总》

一、ubuntu18.04 安装mid360驱动 https://blog.csdn.net/qq_16775293/article/details/132408005 mid360驱动功能包部署_mid360存在哪儿-CSDN博客 Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO_ubuntu20.04 运行安装 lio-livox-CSDN博客 二、Livox mid 360 测试 FAST_LIO Ubun…

缓存技术简介

缓存是一种有效的性能优化技术&#xff0c;可以显著减少应用程序的响应时间和资源消耗。在.NET平台上&#xff0c;使用缓存可以通过多种方式实现&#xff0c;包括内置的缓存 API、第三方库以及分布式缓存解决方案。本文将介绍在.NET中如何使用缓存来提高性能的最佳实践。 1、内…

01背包和完全背包

文章目录 01背包1、01背包暴力解法&#xff0c;回溯问题2、动态规划解法3、01背包代码优化 完全背包1、完全背包模型 GitHub参考链接 01背包 1、01背包暴力解法&#xff0c;回溯问题 #include<bits/stdc.h> using namespace std; const int N 1e25; int w[N],v[N]; i…

ValueError: Cannot load file containing pickled data when allow_pickle=False

问题描述 遇到报错&#xff1a;ValueError: Cannot load file containing pickled data when allow_pickleFalse 解决方案 经过查阅有人说是与numpy的版本有关&#xff0c;但是还是不要轻易改变环境中的版本&#xff0c;不一定哪个地方就会报错。这里放个解决方案&#xff1a;…

C++生成动态连接库

文章目录 一、静态连接与动态连接二、 动态链接库&#xff08;DLL&#xff09;的创建三、dll库的使用四、 动态链接链接库工作原理五、extern "C" 一、静态连接与动态连接 静态库和动态库区别是库的加载时间不同。静态库&#xff1a;在链接阶段库将会与.o目标文件一起…

YOLO中的预训练模型是否需要

这张图片显示的是使用YOLOv5&#xff08;一种流行的物体检测算法&#xff09;进行训练时的一段命令行指令以及对应的注释&#xff0c;这些注释是中文的。这里列出的是两个不同情况下的命令行用法。 上面的命令&#xff1a; python train.py --data custom.yaml --weights yolo…

C++中的凸包:convexHull使用手册【c++重要方法】

最近工作中&#xff0c;用到了凸包&#xff0c;查了一些资料&#xff0c;差不多搞明白了&#xff0c;在这里做一个总结&#xff0c;希望可以帮助到你&#xff01; 什么时候需要它&#xff1f; 如果你想要把一群散落的点&#xff0c;包裹起来。而且希望这个包裹尽可能地紧凑&a…

Vuejs中的nextTick

问题&#xff1a; 当在父组件中onMounted函数中调用一些子组件的方法时&#xff0c;提示是undefined。 原因是mounted 不会承诺所有的子组件也都一起被挂载完成。 解决方法利用 nextTick 或者setTimeout onMounted(()>{//利用nextTick 延迟执行 同 setTimeout执行nextTic…

高性能服务系列【十一】主题匹配

主题匹配核心算法就是字符串匹配&#xff0c;在字符串匹配基础上&#xff0c;会加入分段匹配需求&#xff0c;类似URL的点分式字符串。这个算法在几个场景中十分普遍。 1、应用层的路由寻址。比如反向代理中&#xff0c;根据请求中的URL&#xff0c;转发到对应的后台服务。 2…

代码随想录刷题随记6-哈希表2,双指针

代码随想录刷题随记6-哈希表2&#xff0c;双指针 454.四数相加II leetcode链接 这道题目是四个独立的数组&#xff0c;只要找到A[i] B[j] C[k] D[l] 0就可以&#xff0c;不用考虑有重复的四个元素相加等于0的情况 思路可以把A和B相加做成map,C和D相加做成另一个map。这样…

MQTT.fx和MQTTX 链接ONENET物联网提示账户或者密码错误

参考MQTT.fx和MQTTX 链接ONENET物联网开发平台避坑细节干货。_mqttx和mqttfx-CSDN博客 在输入password和username后还是提示错误&#xff0c;是因为在使用token的时候&#xff0c;key填写错误&#xff0c;将设备的密钥填入key中