JS經典Regex筆試題匯總_javascript技巧

本文執行個體總結了JS經典Regex筆試題。分享給大家供大家參考，具體如下：

一.複習字串的傳統操作

如何擷取一個字串中的數字字元，並按數組形式輸出，如

dgfhfgh254bhku289fgdhdy675gfh

輸出[254,289,675]

分析：迴圈用charAt()的方法擷取到每一個子字串，判斷他是不是在0~9之間，是就把他扔到準備好的數組裡

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);  } }}

但是這樣會輸出[2,5,4,2,8,9,6,7,5]和我們想要的結果有點偏差，於是我們需要一個新的空的字串，每次碰到是數字走if，碰到字元走else，走else的時候把之前那些數字存放到新的空的字串裡，然後通過push添加到數組，然後清Null 字元串，一以便下次重新存放

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)}

還有個隱患：如果最後以數字結尾，則最後不會進入else，最後幾位元字會讀不到，因此for迴圈外面再添加一遍else裡面的if迴圈

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

正則：也叫做規則，讓電腦能夠讀懂人類的規則

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

比如註冊頁面輸入使用者名稱，我們給定一套規則，判斷他輸入的對不對

*範圍？

正則都是用來操作字串的(即不要用他去操作對象什麼的)

*怎麼寫？

正則也是一個系統對象，跟數組、json一樣，也有個寫法規則

簡寫   var re=//;  //唯寫兩斜杠，瀏覽器會認為是注釋，所以盡量不要給他為空白，注意兩斜杠之間不要有引號

全稱   var re=new RegExp();  //Reg是正則的簡寫，Exp是運算式的簡寫

大部分情況用簡寫，只有一種情況用全稱寫法：正則需要傳參的時候

註：全稱寫法用到\時，需要兩個\\，否則是逸出字元

三.Regex的常用方法

1.test

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

寫法：正則.test(字串)

如：

var str='abcdef';var re=/b/; //bc一個整體也在字串中，彈出true，但是寫bd，彈出false，因為字串中沒有bd這麼一個整體alert(re.test(str));

彈出true

擴充：

檢測一個字串是不是全是數字

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

兩斜杠之間要寫什麼呢？引入逸出字元

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

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

\w(\W):字元(非字元)   字元包括字母、數字、底線

2.search

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

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

如：

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

正則中的預設：是區分大小寫

如果要不區分大小寫，在正則的最後加標識i

var re=/B/i

完整寫法：

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

3.match

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

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

比如上面例子要找出數字

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

為什麼後面的不找了？

正則預設：正則匹配成功就會結束，不會繼續匹配

如果想要全部尋找，就要加標識g(全域匹配)

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

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

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

但是個數不一定時怎麼找，引進量詞

量詞：匹配不確定的位置

+：至少出現一次

var re=/\d+/g;

就實現上面的效果了

4.replace

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

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

如:

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

敏感詞過濾例子

str.replace(re,"*");

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

|：或的意思

新的問題：所有敏感詞都會替換成一顆星，怎樣做到幾個字幾顆星呢？

replace()的第二個參數，可以是字串，可以是回呼函數

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

現在和上面那句話作用一樣

回呼函數的第一個參數，就是匹配成功的字元，即可以通過第一個參數的長度，來給他返回幾顆星

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

四.Regex字元類

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

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

例子：過濾標籤

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

var re=/<[\w\W]+>/g;  //中括弧裡是或的關係，也就是字元或非字元都有了，包括了斜杠，引號等

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

五.Regex逸出字元

.(點):任一字元       \.:真正的點

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

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

\w(\W):字元(非字元)   字元包括字母、數字、底線

\數字:重複子項(\1:重複的第一個子項，\2:重複的第二個子項...)

var str="abca";var re=/(a)(b)(c)\1/ ; //true,為什麼不用var re=/(a)(b)(c)\a/ ;一樣能匹配成功，\數字，用於不確定的子項字元var re=/(a)(b)(c)\2/ ; //falsealert(re.teat(str));

例子：找某個字串中出現最多的字元和它一共出現多少次

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

沒有\1,re就是一整個排好序的字串，有了\1就是出現過的有重複的取出來像這樣bbb...,hh

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

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

如：

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

獨立部分應用舉例

之前有用到用封裝好的函數來擷取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;};

這個會有bug

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

用這個方法擷取box1，只能擷取到第一個

用正則來改寫

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;};

六.量詞

不確定的字元個數

量詞：{}

{4,7}   最少出現4次，最多出現7次

{4,}     最少出現4次

{4}      正好出現4次

+是{}的簡寫，相當於(1,)

? 相當於{0,1}    //出現0次或者1次

* 相當於{0,}     //至少出現0次，可以沒有

七.正則收尾

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

$:正則的最後，表示結束的意思

例子：去掉字串裡的空格

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

例子：檢測郵箱

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款非常方便的Regex工具供大家參考使用：

JavaScriptRegex線上測試載入器：
http://tools.jb51.net/regex/javascript

Regex線上產生工具：
http://tools.jb51.net/regex/create_reg

更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScriptRegex技巧大全》、《JavaScript替換操作技巧總結》、《JavaScript尋找演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍曆演算法與技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所協助。