本文實(shí)例總結(jié)了JS經(jīng)典正則表達(dá)式筆試題。分享給大家供大家參考，具體如下：

一.復(fù)習(xí)字符串的傳統(tǒng)操作

如何獲取一個(gè)字符串中的數(shù)字字符，并按數(shù)組形式輸出，如

dgfhfgh254bhku289fgdhdy675gfh

輸出[254,289,675]

分析：循環(huán)用charAt()的方法獲取到每一個(gè)子字符串，判斷他是不是在0~9之間，是就把他扔到準(zhǔn)備好的數(shù)組里

var str="dgfhfgh254bhku289fgdhdy675gfh";
findNum(str);
function findNum(){
 var arr=[];
 for(var i=0;i<str.length;i++){
  if(str.charAt(i)<='9'&&str.charAt(i)>='0'){
   arr.push(str.charAt(i));
   alert(arr);
  }
 }
}

但是這樣會(huì)輸出[2,5,4,2,8,9,6,7,5]和我們想要的結(jié)果有點(diǎn)偏差，于是我們需要一個(gè)新的空的字符串，每次碰到是數(shù)字走if，碰到字符走else，走else的時(shí)候把之前那些數(shù)字存放到新的空的字符串里，然后通過(guò)push添加到數(shù)組，然后清空字符串，一以便下次重新存放

var str="dgfhfgh254bhku289fgdhdy675";
findNum(str);
function findNum(){
 var arr=[];
 var result="";
 for(var i=0;i<str.length;i++){
  if(str.charAt(i)<='9'&&str.charAt(i)>='0'){
   result+=str.charAt(i);  //注意添加方向不要反了
  }
  else{
   if(result){
    arr.push(result);
    result="";
   }
  }
 }
 alert(arr)
}

還有個(gè)隱患：如果最后以數(shù)字結(jié)尾，則最后不會(huì)進(jìn)入else，最后幾位數(shù)字會(huì)讀不到，因此for循環(huán)外面再添加一遍else里面的if循環(huán)

二.什么是正則，有什么用

正則：也叫做規(guī)則，讓計(jì)算機(jī)能夠讀懂人類的規(guī)則

*前端哪些地方用到正則?

比如注冊(cè)頁(yè)面輸入用戶名，我們給定一套規(guī)則，判斷他輸入的對(duì)不對(duì)

*范圍？

正則都是用來(lái)操作字符串的(即不要用他去操作對(duì)象什么的)

*怎么寫？

正則也是一個(gè)系統(tǒng)對(duì)象，跟數(shù)組、json一樣，也有個(gè)寫法規(guī)則

簡(jiǎn)寫   var re=//;  //只寫兩斜杠，瀏覽器會(huì)認(rèn)為是注釋，所以盡量不要給他為空，注意兩斜杠之間不要有引號(hào)

全稱   var re=new RegExp();  //Reg是正則的簡(jiǎn)寫，Exp是表達(dá)式的簡(jiǎn)寫

大部分情況用簡(jiǎn)寫，只有一種情況用全稱寫法：正則需要傳參的時(shí)候

注：全稱寫法用到\時(shí)，需要兩個(gè)\\，否則是轉(zhuǎn)義字符

三.正則表達(dá)式的常用方法

1.test

正則去匹配字符串，如果匹配成功就返回真，匹配失敗就返回假

寫法：正則.test(字符串)

如：

var str='abcdef';
var re=/b/; //bc一個(gè)整體也在字符串中，彈出true，但是寫bd，彈出false，因?yàn)樽址袥](méi)有bd這么一個(gè)整體
alert(re.test(str));

彈出true

擴(kuò)展：

檢測(cè)一個(gè)字符串是不是全是數(shù)字

var str='8621t56461';
var re=//;
if(re.test(str)){
 alert("不全是數(shù)字");
}
else{
 alert("全是數(shù)字");
}

兩斜杠之間要寫什么呢？引入轉(zhuǎn)義字符

\s(\S):空格(非空格)

\d(\D):數(shù)字(非數(shù)字)

\w(\W):字符(非字符)   字符包括字母、數(shù)字、下劃線

2.search

正則去匹配字符串，如果匹配成功，就返回匹配成功的位置，如果匹配失敗就返回-1

search的寫法：字符串.search(正則)

如：

var str="abcdef";
var re=/b/;
alert(str.search(re));
//返回1
var re=/w/;
//返回-1
var re=/B/;
//返回-1

正則中的默認(rèn)：是區(qū)分大小寫的

如果要不區(qū)分大小寫，在正則的最后加標(biāo)識(shí)i

var re=/B/i

完整寫法：

var re=new RegExp("B","i");

3.match

正則去匹配字符串，如果匹配成功，就返回匹配成功的數(shù)組，如果匹配不成功，就返回null

match的寫法：字符串.match(正則)

比如上面例子要找出數(shù)字

var str="dgfhfgh254bhku289fgdhdy675";
var re=/\d/;
alert(str.match(re));
//輸出2

為什么后面的不找了？

正則默認(rèn)：正則匹配成功就會(huì)結(jié)束，不會(huì)繼續(xù)匹配

如果想要全部查找，就要加標(biāo)識(shí)g(全局匹配)

var re=/\d/g;
//輸出2,5,4,2,8,9,6,7,5

跟我們想要的結(jié)果還是有偏差，如果要連著找到，而不是一個(gè)個(gè)分開，則需要

var re=/\d\d/g; //兩個(gè)兩個(gè)找
var re=/\d\d\d/g; //三個(gè)三個(gè)找

但是個(gè)數(shù)不一定時(shí)怎么找，引進(jìn)量詞

量詞：匹配不確定的位置

+：至少出現(xiàn)一次

var re=/\d+/g;

就實(shí)現(xiàn)上面的效果了

4.replace

正則去匹配字符串，匹配成功的字符去替換新的字符串

replace的寫法：字符串.replace(正則，新的字符串)

如:

var str="aaa";
var re=/a/;
str=str.replace(re,"b");
alert(str);
//輸出baa

敏感詞過(guò)濾例子

str.replace(re,"*");

但是如果有很多詞要過(guò)濾，不能寫成一整段，這樣匹配不到，怎樣把一個(gè)詞一個(gè)詞分開呢

|：或的意思

新的問(wèn)題：所有敏感詞都會(huì)替換成一顆星，怎樣做到幾個(gè)字幾顆星呢？

replace()的第二個(gè)參數(shù)，可以是字符串，可以是回調(diào)函數(shù)

str.replace(re,function(){
 return '*';
});

現(xiàn)在和上面那句話作用一樣

回調(diào)函數(shù)的第一個(gè)參數(shù)，就是匹配成功的字符，即可以通過(guò)第一個(gè)參數(shù)的長(zhǎng)度，來(lái)給他返回幾顆星

str.replace(re,function(str){
 var result='';
 for(var i=0;i<str.length;i++){
  result+='*';
 }
 return result;
});

四.正則表達(dá)式字符類

字符類：一組相似的元素(用[]表示[]的整體代表一個(gè)字符,()是分組和子項(xiàng)的意思)

1.任意字符

[abc]

如o[usb]t--obt、ost、out

2.范圍

[a-z]、[0-9]

如id[0-9]--id0、id5

3.排除

[^a]

如o[^0-9]t--oat、o?t、o t

例子：過(guò)濾標(biāo)簽

過(guò)濾掉<>(如<div>、</div>、<h2 class="sfsdf">)

var re=/<[\w\W]+>/g;  //中括號(hào)里是或的關(guān)系，也就是字符或非字符都有了，包括了斜杠，引號(hào)等

另一種做法:    var re=/<[^>]+>/g;

五.正則表達(dá)式轉(zhuǎn)義字符

.(點(diǎn)):任意字符       \.:真正的點(diǎn)

\s(\S):空格(非空格)

\d(\D):數(shù)字(非數(shù)字)

\w(\W):字符(非字符)   字符包括字母、數(shù)字、下劃線

\數(shù)字:重復(fù)子項(xiàng)(\1:重復(fù)的第一個(gè)子項(xiàng)，\2:重復(fù)的第二個(gè)子項(xiàng)...)

var str="abca";
var re=/(a)(b)(c)\1/ ; //true,為什么不用var re=/(a)(b)(c)\a/ ;一樣能匹配成功，\數(shù)字，用于不確定的子項(xiàng)字符
var re=/(a)(b)(c)\2/ ; //false
alert(re.teat(str));

例子：找某個(gè)字符串中出現(xiàn)最多的字符和它一共出現(xiàn)多少次

var str="vbbbbhybbfhbbgbbb";
var arr=str.split("");
str=arr.sort().join("");
var value=""; //存放出現(xiàn)最多的字符
var index=0; //存放次數(shù)
var re=/(\w)\1+/g;

沒(méi)有\(zhòng)1,re就是一整個(gè)排好序的字符串，有了\1就是出現(xiàn)過(guò)的有重復(fù)的取出來(lái)像這樣bbb...,hh

str.replace(re,function($0,$1){ //$0代表整體，$1代表第一個(gè)子項(xiàng)
 if(index<$0.length){ //$0:每一組重復(fù)的元素
  index=$0.length;
  value=$1;
 }
})
alert('出現(xiàn)最多的字符是'+value+',出現(xiàn)次數(shù)是'+index);

\b(\B):獨(dú)立的部分(非獨(dú)立的部分)  獨(dú)立的部分(起始、結(jié)束、空格)

如：

var str="onetwo";
var re=/\bone/; //起始位置,true
var re=/one\b/; //false，要true,one和two之間加空格或者只有one
alert(re.test(str));

獨(dú)立部分應(yīng)用舉例

之前有用到用封裝好的函數(shù)來(lái)獲取className

function getByClass(oparent,sClass){
 var aEle=oparent.getElementsByTagName("*");
 var aResult=[];
 var i;
 for(i=0;i<aEle.length;i++){
  if(aEle[i].className==sClass){
   aResult.push(aEle[i]);
  }
 }
 return aResult;
};

這個(gè)會(huì)有bug

<div class="box1"></div>
<div class="box1box2"></div>
<div class="box1 box2"></div>

用這個(gè)方法獲取box1，只能獲取到第一個(gè)

用正則來(lái)改寫

function getByClass(oparent,sClass){
 var aEle=oparent.getElementsByTagName("*");
 var aResult=[];
 var i;
 var re=new RegExp('\\b'+sClass+'\\b')
 for(i=0;i<aEle.length;i++){
  if(re.test(aEle[i].className)){
   aResult.push(aEle[i]);
  }
 }
 return aResult;
};

六.量詞

不確定的字符個(gè)數(shù)

量詞：{}

{4,7}   最少出現(xiàn)4次，最多出現(xiàn)7次

{4,}     最少出現(xiàn)4次

{4}      正好出現(xiàn)4次

+是{}的簡(jiǎn)寫，相當(dāng)于(1,)

? 相當(dāng)于{0,1}    //出現(xiàn)0次或者1次

* 相當(dāng)于{0,}     //至少出現(xiàn)0次，可以沒(méi)有

七.正則收尾

^:正則的最開始位置，表示起始的意思

$:正則的最后，表示結(jié)束的意思

例子：去掉字符串里的空格

var re=/^\s+|\s+$/g;
str.replace(re,"");

例子：檢測(cè)郵箱

var re=/^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/;

八.前向聲明和反前向聲明

(?=) :前向聲明

(?!):反前向聲明

舉例

var str="abacad";
var re=/a(?=b)/g;
str=str.replace(re,"*");
alert(str);

輸出:*bacad

如果改為

var re=/a(?!b)/g;

輸出：ab*c*d

PS：這里再為大家提供2款非常方便的正則表達(dá)式工具供大家參考使用：

JavaScript正則表達(dá)式在線測(cè)試工具：
http://tools.jb51.net/regex/javascript

正則表達(dá)式在線生成工具：
http://tools.jb51.net/regex/create_reg

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript正則表達(dá)式技巧大全》、《JavaScript替換操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論