JS正则表达式：常用正则手册/RegExp/正则积累

一、正则基础语法

JavaScript 正则表达式 | 菜鸟教程

JS正则表达式语法大全（非常详细）

二、使用场景

2.1、校验中国大陆手机号的正则表达式

正则

/^1[3456789]\d{9}$/

解释

序号正则解释
1^1以数字 1 开头
2[3456789]第二位可以是 3、4、5、6、7、8、9 中的任意一个
3\d{9}后面是 9 个数字

示例代码

<template><div class="regexp"><el-input v-model="phoneNumber"></el-input><el-button @click="isPhoneNumber">正则校验手机号码</el-button></div>
</template><script setup lang="ts">
import { ref } from 'vue';let phoneNumber = ref('')
const isPhoneNumber = () =>{const reg = /^1[3456789]\d{9}$/;console.log(reg.test(phoneNumber.value))
}</script><style scoped lang="less">
.regexp{display: flex;align-items: flex-start;
}
</style>

浏览器测试

 

2.2、JavaScript 正则表达式来验证邮箱地址

正则

/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z]{2,4})+$/

解释

序号正则解释
1^匹配字符串的开始位置
2([a-zA-Z0-9_.+-])+匹配任何字母、数字、下划线、点、加号和减号，至少匹配一次
3\@匹配字符 @
4(([a-zA-Z0-9-])+\.)+匹配任何字母、数字和减号，至少匹配一次，后面跟着一个点。该模式可以重复多次
5([a-zA-Z]{2,4})+匹配任何字母，长度在 2 到 4 之间，至少匹配一次。该模式匹配邮箱地址的顶级域名，例如 .com、.org 等
6$匹配字符串的结束位置

示例代码

function isValidEmail(email) {const regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z]{2,4})+$/;return regex.test(email); // 返回一个布尔值，表示该 email 是否为有效的邮箱地址
}const email = "example@mail.com";
if (isValidEmail(email)) {console.log("Valid email"); // 输出
} else {console.log("Invalid email");
}

浏览器测试

https://www.cnblogs.com/chenlinlab/p/10915019.html

2.3、身份证号码

正则

/(^\d{15}$)|(^\d{17}([0-9]|X)$)/

解释 

序号正则解释
1(^\d{15}$)匹配长度为 15 位的数字串
2(^\d{17}([0-9]|X)$)匹配长度为 17 位的数字串或 17 位数字串加一个大写字母 X。其中，\d 表示任意一个数字字符，| 表示或

示例代码

function isValidIdNumber(idNumber) {const regex = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;return regex.test(idNumber);
}const idNumber = "51152719991212001X";
if (isValidIdNumber(idNumber)) {console.log("Valid ID number"); // 输出
} else {console.log("Invalid ID number");
}

2.4、去掉字符串空格

去掉左侧空格

let str = str.replace(/(^\s*)/g,"")

去掉右侧空格

let str = str.replace(/(\s*$)/g,"")

去掉左右空格

let str = str.replace(/(^\s*)|(\s*$)/g,"")

去掉对象中值为字符串的前后空格

let formData = {a: 111,b: null,c: '  snow  '
}
Object.keys(formData).forEach((key)=>{if(typeof formData[key] === 'string'){formData[key] = formData[key].replace(/(^\s*)|(\s*$)/g,"")}
})

2.5、只能输入正整数

function isNumber(str) {return /^\d+$/.test(str);
}

2.6、只能输入字母

function isLetter(str) {return /^[a-zA-Z]+$/.test(str);
}

2.7、只能输入文字

function isChinese(str) {return /^[\u4e00-\u9fa5]+$/.test(str);
}

2.8、校验url地址

正则

/^(http[s]?:\/\/)?[a-zA-Z0-9\_\-]+\.[a-zA-Z0-9]{2,3}(\:[0-9]{1,5})?(\/\S*)?$/i

解释

序号解释
1URL是否以http://或https://开头（可选）
2域名是否由字母、数字、下划线或短划线组成
3域名后缀是否为2到3个字母或数字
4端口号是否在1到5位数之间（可选）
5URL路径是否以斜杠开头，后面跟着任意非空白字符（可选）

2.9、校验金额，千分位展示，保留两位小数

校验金额可以使用正则表达式，千分位展示和保留两位小数则需要使用 JavaScript 的内置函数进行处理。

2.9.1、校验金额的正则表达式
function isValidAmount(amount) {var pattern = /^\d+(\.\d{1,2})?$/;return pattern.test(amount);
}

这个正则表达式的意思是，金额必须是一个数字，可以包含一到两个小数位。例如：1、10、100.5、999.99 等等都是合法的金额。

示例代码

isValidAmount('10'); // true
isValidAmount('100.5'); // true
isValidAmount('999.99'); // true
isValidAmount('1000'); // false
isValidAmount('999.999'); // false
2.9.2、将金额格式化为千分位展示和保留两位小数
function formatAmount(amount) {if (!isValidAmount(amount)) {return 'Invalid amount';}return Number(amount).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
}

示例代码

formatAmount('1000.5'); // '1,000.50'
formatAmount('999999.99'); // '999,999.99'
formatAmount('invalid amount'); // 'Invalid amount'

值得注意的是，此函数只对合法的金额进行格式化，对于非法的金额，将返回提示字符串Invalid amount。

2.10、日期格式化

function formatDate(date, fmt) {var regexp = {"M+": date.getMonth() + 1,"d+": date.getDate(),"h+": date.getHours(),"m+": date.getMinutes(),"s+": date.getSeconds(),"q+": Math.floor((date.getMonth() + 3) / 3),"S": date.getMilliseconds()};if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));}for (var k in regexp) {if (new RegExp("(" + k + ")").test(fmt)) {fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (regexp[k]) : (("00" + regexp[k]).substr(("" + regexp[k]).length)));}}return fmt;
}// 示例，将日期格式化为yyyy-MM-dd hh:mm:ss格式
var date = new Date();
var formattedDate = formatDate(date, 'yyyy-MM-dd hh:mm:ss');
console.log(formattedDate); // 例如：2023-07-29 18:14:07

2.11、字符串替换

可以使用字符串的 replace() 方法以及正则表达式来进行字符串替换。

代码示例

const str = "hello, world!";
const newStr = str.replace(/hello/g, "hi");
console.log(newStr); // "hi, world!"

解释

序号正则解释
1/hello/g匹配字符串中的所有 "hello"字符串，并将其替换为 "hi"
2/g表示全局匹配，可以匹配字符串中的所有符合条件的子字符串

2.12、烤串命名风格转换为大小驼峰命名风格

示例代码

const str = "hello-world-this-is-a-test";
const newStr = str.replace(/-([a-z])/g, function(match, p1) {return p1.toUpperCase();
});
console.log(newStr); // "helloWorldThisIsATest"

解释

正则表达式 /-([a-z])/g 匹配符合烤串命名风格的字符串中的 - 后面的小写字母，并将其替换为对应的大写字母。其中 /g 表示全局匹配，可以匹配字符串中的所有符合条件的子字符串。

在 replace() 方法中，第二个参数可以是一个函数，可以在函数中对匹配到的字符串进行更复杂的处理。函数接收两个参数，第一个参数是匹配到的字符串，第二个参数是匹配到的子串中的第一个括号里的内容。

在这个例子中，我们使用匿名函数来处理匹配到的字符串，将匹配到的小写字母转换为对应的大写字母，并返回。匹配到的字符串将被替换为返回值。

2.13、蛇形命名风格（下划线分隔）转换为驼峰命名风格

示例代码

const str = "hello_world_this_is_a_test";
const newStr = str.replace(/_([a-z])/g, function(match, p1) {return p1.toUpperCase();
});
console.log(newStr.replace(/^[a-z]/, function(s) {return s.toUpperCase();
})); // "HelloWorldThisIsATest"

解释

在首先使用正则表达式 /_([a-z])/g 匹配符合蛇形命名风格的字符串中的 _ 后面的小写字母，并将其替换为对应的大写字母。其中 /g 表示全局匹配，可以匹配字符串中的所有符合条件的子字符串。

在 replace() 方法中，第二个参数可以是一个函数，可以在函数中对匹配到的字符串进行更复杂的处理。函数接收两个参数，第一个参数是匹配到的字符串，第二个参数是匹配到的子串中的第一个括号里的内容。

在这个例子中，我们使用匿名函数来处理匹配到的字符串，将匹配到的小写字母转换为对应的大写字母，并返回。匹配到的字符串将被替换为返回值。

由于在驼峰命名风格中首字母也是大写的，因此我们还需要再次使用字符串的 replace() 方法，将第一个字符转换为大写字母。

2.14、驼峰命名风格（首字母小写）转换为蛇形命名风格（下划线分隔）

示例代码

const str = "helloWorldThisIsATest";
const newStr = str.replace(/[A-Z]/g, function(match) {return "_" + match.toLowerCase();
});
console.log(newStr.replace(/^_/, "")); // "hello_world_this_is_a_test"

解释

使用正则表达式 /[A-Z]/g 匹配符合驼峰命名风格的字符串中的大写字母，并在其前面添加 _，然后将其转换为小写字母。其中 /g 表示全局匹配，可以匹配字符串中的所有符合条件的子字符串。

在 replace() 方法中，第二个参数也是一个函数，它接收一个参数，就是匹配到的字符串。我们在函数中将匹配到的大写字母转换为 _ + 对应的小写字母，并返回处理后的字符串。

由于我们添加了一个多余的 _，因此我们还需要再次使用字符串的 replace() 方法，将第一个字符的 _ 去除。

2.15、url参数解析

将 URL 中的参数解析出来可以使用正则表达式和字符串的 match() 方法实现。

示例代码

const url = "https://www.example.com/path?foo=bar&baz=qux&hello=world";
const params = url.match(/\?.+/)[0].slice(1).split("&");
const queryParams = {};
for (let i = 0; i < params.length; i++) {const param = params[i].split("=");queryParams[param[0]] = decodeURIComponent(param[1]);
}
console.log(queryParams); // {foo: "bar", baz: "qux", hello: "world"}

解释

使用正则表达式 /\?.+/ 匹配 URL 中的参数部分。其中 \? 匹配 ? 字符，.+ 匹配一个或多个字符。然后我们使用数组的 slice() 方法去除第一个字符 ?。再使用字符串的 split() 方法将参数字符串分割成参数名和参数值的数组。

最后，我们将参数名和参数值存储在一个对象中，使用 decodeURIComponent() 方法对参数进行解码，以避免出现转义字符的问题。

注意，在实际开发中，我们需要对 URL 参数进行一些安全性处理，例如对特殊字符进行转义，以避免 XSS 攻击等漏洞。

2.16、检验密码强度

密码强度通常是根据密码中包含的字符种类和密码长度来判断的。我们可以使用正则表达式来检验密码是否包含了足够多的字符种类和长度。

示例代码

function testPasswordStrength(password) {const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;const mediumRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d@$!%*?&]{6,}$/;if (strongRegex.test(password)) {return "strong";} else if (mediumRegex.test(password)) {return "medium";} else {return "weak";}
}

解释

序号正则解释
1^(?=.*[a-z])密码中必须至少包含一个小写字母
2(?=.*[A-Z])密码中必须至少包含一个大写字母
3(?=.*\d)密码中必须至少包含一个数字
4(?=.*[@$!%*?&])密码中必须至少包含一个特殊字符
5[A-Za-z\d@$!%*?&]{8,}密码必须至少包含 8 个字符，可以是大写字母、小写字母、数字和特殊字符中的任意组合
如果密码强度符合要求，会返回 "strong"、"medium" 或 "weak" 之一。可以根据需要进一步处理这些结果

三、element ui自定义校验

const validateEmailAddress = (rule, value, callback) => {console.log('160', value)if (value === '') {callback(new Error('请输入邮箱地址'));} else {const reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@(163.){1,63}[a-z0-9]+$");if(!reg.test(value)){callback(new Error('请输入163邮箱地址'));} else {callback();}}};
 <form action="">2 　　输入：<input type="text" name="mazey" id="mazey" placeholder="请输入邮箱">3 　　<input type="button" value="验证" onclick="check();">4 </form>5 6 <script>7 function check(){8 　　var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式9 　　var obj = document.getElementById("mazey"); //要验证的对象10 　　if(obj.value === ""){ //输入不能为空11 　　　　alert("输入不能为空!");12 　　　　return false;13 　　}else if(!reg.test(obj.value)){ //正则验证不通过，格式不对14 　　　　alert("验证不通过!");15 　　　　return false;16 　　}else{17 　　　　alert("通过！");18 　　　　return true;19 　　}20 }21 </script>

浏览器测试

 

四、欢迎交流指正，关注我，一起学习

参考链接

JS邮箱验证-正则验证 - 陈林实验室 - 博客园

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

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

相关文章

cnn卷积神经网络（基础）

cnn卷积神经网络（基础）

convolutional neural networks 特征提取&#xff08;卷积、下采样&#xff09;->分类器 &#xff08;全连接&#xff09; 卷积过程 依次进行数乘 &#xff08;每个相同位置上的数字相乘再加和&#xff09; 左右数乘矩阵channel数量要一样&#xff0c;输出得到一个通道 卷…
阅读更多...
通过源代码修改使 Apache Hudi 支持 Kerberos 访问 Hive 的功能

通过源代码修改使 Apache Hudi 支持 Kerberos 访问 Hive 的功能

Hudi 0.10.0 Kerberos-support 适配文档 文档说明 本文档主要用于阐释如何基于 Hudi 0.10.0 添加支持 Kerberos 认证权限的功能。 主要贡献&#xff1a; 针对正在使用的 Hudi 源代码进行 Kerberos-support 功能扩展&#xff0c;总修改规模囊括了 12 个文件约 20 处代码共计…
阅读更多...
RabbitMQ 教程 | RabbitMQ 入门

RabbitMQ 教程 | RabbitMQ 入门

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…
阅读更多...
动态线程池问题的解决

动态线程池问题的解决

项目中需要将线程池也监控管理起来。 于是决定引入了hippo4j&#xff0c;这个引入很简单&#xff0c;官方的例子也很简单&#xff0c;拿过来直接跑。 出现问题了&#xff0c;用的和例子一模一样的&#xff0c;也没什么错&#xff0c;但是就是在服务器的管理控制台上没有找到动态…
阅读更多...
[SQL系列] 从头开始学PostgreSQL 借鉴MYSQL的隔离级别

[SQL系列] 从头开始学PostgreSQL 借鉴MYSQL的隔离级别

SQL 的隔离级别是指在数据库中&#xff0c;事务之间相互隔离的程度。当事务 A 修改了某条数据后&#xff0c;如果事务 B 在这个时候读取该数据&#xff0c;会发生什么情况呢&#xff1f;这取决于数据库的隔离级别设置。 常用的事务隔离级别类型包括以下几种&#xff1a; READ …
阅读更多...
实现langchain-ChatGLM API调用客户端（及未解决的问题）

实现langchain-ChatGLM API调用客户端（及未解决的问题）

langchain-ChatGLM是一个基于本地知识库的LLM对话库。其基于text2vec-large-Chinese为Embedding模型&#xff0c;ChatGLM-6B为对话大模型。原项目地址&#xff1a;https://github.com/chatchat-space/langchain-ChatGLM 对于如何本地部署ChatGLM模型&#xff0c;可以参考我之前…
阅读更多...
解决代理IP负载均衡与性能优化的双重挑战

解决代理IP负载均衡与性能优化的双重挑战

在当今数字化时代&#xff0c;代理IP的应用范围日益广泛&#xff0c;它不仅在数据爬取、网络抓取等领域发挥着重要作用&#xff0c;也成为网络安全和隐私保护的有力工具。然而&#xff0c;面对庞大的数据流量和复杂的网络环境&#xff0c;如何实现代理IP的负载均衡和性能优化成…
阅读更多...
反复 Failed to connect to github.com port 443 after xxx ms

反复 Failed to connect to github.com port 443 after xxx ms

前提&#xff1a;使用了代理&#xff0c;浏览器能稳定访问github&#xff0c;但git clone一直超时 解决方案&#xff1a; 1. git config --global http.proxy http://127.0.0.1:1080 2. 代理设置端口1080 3. 1080可自定义 感谢来自这篇博客和评论区的提醒&#xff1a;解决…
阅读更多...
Flutter 状态组件 InheritedWidget

Flutter 状态组件 InheritedWidget

Flutter 状态组件 InheritedWidget 视频 前言 今天会讲下 inheritedWidget 组件&#xff0c;InheritedWidget 是 Flutter 中非常重要和强大的一种 Widget&#xff0c;它可以使 Widget 树中的祖先 Widget 共享数据给它们的后代 Widget&#xff0c;从而简化了状态管理和数据传递…
阅读更多...
SpringBoot的三层架构以及IOCDI

SpringBoot的三层架构以及IOCDI

目录 一、IOC&DI入门 二、三层架构 数据库访问层 业务逻辑层 控制层 一、IOC&DI入门 在软件开发中&#xff0c;IOC&#xff08;Inversion of Control&#xff09;和DI&#xff08;Dependency Injection&#xff09;是密切相关的概念。 IOC&#xff08;控制反转&a…
阅读更多...
常见的远程代码执行漏洞的注入点和注入方式

常见的远程代码执行漏洞的注入点和注入方式

10个常见的远程代码执行漏洞的注入点和注入方式的举例&#xff1a; 用户输入&#xff1a;当用户输入未经验证和过滤的数据被用于构建动态命令或查询时&#xff0c;攻击者可以通过输入恶意代码来执行远程命令。 文件上传功能&#xff1a;如果文件上传功能没有正确地验证和限制上…
阅读更多...
webpack如何实现热更新？

webpack如何实现热更新？

webpack如何实现热更新&#xff1f; 要使用 Webpack 实现热更新&#xff0c;可以按照以下步骤进行配置&#xff1a; 1.在项目中安装 Webpack 和相关的开发依赖&#xff1a; npm install webpack webpack-cli webpack-dev-server --save-dev2.创建一个名为 webpack.dev.js 的…
阅读更多...
flask中的蓝图

flask中的蓝图

flask中的蓝图 在 Flask 中&#xff0c;蓝图&#xff08;Blueprint&#xff09;是一种组织路由和服务的方法&#xff0c;它允许你在应用中更灵活地组织代码。蓝图可以大致理解为应用或者应用中的一部分&#xff0c;可以在蓝图中定义路由、错误处理程序以及静态文件等。然后可以…
阅读更多...
Qt 调用 Microsoft Excel 组件生成 Excel 文档

Qt 调用 Microsoft Excel 组件生成 Excel 文档

在.pro文件中添加模块： QT += core gui axcontainer参考界面：界面中只有一个 pushButton 按钮。 参考代码： mainwindow.h： #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include
阅读更多...
【leetcode】541. 反转字符串 II

【leetcode】541. 反转字符串 II

给定一个字符串 s 和一个整数 k&#xff0c;从字符串开头算起&#xff0c;每计数至 2k 个字符&#xff0c;就反转这 2k 字符中的前 k 个字符。 如果剩余字符少于 k 个&#xff0c;则将剩余字符全部反转。 如果剩余字符小于 2k 但大于或等于 k 个&#xff0c;则反转前 k 个字符…
阅读更多...
细讲TCP三次握手四次挥手(一)

细讲TCP三次握手四次挥手(一)

计算机网络体系结构 在计算机网络的基本概念中&#xff0c;分层次的体系结构是最基本的。计算机网络体系结构的抽象概念较多&#xff0c;在学习时要多思考。这些概念对后面的学习很有帮助。 网络协议是什么&#xff1f; 在计算机网络要做到有条不紊地交换数据&#xff0c;就必…
阅读更多...
Unity 性能优化二：内存问题

Unity 性能优化二：内存问题

目录 策略导致的内存问题 GFX内存 纹理资源 压缩格式 Mipmap 网格资源 Read/Write 顶点数据 骨骼 静态合批 Shader资源 Reserved Memory RenderTexture 动画资源 音频资源 字体资源 粒子系统资源 Mono堆内存 策略导致的内存问题 1. Assetbundle 打包的时候…
阅读更多...
项目——负载均衡在线OJ

项目——负载均衡在线OJ

目录 项目介绍开发环境所用技术项目宏观结构编写思路1. 编写compile_server1.1 编译模块编写1.2 运行功能1.3compile_runner 编译与运行1.4 编写compile_server.cpp调用compile_run模块&#xff0c;形成网络服务 2. 编写基于MVC的oj_server2.1 oj_server.cpp的编写2.2 oj_model…
阅读更多...
后端性能测试的类型

后端性能测试的类型

目录 性能测试的类型 负载测试(load testing) 压力测试(Stress Testing) 可扩展性测试( 尖峰测试(Spike Testing) 耐久性测试(Endurance Testing) 并发测试(Concurrency Testing) 容量测试(Capacity Testing) 资料获取方法 性能测试的类型 性能测试&#xff1a;确定软…
阅读更多...
pytorch模型的保存与加载

pytorch模型的保存与加载

1 pytorch保存和加载模型的三种方法 PyTorch提供了三种方式来保存和加载模型&#xff0c;在这三种方式中&#xff0c;加载模型的代码和保存模型的代码必须相匹配&#xff0c;才能保证模型的加载成功。通常情况下&#xff0c;使用第一种方式&#xff08;保存和加载模型状态字典…
阅读更多...
最新文章

Copyright @ 2022~2023