前端正則表達式詳解

前端正則表達式是前端開發中非常重要的一部分，它可以用來驗證和匹配輸入的數據，限定數據長度和規則，以及進行字符串替換等操作。本文從多個方面詳細闡述前端正則表達式的應用。

一、前端正則表達式用處

前端正則表達式可以應用於豐富的場景。它可以驗證用戶輸入的數據是否合法，限定輸入的格式和規則，智能提示用戶輸入數據的類型和錯誤信息；也可以對輸入的數據進行過濾和替換，匹配符合要求的字符串，從而提高前後端數據的交互效率。

二、前端正則表達式驗證

前端正則表達式可以驗證輸入的數據是否合法，如郵箱、手機號碼、身份證號碼等。下面演示驗證手機號碼的正則表達式：

function checkMobile(mobile) {
  var regex = /^1[3-9]\d{9}$/;
  return regex.test(mobile);
}

其中，^表示開始，$表示結束，[3-9]表示第二位是3至9的數字，\d代表數字，{9}代表9個數字。

三、前端正則表達式全局匹配

前端正則表達式可以匹配所有符合要求的數據，不僅僅限於第一個符合條件的字符串，使用全局匹配可以匹配多個數據。下面演示匹配所有數字的正則表達式：

var str = 'abc123def456ghi789jkl';
var regex = /\d+/g;
var result = str.match(regex);
console.log(result); // ['123', '456', '789']

其中，\d+代表匹配1個或多個數字，g代表全局匹配。

四、前端正則表達式詳解

前端正則表達式是一個複雜的語法，需要全面了解各種規則和表達式的含義和用法。下面列出一些常用的正則表達式：

.代表匹配任意字符
\d代表匹配數字
\w代表匹配字母、數字、下劃線
\s代表匹配空格和製表符
^代表匹配字符串開始
$代表匹配字符串結束
{n}代表匹配n個字符
{n,}代表匹配n個或多個字符
{n,m}代表匹配n個到m個字符
[]代表匹配括號內的任意一個字符
|代表匹配左右兩邊任意一個表達式
()代表分組，可以通過$1、$2等代表分組的內容
*代表匹配零個或多個字符
+代表匹配一個或多個字符
?代表匹配零個或一個字符
\代表轉義字符

五、前端正則表達式年份加月份

使用前端正則表達式可以輕鬆實現日期格式的轉換，下面演示如何將年份和月份拼接成日期格式：

function formatYearMonth(year, month) {
  var regex = /^(\d{4})(\d{2})$/;
  return year.toString().concat(month.toString()).replace(regex, '$1-$2');
}
console.log(formatYearMonth(2020, 10)); // '2020-10'

其中，$1-$2代表取第一個分組和第二個分組的內容，中間加‘-’拼接在一起。

六、前端正則表達式$1

正則表達式中通過$1、$2、$3等表示分組的內容，可通過正則表達式替換函數進行實現。下面演示如何將‘_’轉換成‘-’：

var str = '2020_10_01';
var regex = /(\d{4})_(\d{2})_(\d{2})/;
var result = str.replace(regex, function(match, p1, p2, p3) {
  return p1 + '-' + p2 + '-' + p3;
});
console.log(result); // '2020-10-01'

其中，p1 + '-' + p2 + '-' + p3表示通過$1、$2、$3獲取分組的內容，中間加‘-’拼接在一起。

七、前端正則表達式匹配數字

前端正則表達式可以匹配數字，下面演示如何匹配4位整數和2位小數的數字：

function checkNumber(number) {
  var regex = /^\d{1,4}(\.\d{1,2})?$/;
  return regex.test(number);
}
console.log(checkNumber('12.34')); // true
console.log(checkNumber('123.4')); // true
console.log(checkNumber('1234')); // true
console.log(checkNumber('12345')); // false

其中，^\d{1,4}代表匹配1到4位數字，(\.\d{1,2})?代表匹配0個或1個小數點和1到2位小數。

八、前端正則表達式語法

前端正則表達式的語法非常豐富，下面列出常用的語法：

^：匹配字符串的開始位置
$：匹配字符串的結束位置
.：匹配除換行符外的任意字符
\d：匹配數字
\w：匹配字母、數字、下劃線
\s：匹配空格和製表符
[]：匹配括號內的任意一個字符
()：分組，可以通過$1、$2等代表分組的內容
*：匹配零個或多個字符
+：匹配一個或多個字符
?：匹配零個或一個字符
|：匹配左右兩邊任意一個表達式
{n}：匹配n個字符
{n,}：匹配n個或多個字符
{n,m}：匹配n到m個字符
\：轉義字符

九、前端正則表達式並且

前端正則表達式可以通過使用括號和|實現多個條件的匹配。如下面的例子，匹配同時包含‘a’和‘b’的字符串：

var str = 'abcd';
var regex = /^(?=.*a)(?=.*b).+$/;
console.log(regex.test(str)); // true

其中，.+代表任意長度字符，(?=.*a)表示必須包含‘a’，(?=.*b)表示必須包含‘b’。

十、前端正則表達式限定長度選取

前端正則表達式可以通過限定長度選取符合條件的數據。如下面的例子，匹配長度為3到5的字符串：

var str = 'abcde';
var regex = /^.{3,5}$/;
console.log(regex.test(str)); // true

其中，^.{3,5}$代表匹配長度為3到5個任意字符。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/241030.html