javascript類型系統(tǒng)_正則表達(dá)式RegExp類型詳解

更新時(shí)間：2016年06月24日 08:50:43 投稿：jingxian

下面小編就為大家?guī)?lái)一篇javascript類型系統(tǒng)_正則表達(dá)式RegExp類型詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前面的話

前面已經(jīng)介紹過(guò)javascript中正則表達(dá)式的基礎(chǔ)語(yǔ)法。javascript的RegExp類表示正則表達(dá)式，String和RegExp都定義了方法，使用正則表達(dá)式可以進(jìn)行強(qiáng)大的模式匹配和文本檢索與替換。本文將介紹正則表達(dá)式的RegExp對(duì)象，以及正則表達(dá)式涉及
到的屬性和方法

對(duì)象

javascript中的正則表達(dá)式用RegExp對(duì)象表示，有兩種寫法：一種是字面量寫法；另一種是構(gòu)造函數(shù)寫法

Perl寫法

正則表達(dá)式字面量寫法，又叫Perl寫法，因?yàn)閖avascript的正則表達(dá)式特性借鑒自Perl

正則表達(dá)式字面量定義為包含在一對(duì)斜杠(/)之間的字符，并且可以設(shè)置3個(gè)標(biāo)志

var expression = /pattern/flags;

正則表達(dá)式的匹配模式支持下列3個(gè)標(biāo)志：

g: 表示全局(global)模式，即模式將被應(yīng)用于所有字符串，而非在發(fā)現(xiàn)第一個(gè)匹配項(xiàng)時(shí)立即停止

i: 表示不區(qū)分大小寫(case-insensitive)模式，即在確定匹配項(xiàng)時(shí)忽略模式與字符串的大小寫

m: 表示多行(multiline)模式，即在到達(dá)一行文本末尾時(shí)還會(huì)繼續(xù)查找下一行中是否存在與模式匹配的項(xiàng)

//匹配字符串所有'at'的實(shí)例
var p = /at/g;
//test()方法返回一個(gè)布爾值表示是否可以找到匹配項(xiàng)
console.log(p.test('ata'));//true
console.log(p.test('aba'));//false

RegExp構(gòu)造函數(shù)

和普通的內(nèi)置對(duì)象一樣，RegExp正則表達(dá)式對(duì)象也支持new+RegExp()構(gòu)造函數(shù)的形式

RegExp構(gòu)造函數(shù)接收兩個(gè)參數(shù)：要匹配的字符串模式(pattern)和可選的標(biāo)志字符串(flags)，標(biāo)志字符串和字面量的三個(gè)標(biāo)志含義相同：'g'、'i'、'm'

RegExp構(gòu)造函數(shù)的兩個(gè)參數(shù)都是字符串。且使用字面量形式定義的任何表達(dá)式都可使用構(gòu)造函數(shù)

//匹配字符串所有'at'的實(shí)例
var p1 = /at/g;
//同上
var p2 = new RegExp('at','g');

[注意]ECMAScript3規(guī)范規(guī)定，一個(gè)正則表達(dá)式直接量會(huì)在執(zhí)行到它時(shí)轉(zhuǎn)換為一個(gè)RegExp對(duì)象，同一段代碼所表示正則表達(dá)式直接量的每次運(yùn)算都返回同一個(gè)對(duì)象。ECMAScript5規(guī)范則做了相反的規(guī)定，同一段代碼所表示的正則表達(dá)式直接量的每次

運(yùn)算都返回新對(duì)象。IE6-8一直是按照ECMAScript5規(guī)范的方式實(shí)現(xiàn)的，所以并沒(méi)有兼容性問(wèn)題

由于正則表達(dá)式字面量并不支持變量，所以如果正則表達(dá)式中出現(xiàn)變量只能使用RegExp構(gòu)造函數(shù)以字符串拼接的形式，將變量拼接到RegExp構(gòu)造函數(shù)的參數(shù)中

【tips】通過(guò)類名classname獲取元素

function getByClass(obj,classname){
  var elements = obj.getElementsByTagName('*');
  var result = [];
  var pattern = new RegExp( '(^|\\s)'+ classname + '(\\s|$)');
  for(var i = 0; i < elements.length; i++){
    if(pattern.test(elements[i].className)){
      result.push(elements[i]);
    }
  }
  return result;
}

實(shí)例屬性

每個(gè)RegExp實(shí)例對(duì)象都包含如下5個(gè)屬性

global:　　  布爾值，表示是否設(shè)置了g標(biāo)志
ignoreCase: 布爾值，表示是否設(shè)置了i標(biāo)志
lastIndex:  整數(shù)，表示開(kāi)始搜索下一個(gè)匹配項(xiàng)的字符位置，從0算起
multiline:  布爾值，表示是否設(shè)置了標(biāo)志m
source: 　　 正則表達(dá)式的字符串表示，按照字面量形式而非傳入構(gòu)造函數(shù)中的字符串模式返回

var pattern = new RegExp('\\[bc\\]at','i');
console.log(pattern.global);//false
console.log(pattern.ignoreCase);//true  
console.log(pattern.multiline);//false
console.log(pattern.lastIndex);//0
console.log(pattern.source);//'\[bc\]at'

如果使用RegExp的exec()或test()函數(shù)，并且設(shè)定了全局模式'g'，正則表達(dá)式的匹配就會(huì)從lastIndex的位置開(kāi)始，并且在每欠匹配成功之后重新設(shè)定lastIndex。這樣，就可以在字符串中重復(fù)迭代，依次尋找各個(gè)匹配結(jié)果。但是，如果需要對(duì)不同字符串調(diào)用同一個(gè)RegExp的exec()或test()方法，這個(gè)變量也也可能會(huì)帶來(lái)意料之外的匹配結(jié)果，所以在更換字符串時(shí)，要顯式地將RegExp的lastIndex置為0

//exec()方法以數(shù)組形式返回匹配項(xiàng)
var p = /\w/g;
var s = 'ab';
console.log(p.lastIndex);//0
console.log(p.exec(s));//['a']
console.log(p.lastIndex);//1
console.log(p.exec(s));//['b']
console.log(p.lastIndex);//2
console.log(p.exec(s));//null
console.log(p.lastIndex);//0

var p = /\w/g;
var s1 = 'ab';
var s2 = 'ba';
console.log(p.lastIndex);//0
console.log(p.exec(s1));//['a']
console.log(p.lastIndex);//1
console.log(p.exec(s2));//['a']
console.log(p.lastIndex);//2

構(gòu)造函數(shù)屬性

RegExp構(gòu)造函數(shù)屬性被看成靜態(tài)屬性，這些屬性基于所執(zhí)行的最近一次正則表達(dá)式操作而變化

有兩種方式訪問(wèn)它們，即長(zhǎng)屬性名和短屬性名。短屬性名大都不是有效的ECMAScript標(biāo)識(shí)符，所以必須通過(guò)方括號(hào)語(yǔ)法來(lái)訪問(wèn)它們

長(zhǎng)屬性名    短屬性名    　　　　   說(shuō)明
input       $_        最近一次要匹配的字符串
lastMatch     $&        最近一次的匹配項(xiàng)
lastParen     $+        最近一次匹配的捕獲組
leftContext    $`        input字符串中l(wèi)astMatch之前的文本
multiline     $*        布爾值，表示是否所有表達(dá)式都使用多行模式
rightContext   $'        Input字符串中l(wèi)astMarch之后的文本

使用這些屬性，可以從exec()方法或test()方法執(zhí)行的操作中提取出更具體的信息

//test()用于測(cè)試一個(gè)字符串是否匹配某個(gè)正則表達(dá)式，并返回一個(gè)布爾值
var text = 'this has been a short summer';
var pattern = /(.)hort/g;
if(pattern.test(text)){
  console.log(RegExp.input);//'this has been a short summer'
  console.log(RegExp.leftContext);//'this has been a '
  console.log(RegExp.rightContext);//' summer'
  console.log(RegExp.lastMatch);//'short'
  console.log(RegExp.lastParen);//'s'
  console.log(RegExp.multiline);//false
  console.log(RegExp['$_']);//'this has been a short summer'
  console.log(RegExp['$`']);//'this has been a '
  console.log(RegExp["$'"]);//' summer'
  console.log(RegExp['$&']);//'short'
  console.log(RegExp['$+']);//'s'
  console.log(RegExp['$*']);//false    
}

javascript有9個(gè)用于存儲(chǔ)捕獲組的構(gòu)造函數(shù)屬性，在調(diào)用exec()或test()方法時(shí)，這些屬性會(huì)被自動(dòng)填充

[注意] 理論上，應(yīng)該保存整個(gè)表達(dá)式匹配文本的RegExp.$0并不存在，值為undefined

//RegExp.$1\RegExp.$2\RegExp.$3……到RegExp.$9分別用于存儲(chǔ)第一、第二……第九個(gè)匹配的捕獲組
var text = 'this has been a short summer';
var pattern = /(..)or(.)/g;
if(pattern.test(text)){
  console.log(RegExp.$1);//sh
  console.log(RegExp.$2);//t
}

實(shí)例方法

RegExp對(duì)象的實(shí)例方法共5個(gè)，分為兩類。包括toString()、toLocalString()、valueOf()這3種對(duì)象通用方法和test()、exec()正則匹配方法

對(duì)象通用方法

RegExp對(duì)象繼承了Object對(duì)象的通用方法toString()、toLocaleString()、valueOf()這三個(gè)方法

【toString()】

toString()方法返回正則表達(dá)式的字面量

【toLocaleString()】

toLocaleString()方法返回正則表達(dá)式的字面量

【valueOf()】

valueOf()方法返回返回正則表達(dá)式對(duì)象本身

[注意]不論正則表達(dá)式的創(chuàng)建方式是哪種，這三個(gè)方法都只返回其字面量形式

var pattern = new RegExp('[bc]at','gi');
console.log(pattern.toString()); // '/[bc]at/gi'
console.log(pattern.toLocaleString()); // '/[bc]at/gi'
console.log(pattern.valueOf()); // /[bc]at/gi

var pattern = /[bc]at/gi;
console.log(pattern.toString()); // '/[bc]at/gi'
console.log(pattern.toLocaleString()); // '[bc]at/gi'
console.log(pattern.valueOf()); // /[bc]at/gi

正則匹配方法

正則表達(dá)式RegExp對(duì)象的正則匹配方法只有兩個(gè)：分別是exec()和test()

【exec()】

exec()方法專門為捕獲組而設(shè)計(jì)，接受一個(gè)參數(shù)，即要應(yīng)用模式的字符串。然后返回包含匹配項(xiàng)信息的數(shù)組，在沒(méi)有匹配項(xiàng)的情況下返回null

在匹配項(xiàng)數(shù)組中，第一項(xiàng)是與整個(gè)模式匹配的字符串，其他項(xiàng)是與模式中的捕獲組匹配的字符串，如果模式中沒(méi)有捕獲組，則該數(shù)組只包含一項(xiàng)

返回的數(shù)組包含兩個(gè)額外的屬性：index和input。index表示匹配項(xiàng)在字符串的位置，input表示應(yīng)用正則表達(dá)式的字符串

var text = 'mom and dad and baby and others';
var pattern = /mom( and dad( and baby)?)?/gi;
var matches = pattern.exec(text);
console.log(pattern,matches);
//pattern.lastIndex:20
//matches[0]:'mom and dad and baby'
//matches[1]:' and dad and baby'
//matches[2]:' and baby'
//matches.index:0
//matches.input:'mom and dad and baby and others'

對(duì)于exec()方法而言，即使在模式中設(shè)置了全局標(biāo)志(g)，它每次也只會(huì)返回一個(gè)匹配項(xiàng)。在不設(shè)置全局標(biāo)志的情況下，在同一個(gè)字符串上多次調(diào)用exec()，將始終返回第一個(gè)匹配項(xiàng)的信息；而在設(shè)置全局標(biāo)志的情況下，每次調(diào)用exec()都會(huì)在字符串中繼續(xù)查找新匹配項(xiàng)

var text = 'cat,bat,sat,fat';
var pattern1 = /.at/;
var matches = pattern1.exec(text);
console.log(pattern1,matches);
//pattern1.lastIndex:0
//matches[0]:'cat'
//matches.index:0
//matches.input:'cat,bat,sat,fat'

var text = 'cat,bat,sat,fat';
matches = pattern1.exec(text);  
console.log(pattern1,matches);  
//pattern1.lastIndex:0
//matches[0]:'cat'
//matches.index:0
//matches.input:'cat,bat,sat,fat'

var text = 'cat,bat,sat,fat';
var pattern2 = /.at/g;
var matches = pattern2.exec(text);
console.log(pattern2,matches);  
//pattern2.lastIndex:3
//matches[0]:'cat'
//matches.index:0
//matches.input:'cat,bat,sat,fat'

var text = 'cat,bat,sat,fat';
matches = pattern2.exec(text);
console.log(pattern2,matches);  
//pattern2.lastIndex:7
//matches[0]:'bat'
//matches.index:4
//matches.input:'cat,bat,sat,fat'

【tips】用exec()方法找出匹配的所有位置和所有值

var string = 'j1h342jg24g234j 3g24j1';
var pattern = /\d/g;
var valueArray = [];//值
var indexArray = [];//位置
var temp;
while((temp=pattern.exec(string)) != null){
  valueArray.push(temp[0]);
  indexArray.push(temp.index); 
}
//["1", "3", "4", "2", "2", "4", "2", "3", "4", "3", "2", "4", "1"] [1, 3, 4, 5, 8, 9, 11, 12, 13, 16, 18, 19, 21]
console.log(valueArray,indexArray);

【test()】

test()方法用來(lái)測(cè)試正則表達(dá)式能否在字符串中找到匹配文本，接收一個(gè)字符串參數(shù)，匹配時(shí)返回true，否則返回false

var text = '000-00-000';
var pattern = /\d{3}-\d{2}-\d{4}/;
if(pattern.test(text)){
  console.log('The pattern was matched');
}

同樣地，在調(diào)用test()方法時(shí)，會(huì)造成RegExp對(duì)象的lastIndex屬性的變化。如果指定了全局模式，每次執(zhí)行test()方法時(shí)，都會(huì)從字符串中的lastIndex偏移值開(kāi)始嘗試匹配，所以用同一個(gè)RegExp多次驗(yàn)證不同字符串，必須在每次調(diào)用之后，將lastIndex值置為0

var pattern = /^\d{4}-\d{2}-\d{2}$/g;
console.log(pattern.test('2016-06-23'));//true
console.log(pattern.test('2016-06-23'));//false

//正確的做法應(yīng)該是在驗(yàn)證不同字符串前，先將lastIndex重置為0
var pattern = /^\d{4}-\d{2}-\d{2}$/g;
console.log(pattern.test('2016-06-23'));//true
pattern.lastIndex = 0;
console.log(pattern.test('2016-06-23'));//true

前面介紹過(guò)，javascript有9個(gè)用于存儲(chǔ)捕獲組的構(gòu)造函數(shù)屬性，在調(diào)用exec()或test()方法時(shí)，這些屬性會(huì)被自動(dòng)填充

[注意]理論上，應(yīng)該保存整個(gè)表達(dá)式匹配文本的RegExp.$0并不存在，值為undefined

if(/^(\d{4})-(\d{2})-(\d{2})$/.test('2016-06-23')){
  console.log(RegExp.$1);//'2016'
  console.log(RegExp.$2);//'06'
  console.log(RegExp.$3);//'23'
  console.log(RegExp.$0);//undefined
}

以上就是小編為大家?guī)?lái)的javascript類型系統(tǒng)_正則表達(dá)式RegExp類型詳解全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: