iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
2
自我挑戰組

前端之 " wow~原來是這樣啊 "系列 第 30

Day30 什麼是 RegExp 正則表達式 ?

什麼是 RegExp 呢?如何撰寫呢?

正則表達式(RegExp , regular expression) 用於確認字串是否符合所定義的規則。例如:輸入身份證號碼時,它的規則爲首字爲字母,後緊接著九個數字。又或是生日格式年份若爲民國則爲兩個數字;若爲西元則爲四個數字。利用常規表達式可以簡單的驗證字串格式。

建立一個正則表達式

一般使用斜槓表示開始及結束。

var firstRegExp = /a/;

正則表達式方法 test( )

在進入規則語法之前,先介紹正則表達式的一個簡單的測試方法 test( )test ( ) 方法用以表示參數字串是否符合正則表達式的字串格式。

var firstRegExp = /a/;
console.log(firstRegExp.test('abccc')); //true

上述範例建立一個正則表達式,規則爲含有 a 字元即可。檢測字串 'abccc',結果爲 true。

正則表達式規則語法

  1. 位置:^ 表示字串起始需符合字串格式;$ 表示字串結尾需符合字串格式
var startRegExp = /^ab/;
console.log(startRegExp.test('abccc')); //true
console.log(startRegExp.test('cccab')); //false
var endRegExp = /ab$/;
console.log(endRegExp.test('abccc')); //false
console.log(endRegExp.test('cccab')); //true
  1. 特殊意義字元:
  • 任意字元: . 表示任意單個字元,除了以下幾個行結束符以外 \n \r \u2028\u2029
var dotRegExp = /a.b/;
console.log(dotRegExp.test('acb')); //true
console.log(dotRegExp.test('accb')); //false
  • 任意數字: \d 代表任意數字,也等同於 [0~9];反之,\D 代表除了數字以外的字元,也等同於 [^0~9]。其中 [^] 內的皆爲不要的條件。
var numRegExp = /\d/;
console.log(numRegExp.test('123')); //true
console.log(numRegExp.test('ccc')); //false
  • 任意字母數字及底線: \w 代表所有字母、數字及底線,也等同於 [A-Za-z0-9_] ;反之,\W 代表除了所有字母、數字及底線以外的字元,也等同於 [^A-Za-z0-9_]
var mixRegExp = /\w/;
console.log(mixRegExp.test('1s3_')); //true
console.log(mixRegExp.test('?')); //false
  • 任意任何空白字元: \s 代表任何空白字元,包含換行、換頁符等,也等同於 [ \f\n\r\t\v];反之,\S 代表除了任何空白字元,包含換行、換頁符等以外的字元,也等同於 [^ \f\n\r\t\v] 。其中 \f 代表換頁符,在文件中表示另起一頁;\n 代表換行鍵,即換到下一行;\r 代表回車鍵,即回到行首;\t 代表 tab 鍵,在文件中代表推進到下一個定位點;\v 代表垂直製表符,與 tab 有點像,只是方向不同。
  1. 滿足其中一條件:選擇符 | ,滿足其中一個條件即可。
var orRegExp = /a|b/;
console.log(orRegExp.test('acc')); //true
console.log(orRegExp.test('ccb')); //true
console.log(orRegExp.test('ccc')); //false
  1. 連字符:- 代表連續的字符,爲一種簡易的縮寫方式。例如數字 1~5,可以寫成 [1–5]。例如英文字 b~g,可以寫成 [b–g]。注意連字符的使用一定要搭配方括號,否則會被解讀爲普通字元。
var continuousRegExp = /[1-5]/;
var nocontinuousRegExp = /1-5/;
console.log(continuousRegExp.test('2')); //true
console.log(nocontinuousRegExp.test('2')); //false
  1. 重複次數:
  • {}:使用大括號指定次數,{n} 只有一個數字代表指定次數;{n,m} 兩個數字時,代表介於 n~m 次;省略其中一個數字代表只指定下限或上限,例如 {n,} 代表至少 n 次,{,m} 代表低於 m 次。
var countRegExp = /a{1,5}/;
console.log(countRegExp.test('abaaa')); //true
console.log(countRegExp.test('bbbbb')); //false
  • ?:代表0或1次
var qRegExp = /a?/;
console.log(qRegExp.test('abbbb')); //true
console.log(qRegExp.test('bbbbb')); //true
  • *:代表0或多次
var starRegExp = /a*/;
console.log(starRegExp.test('abbbb')); //true
console.log(starRegExp.test('aaabb')); //true
console.log(starRegExp.test('bbbbb')); //true
  • +:代表出現只少一次,等同於{1, }
var addRegExp = /a+/;
console.log(addRegExp.test('abbbb')); //true
console.log(addRegExp.test('aaabb')); //true
console.log(addRegExp.test('bbbbb')); //false

6.修飾符:

  • g 修飾符:欲使比較對象爲字串全部時可以加上 g 修飾符,否則在一般狀況下可能只比較第一個符合的對象就停止了。
  • i 修飾符:表示比較條件不分大小寫
var testRegExp = /HELLO/;
console.log(testRegExp.test('hello')); //false
var testRegExp2 = /HELLO/i;
console.log(testRegExp2.test('hello')); //true
  • m 修飾符:表示比較條件可以區分換行
var testRegExp = /y$/;
console.log(testRegExp.test('hello my puppy\n')); //false
var testRegExp2 = /y$/m;
console.log(testRegExp2.test('hello my puppy\n')); //true

正則表達式結合字串方法

1.match():回傳比對後符合的結果陣列,若無符合對象,回傳 null

var aString = "hellomypuppy";
var aRegExp =/\d{1}/;
console.log(aString.match(aRegExp)); //null
var aRegExp2 =/\w/g;
console.log(aString.match(aRegExp2)); 
//["h", "e", "l", "l", "o", "m", "y", "p", "u", "p", "p", "y"]
  1. search():回傳搜尋第一個比對後符合結果的位置,如果沒有任何符合結果,就回傳 -1
var aString = "hellomypuppy";
var aRegExp =/\d{1}/;
var aRegExp2 =/h/;
console.log(aString.search(aRegExp));//-1
console.log(aString.search(aRegExp2));//0
  1. replace():替換比對後符合的值。接收兩個參數,第一個參數爲正則表達式,第二個參數爲欲替換的值。
var aString = "hellomypuppy";
var aRegExp =/\d/;
var aRegExp2 =/\w/;
console.log(aString.replace(aRegExp,1)); //hellomypuppy,沒有符合對象,所以不變
console.log(aString.replace(aRegExp2,1)); //1ellomypuppy

如果想要替換所有符合對象,就加上修飾符 g

var aRegExp3 =/\w/g;
console.log(aString.replace(aRegExp3,1)); //111111111111

以上是今天關於正則表達式的基礎理解,更多的撰寫方式可以參考 MDN,今天最大的收穫應該是以後看到正則表達式不會覺得是文言文了!如果記不起來查表也看得懂了,可喜可賀:) 耶~~~~~~


上一篇
Day29 說說 Array 那些方法們
系列文
前端之 " wow~原來是這樣啊 "30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言