JavaScript中正則表達(dá)式與元字符使用教程

更新時(shí)間：2025年10月21日 11:33:18 作者：半日月

正則表達(dá)式(Regular Expression)是用于匹配字符串中字符組合的,通常用來(lái)查找、替換那些符合正則表達(dá)式的文本,許多語(yǔ)言都支持正則表達(dá)式這篇文章主要介紹了JavaScript中正則表達(dá)式與元字符使用的相關(guān)資料,需要的朋友可以參考下

前言

正則表達(dá)式是用于匹配字符串中字符組合的模式。在js中，正則表達(dá)式也是對(duì)象；通常用來(lái)查找、替換那些符合正則表達(dá)式的文本，許多語(yǔ)言都支持正則表達(dá)式。

如果看不懂正則表達(dá)式的定義沒(méi)關(guān)系，我們主要要搞清楚正則表達(dá)式的作用，在js中正則表達(dá)式的使用場(chǎng)景包括：驗(yàn)證表單，用戶名表單只能輸入英文字母、數(shù)字或者下劃線，昵稱輸入框中可以輸入中文（匹配）；過(guò)濾掉頁(yè)面內(nèi)容中的一些敏感詞（替換）；或者從字符串中獲取我們想要的特定部分（提取）。

即：表單驗(yàn)證、過(guò)濾敏感詞、提取特定字符串。

正則表達(dá)式的使用

使用正則表達(dá)式分為兩個(gè)步驟，首先定義一個(gè)正則表達(dá)式對(duì)象，然后利用正則表達(dá)式檢測(cè)所需要匹配的數(shù)據(jù)。首先說(shuō)明如何定義一個(gè)正則表達(dá)式，在js中定義正則表達(dá)式的語(yǔ)法有兩種，方法一：const 變量名 = /表達(dá)式/

1. 定義正則表達(dá)式

// 定義規(guī)則，正則表達(dá)式的定義    
    // const 變量名 = /表達(dá)式/
    const reg = /oo/

在聲明變量時(shí)，將字面量用 / / 包裹起來(lái)，就定義了一個(gè)正則表達(dá)式對(duì)象，其中變量的值就是正則表達(dá)式字面量。

2.判斷是否有符合規(guī)則的字符串

然后利用正則表達(dá)式對(duì)象的test()方法來(lái)查看正則表達(dá)式與指定的字符串是否匹配，返回值為布爾類型數(shù)據(jù)。語(yǔ)法： regObj.test(被檢測(cè)的字符串)

<script>
    const Früh = "foobar";
    // 定義規(guī)則，正則表達(dá)式的定義    
    // const 變量名 = /表達(dá)式/
    const reg = /oo/          
    console.log(reg.test(Früh));
      
  </script>

exec()方法

在一個(gè)指定的字符串中執(zhí)行搜索操作，語(yǔ)法：regObj.exec(被檢測(cè)的字符串)，如果匹配成功返回值為一個(gè)數(shù)組，否則為null。

元字符

普通字符僅描述他們本身，例如字母、數(shù)字，在字符串匹配中只能匹配與他們相同的字符；元字符是一些具有特殊含義的字符，例如當(dāng)規(guī)定用戶輸入為26個(gè)英文字母時(shí)，可以通過(guò)元字符 [a-z] 來(lái)進(jìn)行匹配。

元字符的分類

邊界符（表示位置），量詞（表示重復(fù)次數(shù)），字符類（比如\d 表示0~9）

邊界符（位置符）：用來(lái)提示字符所處的位置，其中^表示匹配行首的字符，$表示匹配行尾的字符。

如果^ 和 $ 同時(shí)出現(xiàn)在一個(gè)匹配規(guī)則里，那么表示必須精確匹配，即當(dāng)字符串與正則表達(dá)式全等時(shí)，匹配結(jié)果才為true。

console.log('-------------------');
    console.log(/花/.test('花花'));   // true
    console.log(/花/.test('小花'));   // true
    console.log('-----------------');
    // 邊界符 ^ 和 $
    console.log(/^花/.test('花'));    // true
    console.log(/^花/.test('花花'));  // true
    console.log(/^花/.test('小花'));  // flase
    console.log(/^花$/.test('花')); // true   當(dāng)^和$同時(shí)存在時(shí)，只有只有這一種情況為true
    console.log(/^花$/.test('花花')); // flase
    console.log(/^花$/.test('小花')); // flase
    console.log(/^花hua$/.test('花a')); // flase
    console.log(/^花hua$/.test('花hua')); // true

量詞

設(shè)定某個(gè)模式出現(xiàn)的次數(shù)。*: 重復(fù)0次或更多次；+：重復(fù)一次或更多次；?：重復(fù)0次或一次；{n}：重復(fù)n次；{n,}：重復(fù)n次或以上，{n，m}：重復(fù)n到m次。

在以下案例中對(duì)于/^花*$/ 表示的含義是字符串只能為空或者只包含字符“花”，即以“花”開(kāi)頭，以“花”結(jié)尾，“花”的數(shù)量為0或者更多——所以當(dāng)字符串包含其他字符時(shí)匹配失敗。

// 量詞 * 
    console.log('------------------------------');
    console.log(/^花$/.test('花')); // 
    console.log(/花$/.test('花')); 
    console.log(/^花/.test('花')); 
    console.log(/花*/.test('花')); 
    console.log(/花*/.test('')); 
    console.log(/^花*$/.test('')); 
    console.log(/^花*$/.test('花花')); // 以上為ture
    console.log(/^花*$/.test('小花花')); // 
    console.log(/^花*$/.test(' 花花')); 
    console.log(/^花*$/.test('花朵')); 
    console.log(/^花*$/.test('花好花')); // 以上為flase

// 量詞 + 出現(xiàn)次數(shù)等于或多于一次 
    console.log('------------------------------');
    console.log(/^花$/.test('花')); // 
    console.log(/花$/.test('花')); 
    console.log(/^花/.test('花')); 
    console.log(/花+/.test('花')); 
    console.log(/花+/.test('')); 
    console.log(/^花+$/.test('')); 
    console.log(/^花+$/.test('花花')); // 
    console.log(/^花+$/.test('小花花')); // 
    console.log(/^花+$/.test(' 花花')); 
    console.log(/^花+$/.test('花朵')); 
    console.log(/^花+$/.test('花好花')); // ttttfftffff

字符類

匹配字符串中是否有某字符集合里面的字符。字符類需要了解起碼這三個(gè)符號(hào)："[]","^","."。

[ ]：匹配字符集合，字符串只要包含[……]里任意一個(gè)字符，都返回true。

 // 字符類 [abc] 
    console.log('----------------');
    console.log(/[abc]/.test('a'));
    console.log(/[abc]/.test('ab'));
    console.log(/^[abc]$/.test('a'));
    console.log(/^[abc]$/.test('ab'));
    console.log(/^[abc]{2}$/.test('ab'));  // tttft
    // [a-z] 表示26個(gè)字母
    console.log('----------------');
    console.log(/^[a-z]$/.test('j'));
    console.log(/^[a-z]$/.test('J'));
    console.log(/^[0-9]$/.test('J'));
    console.log(/^[0-9]$/.test('2'));
    console.log(/^[0-9a-zA-Z]$/.test('2'));
    console.log(/^[0-9a-zA-Z]$/.test('p'));
    console.log(/^[0-9a-zA-Z]$/.test('P')); // tfftttt

QQ號(hào)的正則表達(dá)式：

    /^[1-9][0-9]{4,}$/  // 第一個(gè)qq號(hào)為10000，qq號(hào)的格式是以1開(kāi)頭，最少五位數(shù)。

[ ]括號(hào)里加上^，表示取反。比如[^a-z] 表示匹配除了小寫字母以外的所有字符。“.” 表示匹配除換行符之外的任何單個(gè)字符。

簡(jiǎn)易表單驗(yàn)證

<!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>
    .right {
      color: green;
    }
    .error {
      color: brown;
    }
  </style>
</head>
<body>
  <input type="text">
  <span>haohaohao</span>

  <script>
    const input = document.querySelector('input')
    const reg = /^[a-zA-Z0-9-_]{6,16}$/
    const span = document.querySelector('span')
    input.addEventListener('blur', function(){
      if(reg.test(input.value)){
        span.className = 'right'
        span.innerHTML = '輸入合法'
      } else {
        span.className = 'error'
        span.innerHTML = '輸入不合法'
      }
    })
  </script>
</body>
</html>

字符類中的預(yù)定義

就是一些常見(jiàn)模式的簡(jiǎn)寫。

\d：匹配任意數(shù)字字符（等價(jià)于 [0-9]）。
\D：匹配任意非數(shù)字字符（等價(jià)于 [^0-9]）。
\w：匹配任意單詞字符（包括字母、數(shù)字和下劃線，等價(jià)于 [A-Za-z0-9_]）。
\W：匹配任意非單詞字符（等價(jià)于 [^A-Za-z0-9_]）。
\s：匹配任意空白字符（包括空格、制表符、換行符等），相當(dāng)于[\t\r\n\v\f]。
\S：匹配任意非空白字符，相當(dāng)于[^\t\r\n\v\f]。

日期的格式：

^\d{4}-\d{1,2}-\d{1,2}

修飾符

用來(lái)約束正則執(zhí)行的某些細(xì)節(jié)，例如是否區(qū)分大小寫，是否支持多行匹配。

語(yǔ)法： /表達(dá)式/修飾符

主要了解修飾符‘i’和修飾符‘g’。i 表示ignore，在正則匹配時(shí)不區(qū)分大小寫；g 表示global，匹配所以滿足正則表達(dá)式的結(jié)果。

replace方法

語(yǔ)法：字符串.replace(/正則表達(dá)式/，'替換的文本')

字符串按照正則表達(dá)式查找，查找到對(duì)應(yīng)子字符串就替換文本。替換常用于過(guò)濾敏感詞。

console.log('---------修飾符 and replace替換---------------');
    console.log(/^java$/.test('java'));
    console.log(/^java$/.test('JAVA'));
    console.log(/^java$/i.test('JAVA'));
    console.log(/^java$/i.test('Java'));
    const str = 'java是一本編程語(yǔ)言，學(xué)完JAVA可以送外賣'
    console.log(str.replace(/java/, '前端'));
    console.log(str.replace(/java/i, '前端'));
    console.log(str.replace(/java/g, '前端'));
    console.log(str.replace(/java/ig, '前端'));
    console.log(str.replace(/java|JAVA/g, '前端'));

以上案例中，最后一個(gè) | 表示或，等同于 i 。

屏蔽敏感詞案例

注意當(dāng)使用邏輯或"|"的時(shí)候，以及正則表達(dá)式內(nèi)容時(shí)候，不要加空格，空格也會(huì)作為字符參與匹配。

<!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=""></textarea>
  <button>發(fā)布</button>
  <div></div>

  <script>
    const text = document.querySelector('textarea')
    const btn = document.querySelector('button')
    const div = document.querySelector('div')
    btn.addEventListener('click', function(){
      
      div.innerHTML = text.value.replace(/激情|麻痹|美目/g, '**')
      text.value = ''
    })
  </script>

</body>
</html>