在介紹Regex文法之前先學習下面幾個方法:
Regex方法:test(),exec()
String對象方法:match(),search(),replace(),split()
test()方法:
用法:regexp對象執行個體.test(字串)
傳回值:如果滿足regexp對象執行個體中定的正則規則,返回true,否則返回false
exec()方法:
用法:regexp對象執行個體.exec(字串)
傳回值:如果 exec 方法沒有找到匹配,則它返回 null。如果它找到匹配,則 exec 方法返回一個數組,並且更新全域 RegExp 對象的屬性,以反映匹配結果。數組的0元素包含了完整的匹配,而第1到n元素中包含的是匹配中出現的任意一個子匹配。這相當於沒有設定全域標誌 (g) 的 match 方法。
如果為Regex設定了全域標誌,exec 從以 lastIndex 的值指示的位置開始尋找。如果沒有設定全域標誌,exec 忽略 lastIndex 的值,從字串的起始位置開始搜尋。
這裡需要備忘下:上面傳回值這段話關於返回數組讓我迷惑了好久,因為實驗下來返回的都是一個長度的數組,也就是只有一個元素.查了網上很多資料都沒有相關的介紹.翻開上次買的"javascript 進階程式設計"一書,在P168有介紹(所謂反向引用,以後介紹)
另外,關於"更新全域 RegExp 對象的屬性"我是這樣理解的:更新RegExp對象的index和lastIndex屬性,在設定了全文匹配參數後可以實驗,每次匹配從上一個lastIndex開始搜尋.(可以結合下面的屬性和後面的例子來體會)
屬性,分別是 input、index 和 lastIndex。Input 屬性包含了整個被尋找的字串。Index 屬性中包含了整個被尋找字串中被匹配的子字串的位置。LastIndex 屬性中包含了匹配中最後一個字元的下一個位置。
match()方法:
用法:string對象.match(regexp對象)
傳回值:如果 match 方法沒有找到匹配,返回 null。如果找到匹配返回一個數組並且更新全域 RegExp 對象的屬性以反映匹配結果。
備忘:match和exec一個很明顯的差別是設定了全文檢索搜尋參數g後它返回的數組不再是一個元素,而是所有的元素,第一個匹配結果數組基數為0,第二個為1,以此類推.
屬性:同exec,match也有index,lastIndex,input三個屬性,意義也同exec
exec和match差別比較的例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>Untitled Document</title>
</head>
<body>
<script>
var str="hello,caolvchong.I love maomao.I should love her forever";
var reg=/ao/g;
function execstr()//點一下:輸出 7-9--ao 再點一下:輸出 25-27--ao 再點:28-30--ao
{
var show=reg.exec(str);
alert(show.index+"-"+show.lastIndex+"--"+show);//exec只匹配第一個,show是單元素數組,輸出第一個匹配項.index和lastIndex分別是第一項的起始和結束位置.要讓exec匹配全部,要用上面exec中舉的例子,使用while迴圈
}
function matchstr()//點一下:輸出 28-30--ao,ao,ao
{
var show=str.match(reg);
alert(show.index+"-"+show.lastIndex+"--"+show);//match匹配全部滿足Regex的式子.show同樣是個數組,由於包含了所有匹配項目,一般有多項.javascript中輸出數組名將輸出全部數組中的內容.當然你也可以用for迴圈逐個輸出各個項,數組下標從0開始.另外,這裡的index和lastIndex是最後一個匹配項的起始和結束位置
}
</script>
被搜尋字串:Hello,my name is caolvchong.I love maomao.
用/ao/gRegex搜尋.<br/>
<input type="button" value="exec方法搜尋" onclick="execstr()">
<input type="button" value="match方法搜尋" onclick="matchstr()">
</body>
</html>
search()方法:
用法:string對象.search(regexp對象)
傳回值:search 方法指明是否存在相應的匹配。如果找到一個匹配,search 方法將返回一個整數值,指明這個匹配距離字串開始的位移位置。如果沒有找到匹配,則返回 -1.
注意:返回的只是與Regex尋找內容匹配的第一個子字串的位置.所以用全域搜尋參數就沒有意義了.
replace()方法:
用法:string對象.replace(regexp對象|字串,"替換的字串")
傳回值:如果設定了全文檢索搜尋,則全部滿足的都將被替換;否則只替換第一個.返回替換後的字串.
注意:replace中還可以接受字串,但只替換第一個滿足條件的字串.
split()方法:
用法:string對象.split([分割符(可以是字串或Regex[,限制輸出數組個數]])
傳回值:返回string對象被分割的數組
注意:string對象不會被split方法修改。分割符是可選項,可以是字串或Regex對象,它標識了分隔字串時使用的是一個還是多個字元。如果忽略該選項,返回包含整個字串的單一元素數組.最後一個選項限制輸出數組個數也是可選項,該值用來限制返回數組中的元素個數。
另外,split本身就帶有全文匹配的特性,所以可用可不用g參數
從上面分析也可以看出一點:Regex比字串替換功能強大.下面的例子也可以看出.
例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>Regexsplit</title>
<script>
function split_by_str(){
var txtnode=document.getElementById("txt");//取得div節點
var txt=txtnode.firstChild.nodeValue;//取得文本值
var newtxt=txt.split("AI");//用AI來劃分
for(var i=0;i<newtxt.length;i++){//輸出
alert(newtxt[i]);
}
}
function split_by_regexp(){
var txtnode=document.getElementById("txt");//取得div節點
var txt=txtnode.firstChild.nodeValue;//取得文本值
var regtxt=/ai/i;//也可以/ai/gi,這個不影響,split本身具有全文匹配功能
var newtxt=txt.split(regtxt);//用AI來劃分
for(var i=0;i<newtxt.length;i++){//輸出
alert(newtxt[i]);
}
}
</script>
</head>
<body>
<div id="txt">
我AI愛ai毛毛,Ai毛毛aI愛AI我!
</div>
<input type="button" value="用字串AI來劃分" onclick="split_by_str();">
<input type="button" value="用RegexAi或ai或AI或aI來劃分" onclick="split_by_regexp();">
</body>
</html>
例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>Regexreplace</title>
<style>
.color_name{/*定義高亮樣式:背景黃色,字型粗體紅色*/
color:red;
font-weight:bold;
background:yellow;
}
</style>
<script language="javascript" type="text/javascript">
function change_name(){//替換文本函數
var txtnode=document.getElementById("txt");//取得div節點
var txt=txtnode.firstChild.nodeValue;//取得文本值
var regstr=/tom/gi;//Regex:匹配tom,全文不分大小寫檢索
var newtxt=txt.replace(regstr,"草履蟲");//全部替換
document.getElementById("txt").firstChild.nodeValue=newtxt;//改變文本顯示
}
function color_name(){//高亮函數
var txtnode=document.getElementById("txt");//取得div節點
var txt=txtnode.firstChild.nodeValue;//取得文本值
var regstr=/tom/gi;//Regex:匹配tom,全文不分大小寫檢索
var arr=txt.match(regstr);//match方法取得滿足匹配的所有字串
for(var i=0;i<arr.length;i++){//遍曆滿足匹配的所有字串
var newtxt=txt.replace(regstr,'<span class="color_name">'+arr[i]+'</span>');//替換,實際上就是添加標籤,該標籤高亮
txtnode.innerHTML=newtxt;//不能用nodeValue修改,nodeValue不支援轉化為html,所以用innerHTML
}
}
</script>
</head>
<body>
<div id="txt">
Hello,everyone!
His name is tom.
Do you know Tom?
TOM is a boy who loves football and PC.
So,do you want to make friends with TOm.
</div>
-----------------------------------------<br/>
把上面的Tom(包括各種形式)高亮或轉化為草履蟲<br/>
-----------------------------------------<br/>
<input type="button" value="高亮TOM" onclick="color_name();">
<input type="button" value="轉化TOM" onclick="change_name();">
</body>
</html>
例子:(是根據上面exec方法改變了下)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>Regex</title>
<script language="javascript" type="text/javascript">
function regexp_str(){
var getStr=document.getElementsByTagName("input")[0].value;
var regexpStr;
var searchType=document.getElementsByTagName("input")[1].value;
if(searchType==1){ //是否大小寫判斷
regexpStr=/cat/i;
}
else{
regexpStr=/cat/;
}
var arr = getStr.search(regexpStr);
if(arr==-1){ //沒有找到返回-1
alert("輸入的字串中沒有出現cat");
}
else{ //找到返回第一次匹配的位置
alert("第一個匹配cat的字串出現位置:"+arr);
}
}
function checkbox_value(){
var searchType=document.getElementsByTagName("input")[1].value;
if(searchType==1)
searchType=0;
else
searchType=1;
document.getElementsByTagName("input")[1].value=searchType;
}
</script>
</head>
<body>
<input type="text">
忽略大小寫:<input type="checkbox" checked value="1" onchange="checkbox_value();">
<input type="button" value="查詢" onclick="regexp_str();">
</body>
</html>
例子:
代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>Regex</title>
<script language="javascript" type="text/javascript">
function regexp_str(){//匹配Regex函數
var getStr=document.getElementsByTagName("input")[0].value;//取得輸入
var regexpStr,arr;
var searchType=document.getElementsByTagName("input")[1].value;//是否全文檢索搜尋
if(searchType==1){//全文檢索搜尋
regexpStr=/cat/g;//g,全文檢索搜尋參數
while ((arr = regexpStr.exec(getStr)) != null){//當還沒匹配完之前
alert(arr.index + "-" + arr.lastIndex + arr + "---"+arr.input);
//index是找到匹配的起始位置;lastIndex是找到匹配的末位置+1.比如這個例子:要匹配cat,而你輸入的是1cat2cat3,則第一次匹配index為1,lastIndex為4.第二次匹配index為5,lastIndex為8.從這裡也可以看出,lastIndex是配置了全文檢索搜尋後下一個搜尋的開始位置.
//arr是輸出整個數組,由於只有一個長度,輸出的就是匹配的字串
//input屬性是在這裡是輸入的字串,廣義來說,就是被搜尋的全文,比如上面舉例的1cat2cat3
}
}
else{ //一次匹配
regexpStr=/cat/;
arr = regexpStr.exec(getStr);
alert(arr.index + "-" + arr.lastIndex + arr + "---"+arr.input); //由於只是一次匹配,就不要像上面那樣用迴圈了(不然出現匹配情況,每次始終從頭開始搜尋,不能達到null,陷入死迴圈)
}
}
function checkbox_value(){//改變checkbox的值
var searchType=document.getElementsByTagName("input")[1].value; //取得當前checkbox值
if(searchType==1) //checkbox值為1改為0,否則改為1
searchType=0;
else
searchType=1;
document.getElementsByTagName("input")[1].value=searchType;
}
</script>
</head>
<body>
<input type="text">
全文檢索搜尋:<input type="checkbox" checked value="1" onchange="checkbox_value();">
<input type="button" value="查詢" onclick="regexp_str();">
</body>
</html>
例子:(第一篇Regex例子)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>Regex</title>
<script language="javascript" type="text/javascript">
function regexp_str(){
var getStr=document.getElementsByTagName("input")[0].value; //取得輸入值
var regexpStr=/cat/; //建立正則對象,匹配為cat
if(regexpStr.test(getStr)) //正則對象的test方法,後面會介紹(就是匹配返回true,否則返回false)
alert("輸入的字串"+getStr+"包含"+regexpStr.source); //正則對象的source屬性,後面會介紹(就是返回正則對象設定的匹配值)
else
alert("輸入的字串"+getStr+"不包含"+regexpStr.source);
}
</script>
</head>
<body>
<input type="text">
<input type="button" value="查詢" onclick="regexp_str();">
</body>
</html>