[JS]正则表达式

news2024/11/26 3:22:21

介绍

正则表达式是定义匹配字符串的规则, 在JS中, 正则表达式也是对象, 通常用于查找或替换符合规则的文本

许多语言都支持正则表达式, 在前端中常见的场景就是表单验证和敏感词替换

语法

正则字面量 / /

const str = '好好学习,天天向上'
// 1.定义规则:  
const reg = /好/

// 2.匹配规则 (常用)
// 判断是否有符合规则的字符串, 返回布尔值
reg.test(str) // true

// 3.匹配规则
// 在指定字符串中搜索匹配, 成功返回数组, 失败返回null
reg.exec(str)

元字符

所谓元字符就是一些有特殊含义的字符, 可以极大的提高正则的灵活性, 为了方便学习, 根据作用不同, 元字符可以分为边界符, 量词和字符类

正则测试工具: 在线正则表达式测试

边界符

边界符用来规定字符串 以什么开头, 以什么结尾, 如果^ 和 $ 一起使用表示精确匹配

{{name}}: 占位符, 表示这里会以name实际的内容进行填充

/哈/.test('哈哈')   // true
/哈/.test('二哈')   // true
/^哈/.test('哈')    // true
/^哈/.test('哈哈')  // true
/^哈/.test('二哈')  // false
/^哈$/.test('哈哈') // false 精确匹配
/^哈$/.test('哈')   // true 精确匹配

量词

量词用来规定字符出现的次数

// *号 类似 >=0
/^哈*$/.test('哈') // true
/^哈*$/.test('哈哈') // true

// +号 类似 >=1
/^哈+$/.test('哈') // true
/^哈+$/.test('哈哈') // true

// ?号 类似 0||1
/^哈?$/.test('哈') // true
/^哈?$/.test('哈哈') // false

// {n}号 类似 固定次数
/^哈{2}$/.test('哈') // false
/^哈{2}$/.test('哈哈') // true

// {n,}号 类似 >=n
/^哈{2}$/.test('哈') // false
/^哈{2}$/.test('哈哈') // true

// {n,m}号 类似 >=n次&&<=m次
// 逗号两侧千万不要加空格
/^哈{2,4}$/.test('哈') // false
/^哈{2,4}$/.test('哈哈') // true

字符类

表示特殊含义的字符

// [ ] 多个选项选一个
/[abc]/.test('a')  // true
/[abc]/.test('c')  // true
/[abc]/.test('d')  // false
/[abc]/.test('adp')  // true
// 只选一个 (精确匹配)
/^[abc]$/.test('adp') // false 
// [ ]里面使用 - 连字符 
// 可选择的范围
/[a-zA-Z0-9]/.test('p') // true
// .匹配除了换行符之外的任何单个字符
/./.test('p') // true
// [ ]里面使用 ^ 取反符号 
/[^a-zA-Z]/.test('p')  // false
/[^a-zA-Z]/.test('哈') // true

修饰符

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

// i是 ignore 的缩写, 可以设置不区分大小写
/a/i.test('a') // true
/a/i.test('A') // true

// g是 global 的缩写, 可以设置全局匹配
const str = 'A是开始, A也是结束'
/A/.test(str)   // 默认只匹配第一个A
/A/g.test(str)  // 选中所有A
// 作用: 用一些字符替换另一些字符
// 返回替换后的字符串
let result = '你是好人',replace(/好人/,'**')  // 你是**

常见规则

任意多个字符:[a-zA-Z]+

任意空白字符和任意非空白字符: [\s\S]*

匹配全部的<img: /<img /g

分组:正则表达式中()包起来的内容表示一个分组,可以通过分组来提取自己想要的内容.

多次的replace

正则修改:var text=/{{\s*(需要匹配的值)\s*}}/;

就可以实现多次替换了

常用密码正则: /^[0-9a-zA-Z]{8,20}$/ } //0-9的数字,大写小写字母,长度8-20位

常用验证码: /^\d{6}$/ /d代表1位,{6}代表长度为6 //长度6位的字符

简单的手机号: /^1\d{10}$/ } //第一位是数字1,后面是10个数字

常用手机号和密码的正则匹配: 陪陪不成功返回null

let ihoneValidation = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/

let pasValidation = /^[0-9a-zA-Z]{8,20}$/

console.log(pasValidation.exec(this.password));

console.log(ihoneValidation.exec(this.ihone));

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

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

相关文章

如何保障云计算健康发展

随着云计算技术的日益成熟&#xff0c;云原生技术凭借其“生于云、长于云”的核心理念&#xff0c;已然成为未来十年云计算发展的关键驱动力。这项技术不仅有效应对了传统云实践中应用升级滞后、架构繁重、迭代效率低下等挑战&#xff0c;更为业务创新铺设了坚实的基石。云原生…

Doris动态分区DYNAMIC PARTITION结果没有自动创建出当前分区

版本&#xff1a;Doris Version: 2.1.2 环境&#xff1a;DorisFE 2台 DorisBE 4台 Doris集群版本搭建详细教程&#xff1a;Apache Doris 2.x 版本【保姆级】安装使用教程_system has no available disk capacity or no availa-CSDN博客 在确认服务器资源都没有问题的情况下,…

【elementui】记录解决el-tree开启show-checkbox后,勾选一个叶结点后会自动折叠的现象

第一种解决方案&#xff1a;设置default-expand-keys的值为当前选中的key值即可 <el-treeref"tree"class"checkboxSelect-wrap":data"treeData"show-checkboxnode-key"id":expand-on-click-node"true":props"defau…

为什么不能在foreach中删除元素

文章目录 快速失败机制&#xff08;fail-fast&#xff09;for-each删除元素为什么报错原因分析逻辑分析 如何正确的删除元素remove 后 breakfor 循环使用 Iterator 总结 快速失败机制&#xff08;fail-fast&#xff09; In systems design, a fail-fast system is one which i…

ubnutu20.04-vscode安装leetcode插件流程

1.在vscode插件商城选择安装leetcode 2.安装node.js 官网下载一个版本安装流程&#xff1a; ①tar -xvf node-v14.18.0-linux-x64.tar.xz ①sudo ln -s /app/software/nodejs/bin/npm /usr/local/bin/ ②ln -s /app/software/nodejs/bin/node /usr/local/bin/ 查看版本&…

【vue3|第15期】Vue3模板语法入门指南

日期:2024年7月2日 作者:Commas 签名:(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释:如果您觉得有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^ 1.01365 = 37.7834;0.99365 = 0.0255 1.02365 = 1377.4083…

sql-语句

文章目录 SQL语句的学习sql是什么sql的内置命令sql的种类sql mode库&#xff0c;表属性介绍&#xff1a;字符集&#xff0c;存储引擎列的数据类型&#xff1a;数字&#xff0c;字符串&#xff0c;时间列的约束DDL: 数据定义语言库表 Online DDL(ALGORITHM) *DML :数据操纵语言资…

如何在Lazada平台快速出单?测评助力商家突破销量瓶颈

Lazada在短短的几年里已经发展成了东南亚地区最大的在线购物网站之一 &#xff0c;很多商家也想要在这样一个大的跨境平台上发展。那么&#xff0c;对于希望在Lazada平台上大展拳脚的商家而言&#xff0c;出单是否容易呢? ​一、Lazada出单容易吗? Lazada出单的难易程度并非…

Linux运维之需掌握的基本Linux命令

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、SHELL 二、执行命令 三、常用系统工作命令 四、系统状态检测命令 五、查找定位文件命令 六、文本文件编辑命令 七、文件目录管理命令…

一篇轻松上手 Xorbits库让大规模数据处理更简单.

Xorbits 是一个用于大规模数据处理和计算的 Python 库,旨在提供高效、灵活的分布式计算框架.它类似于Dask 和 Apache Spark,允许用户使用简单的 Python 代码处理大规模数据集. 安装 Xorbits pip install xorbits以下是一个简单的示例,演示如何使用 Xorbits 进行基本的数据处…

网口串口(Serialport)服务器

文章所用工具http://t.csdnimg.cn/2gIR8http://t.csdnimg.cn/2gIR8 搭建服务器界面 操作配置文件保存方式类 public string FileName { get; set; }public IniHelper(string name) {this.FileName name; //在构造函数中给路径赋值} 1 先导入c语言进行读取操作ini文件的方法 …

第三十四篇-学习构建自己的Agent

agentica v0.1 版本升级&#xff1a; https://github.com/shibing624/agentica &#xff08;原项目名&#xff1a;actionflow&#xff09; agentica是一个Agent构建工具&#xff0c;功能&#xff1a; 简单代码快速编排Agent&#xff0c;支持 Reflection(反思&#xff09;、P…

RocketMQ 顺序消息

顺序消息 顺序消息为云消息队列 RocketMQ 版中的高级特性消息&#xff0c;本文为您介绍顺序消息的应用场景、功能原理、使用限制、使用方法和使用建议。 应用场景 在有序事件处理、撮合交易、数据实时增量同步等场景下&#xff0c;异构系统间需要维持强一致的状态同步&#…

LeetCode热题100刷题5:189. 轮转数组、238. 除自身以外数组的乘积、41. 缺失的第一个正数

189. 轮转数组 两次翻转&#xff0c;借助swap实现reverse class Solution { public:void reverse(vector<int>& nums, int left, int right) {int ileft, j right-1;while(i<j) {swap(nums[i],nums[j]);i;j--;}}void rotate(vector<int>& nums, int…

1105 链表合并

solution P1075的简单变形 #include<iostream> #include<vector> #include<algorithm> using namespace std; struct node{int data, next; }list[100000]; int main(){int first1, first2, n, addr;vector<int> l1, l2, ans;scanf("%d%d%d&quo…

[软件安装]linux下安装steam

1、下载安装包到linux系统 SteamTools 发行版 - Gitee.com 2、选择对应的版本 3、解压安装包steam &#xff08;1&#xff09;在opt路径下新建一个文件夹 sudo mkdir steam &#xff08;2&#xff09;进入压缩包路径下&#xff0c;打开终端&#xff0c;执行以下代码进行解压…

使用Fiddler的ImageView轻松获取抓包中的图片详情信息以及一些图片优化建议

使用过Fiddler中的同学是否遇到过下面的问题&#xff1a; 抓包的请求为获取图片信息时&#xff0c;该如何判断图片显示的是什么内容呢&#xff1f;图片是否需要优化来提升前端展示性能呢&#xff1f;常用的图片优化方案有哪些&#xff1f; 本文就带大家搞定上面的这些问题&am…

【VUE3】uniapp + vite中 uni.scss 使用 /deep/ 不生效(踩坑记录三)

vite 中使用 /deep/ 进行样式穿透报错 原因&#xff1a;vite 中不支持&#xff0c;换成 ::v-deep 或:deep即可

echarts阶段仪表图

echarts阶段仪表图 – 效率图 1、先上效果展示 2、完整源码奉上 Vue2 echarts 5 <template><div ref"gaugeChart" style"width: 100%; height: 100%"></div> </template><script> import * as echarts from "echar…

美工画师必看!AI绘画Stable Diffusion 一键生成 B 端图标教程,轻松制作商业可用的设计图标,从此告别加班!(附安装包)

大家好&#xff0c;我是画画的小强 在日常工作中&#xff0c;设计师在应对运营和UI设计的B端图标时&#xff0c;常常面临大量的构思、制作和渲染等工作&#xff0c;耗时耗力。我们可以利用Stable Diffusion(以下简称SD)结合AI的方式&#xff0c;帮助设计师优化图标的设计流程&…