JavaScript 正規表示...LOGIN

JavaScript 正規表示式

語法

定義

JavaScript種正規表示式有兩種定義方式,定義一個符合類似 <%XXX%> 的字串

#1. 建構子

var reg=new RegExp('<%[^%>]+%>','g');

#2. 字面量

var reg=/<%[^%>]%>/g;

g: global,全文搜索,預設搜尋到第一個結果接停止

i: ingore case,忽略大小寫,預設大小寫敏感

m: multiple lines,多行搜尋(更改^ 和$的含義,使它們分別在任意一行對待行首和行尾匹配,而不僅僅在整個字符串的開頭和結尾匹配)


#元字元

正規表示式讓人望而卻步以一個重要原因就是其轉義字元太多了,組合非常之多,但是正則表達式的元字元(在正則表達式中具有特殊意義的專用字符,可以用來規定其前導字符)並不多

元字符:( [ { \ ^ $ | ) ? * + .

並不是每個元字符都有其特定意義,在不同的組合中元字符有不同的意義,分類看一下

預定義特殊字符

字符   含義   

#\ t    水平製表符   

\r    回車符號   

\n    換行符   

#\f    換頁符號與對應的控制編號與# 字元(Ctrl+X)    

##\v    垂直製表符   

\0    空白字元   


大字元字元字元類別

簡單類別

原則上正規的一個字符對應一個字符,我們可以用[]把它們括起來,讓[]這個整體對應一個字符。如


alert(/ruby/.test("ruby"));//true

alert( /[abc]/.test("a"));//true

#alert(/[abc]/.test("b"));//true

alert(/[abc]/.test("c"));//true

alert("a bat ,a Cat, a fAt bat ,a faT cat".match(/[bcf]at/gi));//bat,Cat,fAt,bat,faT,cat


 負向類別

也是在那個括號裡做文章,前面加個元字元進行取反,表示匹配不能為括號裡面的字元。

alert(/[^abc]/.test("a"));//false

alert(/[^abc]/.test("b"));//false

#alert(/[^abc]/.test("6"));/ /true

alert(/[^abc]/.test("gg"));//true

   

#範圍類別

還是在那個中括號裡面做文章。有時匹配的東西太多,而且類型又相同,全部輸入太麻煩,我們可以使用它。特徵就是在中間加了一條橫線。

組合類別

還是在那個中括號裡面做文章。允許用中括號匹配不同類型的單一字元。

alert(/[a-f]/.test("b"));//true

alert (/[a-f]/.test("k"));//false

#alert(/[a-z]/.test("h"));//true

alert(/[A-Z]/.test("gg"));//false

alert(/[^H-Y]/ .test("G"));//true

alert(/[0-9]/.test("8"));//true

alert(/[^7-9]/.test("6"));//true

alert(/[a- m1-5\n]/.test("a"))//true

#alert(/[a-m1-5\n]/.test(" 3"))//true

alert(/[a-m1-5\n]/.test(a))//true

alert(/[a-m1-5\n]/.test("r"))//false


##預設類別   


字元   

等同於     描述


#.    [^\n\r]    除了換行和回車之外的任一字元   

\d    [0-9]       

##\D  -9]    非數字字元   

\s    [ \t\n\x0B\f\r]    空白字元   

\S    [ 空白字元   

\w    [a-zA-Z_0-9]    單字字元(所有的字母)    

\W    [^a-zA-Z_0-9] #   非單字字元#   [^a-zA-Z_0-9] #   非單字字元#   


#alert(/\d/.test("3"))//true

#alert(/\d/.test("w "))//false

alert(/\D/.test("w"))//true

alert(/ \w/.test("w"))//true

alert(/\w/.test("司"))//false

alert(/\W/.test("徒"))//true

#alert(/\s/.test(" "))//true

alert(/\S/.test(" "))//false

alert(/\S/.test("正"))//true

alert(/./.test("美"))//true

#alert(/ ./.test("  "))//true

alert(/./.test(a))//true


支援正規表示式的String物件的方法
 

1. search()方法;

此方法用於檢索字串中指定的子字串,或檢索與正規表示式相符的字串。

       基本語法:stringObject.search(regexp);

      @param 參數regexp可以需要在stringObject中檢索的字串,也可以 是需要檢索的RegExp物件。

      @return(傳回值) stringObject中第一個與regexp物件相符的子字串的起 始位置。如果沒有找到任何匹配的子字串,則返回-1;

    注意:search()方法不執行全域匹配,它將忽略標誌g,同時它也沒有regexp物件的lastIndex的屬性,且總是從字串開始位置進行查找,總是傳回的是stringObject匹配的第一個位置。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "Visit W3cSchool!"; 
    var n = str.search(/3c/i);
    document.getElementById("demo").innerHTML = n;
}
</script>
</body>
</html>

  

2. match()方法;此方法用於在字串內檢索指定的值,或找到一個或更多個正規表示式的符合。此方法類似indexOf()或lastIndexOf(); 但是它傳回的是指定的值,而不是字串的位置;

基本語法:

   stringObject.match(searchValue) 或stringObject.match(regexp)

   @param(參數) 

   searchValue 需要擷取字串的值;

    regexp: 需要符合模式的RegExp物件;

    regexp: 需要符合模式的RegExp物件;

###    regexp: 需要符合模式的RegExp物件;###

   @return(回傳值) 存放符合成功的陣列; 它可以全域匹配模式,全域匹配的話,它回傳的是一個陣列。如果沒有找到任何的一個匹配,那麼它將返回的是null;返回的數組內有三個元素,第一個元素的存放的是匹配的文本,還有二個對象屬性;index屬性表明的是匹配文本的起始字元在stringObject中的位置;input屬性宣告的是stringObject物件的參考;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "hello world"; 
    var n = str.match("world");
    document.getElementById("demo").innerHTML = n;
}
</script>
</body>
</html>

  3. replace()方法:

#此方法用於在字串中使用一些字元來取代另一些字符,或取代一個與正規表示式相符的子字串;

    基本語法:stringObject.replace (regexp/substr,replacement);

   @param(參數) 

    regexp/substr; 字串或需要替換模式的RegExp物件。

    replacement:一個字串的值,被替換的文字或產生替換文字的函數。

   @return(傳回值)  回傳替換後的新字串

   注意:字串的stringObject的replace()方法執行的是尋找和取代操作,替換的模式有2種,既可以是字串,也可以是正則匹配模式,如果是正則匹配模式的話,那麼它可以加修飾符g,代表全局替換,否則的話,它只替換第一個匹配的字符串;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<p id="demo">请访问网站</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace("网站","php.cn");
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

 

RegExp物件方法

#1. test()方法:

#此方法用於偵測字串是否符合某個模式;

   基本語法:RegExpObject.test(str);

   @param(參數) str是需要偵測的字串;

   @return (傳回值) 如果字串str中包含與RegExpObject相符的文字的話,傳回true,否則回傳false;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
<script>
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
</script>
</body>
</html>

#2.exec()方法: 

此方法用於檢索字串中的正規表示式的符合。

 基本語法:RegExpObject.exec(string)

@param(參數):string【必填項目】要擷取的字串。

@return(傳回值):傳回一個數組,存放匹配的結果,如果找不到匹配,則傳回值為null;

注意:該傳回的數組的第一個元素是與正規表示式相符的文本,該方法也傳回2個屬性,index屬性宣告的是符合文字的第一個字元的位置;input屬性則存放的是被檢索的字串string;該方法如果不是全域的話,傳回的陣列與match()方法傳回的陣列是相同的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
<script>
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
</script>
</body>
</html>


#下一節
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <button onclick="myFunction()">点我</button> <p id="demo">请访问网站</p> <script> function myFunction() { var str = document.getElementById("demo").innerHTML; var txt = str.replace("网站","php.cn"); document.getElementById("demo").innerHTML = txt; } </script> </body> </html>
章節課件