10-2 ぉ蚹

JavaScript 在第四版之後,針對通用表示法增加了數個字串方法,這些字串方法的用途很廣,可以列舉如下:

字串方法功能
string.search(re)通用式 re 在某個字串 string 出現的位置
string.match(re)從字串 string 抽取符合通用式 re 的子字串,並以字串陣列傳回
string.replace(re, newStr)將字串 string 符合通用式 re 的部分,代換為 newStr

使用通用表示法及上述的字串方法,我們對字串的處理能力大增,不但可以進行搜尋比對,還可以立刻修改字串(例如:即時修正表單資料),本節將說明這些功能。

若要尋找某個通用式在一個字串的第一次出現的位置,可用字串的 search 方法,例如:

Example(regExpSearch01.htm):

相關原始碼如下:

原始檔(regExpSearch01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>通用式:搜尋並列出位置</h2>
<hr>

<script>
function regExpMatch(string, pattern, flag){
	var regexp = new RegExp(pattern, flag);
	var index = string.search(regexp);
	alert(index);
}
</script>
<center>
 字串:<input size=40 id=strId value="阿輝伯是李登輝,李炳輝是金門王的搭檔"><br>
通用式:<input size=40 id=patId value="李.輝"><br>
 選項:<input size=40 id=flagId value="g"><br>
<input type="button" value="顯示搜尋結果" onClick="regExpMatch(strId.value, patId.value, flagId.value)">
</center>

<hr>
</body>
</html>

其中 str.search(re) 將會傳回符合 re 的第一個位置(此例為 4)。若字串 str 不符合 re,則回傳值為 -1。若只是要判斷輸入字串是否符合某個通用式,也可以使用 re.test(str),這在上一節已經說明過了。

Hint
str.search(re) 只能用來搜尋某個通用式在一個字串的第一次出現的位置,所以在上述範例中,無論選項的輸入值為何,都只有一個搜尋結果。

使用字串的 match 方法,可在一個字串中,取出符合某個通用表示式的所有子字串,例如:

Example(regExpMatch01.htm):

相關原始碼如下:

原始檔(regExpMatch01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>通用式:搜尋並列出比對到的字串</h2>
<hr>

<script>
function regExpMatch(string, pattern, flag){
	var regexp = new RegExp(pattern, flag);
	var matched = string.match(regexp);
	alert(matched);
}
</script>
<center>
 字串:<input size=40 id=strId value="阿輝伯是李登輝,李炳輝是金門王的搭檔"><br>
通用式:<input size=40 id=patId value="李.輝"><br>
 選項:<input size=40 id=flagId value="g"><br>
<input type="button" value="顯示搜尋結果" onClick="regExpMatch(strId.value, patId.value, flagId.value)">
</center>

<hr>
</body>
</html>

其中「.」可比對任何一個字元,而傳回的 matched 變數則是一個陣列,包含所比對到的字串。

善用通用表示式及字串的 replace 方法,就可以對字串進行任意修改。例如:

Example(regExpReplace01.htm):

相關原始碼如下:

原始檔(regExpReplace01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>通用式:搜尋並代換</h2>
<hr>

<script>
function regExpReplace(strId, pat1id, pat2id, flagId){
	var regexp = new RegExp(pat1id.value, flagId.value);
	var str = strId.value;
	var newString = str.replace(regexp, pat2id.value);
	alert(newString);
}
</script>
<center>
 字串:<input size=40 id=strId value="我愛用通用式,通用式功能強大"><br>
通用式:<input size=40 id=pat1id value="通.式"><br>
新字串:<input size=40 id=pat2id value="正規式"><br>
 選項:<input size=40 id=flagId value=""><br>
<input type="button" value="顯示代換結果" onClick="regExpReplace(strId, pat1id, pat2id, flagId)">
</center>

<hr>
</body>
</html>

在上例中,字串的 replace 方法將符合通用式的第一部分代換成「正規式」,並將新字串傳回給變數 newString。若要將所有的「通用式」改成「正規式」,只需將選項改成「g」就可以了。

處理表單資料時,最常用的資料修正方式就是去除前後的空白。這種例行工作就可以由通用表示法及字串的 replace 方法來輕鬆完成。例如:

Example(regExpReplace02.htm):

在上例中,若按下「修正」,JavaScript 即會將所有的空白部分(含中文大五碼)刪除。程式碼如下:

原始檔(regExpReplace02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>通用式:修正中文姓名</h2>
<hr>

<script>
function checkChineseName(uiControl) {
	uiControl.value = uiControl.value.replace(/[\s ]+/g, "");    // \s & 全形空白
}
</script>
中文大名:<input id=chineseName value=" 金     城   武 ">
<input type=button value="修正" onClick="checkChineseName(chineseName)">

<hr>
</body>
</html>

在上述範例中,[\s ] 是代表英文空白字元或大五碼的全形空白字元,因此 [\s ]+ 就是代表中文中可能出現的空白字串,而 replace(/[\s ]+/g, "") 則是將此類字串全部刪除,也就是代換為空字串。

Hint
上述範例有點畫蛇添足,下列通用式也可以達到同樣的效果:

/[\s ]/g

對於英文的輸入,我們通常要消除字頭及字尾的空白,並將句中的多個空白合成一個空格,例如:

Example(regExpReplace03.htm):

程式碼如下:

原始檔(regExpReplace03.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>通用式:修正英文姓名</h2>
<hr>

<script>
function checkEnglishName(uiControl) {
	var str = uiControl.value;
	str = str.replace(/^[\s ]+/g, "");	// 刪除頭部的空白字串
	str = str.replace(/[\s ]+$/g, "");	// 刪除尾部的空白字串
	str = str.replace(/[\s ]+/g, " ");	// 將其他空白字串代換成單一半形空格
	uiControl.value = str;
}
</script>
英文大名:<input id=englishName value="           Michael       Jordan ">
<input type=button value="修正" onClick="checkEnglishName(englishName)">

<hr>
</body>
</html>

我們可以使用 "|" 來代表「或」,因此在上述範例中,刪除頭部和尾部的空白字串,可以合成一個敘述,如下:

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

如果在通用式使用重複字元時(例如「*」代表重複0次或多次,「+」代表重複至少1次等。),比對之後可能會出現兩種不同的結果,這兩種結果都滿足原來的通用式。此時我們必須知道通用式在進行比對時所採取的原則,才能得到符合我們期望的結果。一般而言,比對原則可以概述如下:

下面是一個範例:

Example(regExpGreedy01.htm):

在上述範例中,第一個通用式是採取預設的「貪心比對」,因此比對到的字串會是 batbetbitbotbut,此字串是在比對成功的情況下、最長的字串。而在第二個通用式中,我們在星號後面加了一個問號,代表採取「最小比對」,因此比對到的字串是 bat,此字串是在比對成功的情況下、最短的字串。此範例的程式碼如下:

原始檔(regExpGreedy01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>通用式的「貪心比對」與「最小比對」</h2>
<hr>

<script>
str = "fred batbetbitbotbut barney"
document.write("str = "+str+"<br>");
document.write("貪心比對:<br>");
re = /b.*t/;
document.write("re = "+re+"<br>");
document.write("str.match(re) = "+str.match(re)+"<br>");
document.write("最小比對:<br>");
re = /b.*?t/;
document.write("re = "+re+"<br>");
document.write("str.match(re) = "+str.match(re)+"<br>");
</script>

<hr>
</body>
</html>

在使用「貪心比對」時,會採用「越左越貪」的原則,若要推翻此原則,可以適時使用問號,以採用「最小比對」,例如:

Example(regExpGreedy02.htm):

此範例的程式碼如下:

原始檔(regExpGreedy02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>通用式的「越左越貪」比對方式</h2>
<hr>

<script>
str = "a xx b xxx b xxxx d";
document.write("str = "+str+"<br>");
document.write("越左越貪:<br>");
re = /a(.*)b(.*)d/;
document.write("re = "+re+"<br>");
found = str.match(re);
document.write("RegExp.$1 = "+RegExp.$1+", RegExp.$2 = "+RegExp.$2+"<br>");
document.write("推翻越左越貪:<br>");
re = /a(.*?)b(.*)d/;
document.write("re = "+re+"<br>");
found = str.match(re);
document.write("RegExp.$1 = "+RegExp.$1+", RegExp.$2 = "+RegExp.$2+"<br>");
</script>

<hr>
</body>
</html>

在上例中,我們在通用式中加了括號,符合括號中的比對條件者,將被設定至 RegExp.$1、RegExp.$2 等變數中,以便後續處理。 (為簡化起見,RegExp.$1 可以簡寫成 $1,RegExp.$2 可以簡寫成 $2,依此類推。)此外,在第一個通用式中,由於採取預設的「越左越貪」,所以 RegExp.$1 = "xx b xxx" 且 RegExp.$2 = "xxxx";但在第二個通用式中,由於我們適時使用了問號來進行「最小比對」,所以得到 RegExp.$1 = "xx" 且 RegExp.$2 = "xxx b xxxx"。

以下這個範例,利用 replace() 將一句英文中的前兩個字彙對調:

Example(regExpReplace04.htm):

程式碼如下:

原始檔(regExpReplace04.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>通用式:對調兩個英文字</h2>
<hr>

<script>
function exchangeWord(id) {
	var regexp = /(\w+)\s+(\w+)/;
	var newString = id.innerHTML.replace(regexp, "$2 $1");
	alert("First matched word = " + RegExp.$1);
	alert("Second matched word = " + RegExp.$2);
	id.innerHTML = newString;
}
</script>
請點選下列文字以對調前兩個英文字:<p>
<div onClick='exchangeWord(this)'>we are the world!</div>

<hr>
</body>
</html>

以下這個範例,利用 replace() 在 onBlur 事件時,先修正文字欄位,再進行驗證:

Example(regExpReplace05.htm):

由於篇幅有限,在此不再列出此範例之原始碼。


JavaScript 程式設計與應用:用於網頁用戶端