10-2 資?修改

JavaScript bĥ|AwqΪܪkW[FƭӦrkAoǦrkγ~ܼsAiHC|pUG

rk\
string.search(re)qΦ re bYӦr string X{m
string.match(re)qr string ŦXqΦ re lrAåHr}CǦ^
string.replace(re, newStr)Nr string ŦXqΦ re AN newStr

ϥγqΪܪkΤWzrkAڭ̹rꪺBzOjWAiHijMA٥iHߨקr]ҦpGYɭץơ^A`Noǥ\C

YnMYӳqΦb@ӦrꪺĤ@X{mAiΦrꪺ search kAҦpG

Example]regExpSearch01.htm^G

lXpUG

lɡ]regExpSearch01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>qΦGjMæCXm</h2>
<hr>

<script>
function regExpMatch(string, pattern, flag){
	var regexp = new RegExp(pattern, flag);
	var index = string.search(regexp);
	alert(index);
}
</script>
<center>
@rG<input size=40 id=strId value="BOnAOf"><br>
qΦG<input size=40 id=patId value="."><br>
@ﶵG<input size=40 id=flagId value="g"><br>
<input type="button" value="ܷjMG" onClick="regExpMatch(strId.value, patId.value, flagId.value)">
</center>

<hr>
</body>
</html>

䤤 str.search(re) N|Ǧ^ŦX re Ĥ@Ӧm]Ҭ 4^CYr str ŦX reAh^ǭȬ -1CYuOnP_JrO_ŦXYӳqΦA]iHϥ re.test(str)AobW@`wgLFC

Hint
str.search(re) uΨӷjMYӳqΦb@ӦrꪺĤ@X{mAҥHbWzdҤAL׿ﶵJȬAu@ӷjMGC

ϥΦrꪺ match kAib@ӦrꤤAXŦXYӳqΪܦҦlrAҦpG

Example]regExpMatch01.htm^G

lXpUG

lɡ]regExpMatch01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>qΦGjMæCX쪺r</h2>
<hr>

<script>
function regExpMatch(string, pattern, flag){
	var regexp = new RegExp(pattern, flag);
	var matched = string.match(regexp);
	alert(matched);
}
</script>
<center>
@rG<input size=40 id=strId value="BOnAOf"><br>
qΦG<input size=40 id=patId value="."><br>
@ﶵG<input size=40 id=flagId value="g"><br>
<input type="button" value="ܷjMG" onClick="regExpMatch(strId.value, patId.value, flagId.value)">
</center>

<hr>
</body>
</html>

䤤u.vi@ӦrAӶǦ^ matched ܼƫhO@Ӱ}CA]tҤ쪺rC

γqΪܦΦrꪺ replace kANiHriNקCҦpG

Example]regExpReplace01.htm^G

lXpUG

lɡ]regExpReplace01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>qΦGjMåN</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>
@rG<input size=40 id=strId value="ڷRγqΦAqΦ\jj"><br>
qΦG<input size=40 id=pat1id value="q."><br>
srG<input size=40 id=pat2id value="W"><br>
@ﶵG<input size=40 id=flagId value=""><br>
<input type="button" value="ܥNG" onClick="regExpReplace(strId, pat1id, pat2id, flagId)">
</center>

<hr>
</body>
</html>

bWҤArꪺ replace kNŦXqΦĤ@NuWvAñNsrǦ^ܼ newStringCYnNҦuqΦv令uWvAuݱNﶵ令ugvNiHFC

BzƮɡA̱`Ϊƭץ覡NOhe᪺ťաCoبҦu@NiHѳqΪܪkΦrꪺ replace kӻPCҦpG

Example]regExpReplace02.htm^G

bWҤAYUuץvAJavaScript Y|NҦťճ]tjX^RC{XpUG

lɡ]regExpReplace02.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>qΦGץmW</h2>
<hr>

<script>
function checkChineseName(uiControl) {
	uiControl.value = uiControl.value.replace(/[\s@]+/g, "");    // \s & Ϊť
}
</script>
jWG<input id=chineseName value="    @@@  Z ">
<input type=button value="ץ" onClick="checkChineseName(chineseName)">

<hr>
</body>
</html>

bWzdҤA[\s@] ON^ťզrΤjXΪťզrA] [\s@]+ NON夤iX{ťզrA replace(/[\s@]+/g, "") hONrRA]NONŦrC

Hint
WzdҦIeDKAUCqΦ]iHFP˪ĪGG

/[\s@]/g

^媺JAڭ̳q`nrYΦrťաAñNyhӪťզX@ӪŮAҦpG

Example]regExpReplace03.htm^G

{XpUG

lɡ]regExpReplace03.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>qΦGץ^mW</h2>
<hr>

<script>
function checkEnglishName(uiControl) {
	var str = uiControl.value;
	str = str.replace(/^[\s@]+/g, "");	// RYťզr
	str = str.replace(/[\s@]+$/g, "");	// Rťզr
	str = str.replace(/[\s@]+/g, " ");	// NLťզrN@bΪŮ
	uiControl.value = str;
}
</script>
^jWG<input id=englishName value="           Michael     @ Jordan ">
<input type=button value="ץ" onClick="checkEnglishName(englishName)">

<hr>
</body>
</html>

ڭ̥iHϥ "|" ӥNuΡvA]bWzdҤARYMťզrAiHX@ӱԭzApUG

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

pGbqΦϥέƦrɡ]Ҧpu*vN0ΦhAu+vNƦܤ1C^A蠟i|X{ؤPGAoصGӪqΦCɧڭ̥DqΦbiɩұĨhA~oŦXڭ̴檺GC@ӨAhiHzpUG

UO@ӽdҡG

Example]regExpGreedy01.htm^G

bWzdҤAĤ@ӳqΦOĨw]ugߤvA]쪺r|O batbetbitbotbutArOb令\pUB̪rCӦbĤGӳqΦAڭ̦bP᭱[F@ӰݸANĨṳpvA]쪺rO batArOb令\pUB̵urCdҪ{XpUG

lɡ]regExpGreedy01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>qΦugߤvPṳpv</h2>
<hr>

<script>
str = "fred batbetbitbotbut barney"
document.write("str = "+str+"<br>");
document.write("gߤG<br>");
re = /b.*t/;
document.write("re = "+re+"<br>");
document.write("str.match(re) = "+str.match(re)+"<br>");
document.write("̤pG<br>");
re = /b.*?t/;
document.write("re = "+re+"<br>");
document.write("str.match(re) = "+str.match(re)+"<br>");
</script>

<hr>
</body>
</html>

bϥΡugߤvɡA|ĥΡuVVgvhAYn½hAiHAɨϥΰݸAHĥΡṳpvAҦpG

Example]regExpGreedy02.htm^G

dҪ{XpUG

lɡ]regExpGreedy02.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>qΦuVVgv覡</h2>
<hr>

<script>
str = "a xx b xxx b xxxx d";
document.write("str = "+str+"<br>");
document.write("VVgG<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("½VVgG<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>

bWҤAڭ̦bqΦ[FAAŦXA̡ANQ]w RegExp.$1BRegExp.$2 ܼƤAHKBzC ]²ư_ARegExp.$1 iH²g $1ARegExp.$2 iH²g $2A̦C^~AbĤ@ӳqΦAѩĨw]uVVgvAҥH RegExp.$1 = "xx b xxx" B RegExp.$2 = "xxxx"FbĤGӳqΦAѩڭ̾AɨϥΤFݸӶiṳpvAҥHo RegExp.$1 = "xx" B RegExp.$2 = "xxx b xxxx"C

HUoӽdҡAQ replace() N@y^夤eӦrJաG

Example]regExpReplace04.htm^G

{XpUG

lɡ]regExpReplace04.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>qΦGըӭ^r</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>
IUCrHիeӭ^rG<p>
<div onClick='exchangeWord(this)'>we are the world!</div>

<hr>
</body>
</html>

HUoӽdҡAQ replace() b onBlur ƥɡAץrAAiҡG

Example]regExpReplace05.htm^G

ѩgTAbACXdҤlXC


JavaScript {]pPΡGΩΤ