一、正則基礎(chǔ)語法
JavaScript 正則表達(dá)式 | 菜鳥教程
JS正則表達(dá)式語法大全（非常詳細(xì)）
二、使用場景
2.1、校驗中國大陸手機(jī)號的正則表達(dá)式
正則
/^1[3456789]\d{9}$/
解釋
| 序號 | 正則 | 解釋 |
| 1 | ^1 | 以數(shù)字 1 開頭 |
| 2 | [3456789] | 第二位可以是 3、4、5、6、7、8、9 中的任意一個 |
| 3 | \d{9} | 后面是 9 個數(shù)字 |
示例代碼
<template>
<div class="regexp">
<el-input v-model="phoneNumber"></el-input>
<el-button @click="isPhoneNumber">正則校驗手機(jī)號碼</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 正則表達(dá)式來驗證郵箱地址
正則
/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z]{2,4})+$/
解釋
| 序號 | 正則 | 解釋 |
| 1 | ^ | 匹配字符串的開始位置 |
| 2 | ([a-zA-Z0-9_.+-])+ | 匹配任何字母、數(shù)字、下劃線、點、加號和減號，至少匹配一次 |
| 3 | \@ | 匹配字符 @ |
| 4 | (([a-zA-Z0-9-])+\.)+ | 匹配任何字母、數(shù)字和減號，至少匹配一次，后面跟著一個點。該模式可以重復(fù)多次 |
| 5 | ([a-zA-Z]{2,4})+ | 匹配任何字母，長度在 2 到 4 之間，至少匹配一次。該模式匹配郵箱地址的頂級域名，例如 .com、.org 等 |
| 6 | $ | 匹配字符串的結(jié)束位置 |
示例代碼
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 位的數(shù)字串 |
| 2 | (^\d{17}([0-9]|X)$) |
匹配長度為 17 位的數(shù)字串或 17 位數(shù)字串加一個大寫字母 X。其中，\d 表示任意一個數(shù)字字符，| 表示或 |
示例代碼
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、去掉字符串空格
去掉左側(cè)空格
let str?= str.replace(/(^\s*)/g,"")
去掉右側(cè)空格
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、只能輸入正整數(shù)
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
解釋
| 序號 | 解釋 |
| 1 | URL是否以http://或https://開頭（可選） |
| 2 | 域名是否由字母、數(shù)字、下劃線或短劃線組成 |
| 3 | 域名后綴是否為2到3個字母或數(shù)字 |
| 4 | 端口號是否在1到5位數(shù)之間（可選） |
| 5 | URL路徑是否以斜杠開頭，后面跟著任意非空白字符（可選） |
2.9、校驗金額，千分位展示，保留兩位小數(shù)
校驗金額可以使用正則表達(dá)式，千分位展示和保留兩位小數(shù)則需要使用 JavaScript 的內(nèi)置函數(shù)進(jìn)行處理。
2.9.1、校驗金額的正則表達(dá)式
function isValidAmount(amount) {
var pattern = /^\d+(\.\d{1,2})?$/;
return pattern.test(amount);
}
這個正則表達(dá)式的意思是，金額必須是一個數(shù)字，可以包含一到兩個小數(shù)位。例如：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、將金額格式化為千分位展示和保留兩位小數(shù)
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'
值得注意的是，此函數(shù)只對合法的金額進(jìn)行格式化，對于非法的金額，將返回提示字符串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() 方法以及正則表達(dá)式來進(jìn)行字符串替換。
代碼示例
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、烤串命名風(fēng)格轉(zhuǎn)換為大小駝峰命名風(fēng)格
示例代碼
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"
解釋
正則表達(dá)式 /-([a-z])/g 匹配符合烤串命名風(fēng)格的字符串中的 - 后面的小寫字母，并將其替換為對應(yīng)的大寫字母。其中 /g 表示全局匹配，可以匹配字符串中的所有符合條件的子字符串。
在 replace() 方法中，第二個參數(shù)可以是一個函數(shù)，可以在函數(shù)中對匹配到的字符串進(jìn)行更復(fù)雜的處理。函數(shù)接收兩個參數(shù)，第一個參數(shù)是匹配到的字符串，第二個參數(shù)是匹配到的子串中的第一個括號里的內(nèi)容。
在這個例子中，我們使用匿名函數(shù)來處理匹配到的字符串，將匹配到的小寫字母轉(zhuǎn)換為對應(yīng)的大寫字母，并返回。匹配到的字符串將被替換為返回值。
2.13、蛇形命名風(fēng)格（下劃線分隔）轉(zhuǎn)換為駝峰命名風(fēng)格
示例代碼
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"
解釋
在首先使用正則表達(dá)式 /_([a-z])/g 匹配符合蛇形命名風(fēng)格的字符串中的 _ 后面的小寫字母，并將其替換為對應(yīng)的大寫字母。其中 /g 表示全局匹配，可以匹配字符串中的所有符合條件的子字符串。
在 replace() 方法中，第二個參數(shù)可以是一個函數(shù)，可以在函數(shù)中對匹配到的字符串進(jìn)行更復(fù)雜的處理。函數(shù)接收兩個參數(shù)，第一個參數(shù)是匹配到的字符串，第二個參數(shù)是匹配到的子串中的第一個括號里的內(nèi)容。
在這個例子中，我們使用匿名函數(shù)來處理匹配到的字符串，將匹配到的小寫字母轉(zhuǎn)換為對應(yīng)的大寫字母，并返回。匹配到的字符串將被替換為返回值。
由于在駝峰命名風(fēng)格中首字母也是大寫的，因此我們還需要再次使用字符串的 replace() 方法，將第一個字符轉(zhuǎn)換為大寫字母。
2.14、駝峰命名風(fēng)格（首字母小寫）轉(zhuǎn)換為蛇形命名風(fēng)格（下劃線分隔）
示例代碼
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"
解釋
使用正則表達(dá)式?/[A-Z]/g?匹配符合駝峰命名風(fēng)格的字符串中的大寫字母，并在其前面添加?_，然后將其轉(zhuǎn)換為小寫字母。其中?/g?表示全局匹配，可以匹配字符串中的所有符合條件的子字符串。
在?replace()?方法中，第二個參數(shù)也是一個函數(shù)，它接收一個參數(shù)，就是匹配到的字符串。我們在函數(shù)中將匹配到的大寫字母轉(zhuǎn)換為?_?+ 對應(yīng)的小寫字母，并返回處理后的字符串。
由于我們添加了一個多余的?_，因此我們還需要再次使用字符串的?replace()?方法，將第一個字符的?_?去除。
2.15、url參數(shù)解析
將 URL 中的參數(shù)解析出來可以使用正則表達(dá)式和字符串的 match() 方法實現(xiàn)。
示例代碼
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"}
解釋
使用正則表達(dá)式 /\?.+/ 匹配 URL 中的參數(shù)部分。其中 \? 匹配 ? 字符，.+ 匹配一個或多個字符。然后我們使用數(shù)組的 slice() 方法去除第一個字符 ?。再使用字符串的 split() 方法將參數(shù)字符串分割成參數(shù)名和參數(shù)值的數(shù)組。
最后，我們將參數(shù)名和參數(shù)值存儲在一個對象中，使用 decodeURIComponent() 方法對參數(shù)進(jìn)行解碼，以避免出現(xiàn)轉(zhuǎn)義字符的問題。
注意，在實際開發(fā)中，我們需要對 URL 參數(shù)進(jìn)行一些安全性處理，例如對特殊字符進(jìn)行轉(zhuǎn)義，以避免 XSS 攻擊等漏洞。
2.16、檢驗密碼強(qiáng)度
密碼強(qiáng)度通常是根據(jù)密碼中包含的字符種類和密碼長度來判斷的。我們可以使用正則表達(dá)式來檢驗密碼是否包含了足夠多的字符種類和長度。
示例代碼
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) |
密碼中必須至少包含一個數(shù)字 |
| 4 | (?=.*[@$!%*?&]) |
密碼中必須至少包含一個特殊字符 |
| 5 | [A-Za-z\d@$!%*?&]{8,} |
密碼必須至少包含 8 個字符，可以是大寫字母、小寫字母、數(shù)字和特殊字符中的任意組合 |
| 如果密碼強(qiáng)度符合要求，會返回 "strong"、"medium" 或 "weak" 之一?？梢愿鶕?jù)需要進(jìn)一步處理這些結(jié)果 | ||
?瀏覽器測試
?
三、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]+$"); //正則表達(dá)式
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>四、歡迎交流指正，關(guān)注我，一起學(xué)習(xí)文章來源：http://www.zghlxwxcb.cn/news/detail-621425.html
參考鏈接
JS郵箱驗證-正則驗證 - 陳林實驗室 - 博客園文章來源地址http://www.zghlxwxcb.cn/news/detail-621425.html
到了這里，關(guān)于JS正則表達(dá)式：常用正則手冊/RegExp/正則積累的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
