บทเรียนพิเศษ 39 Regular Expressions (3)
การจัดกลุ่ม
การจัดกลุ่มจะใช้วงเล็บเปิดและปิดคลุม ซึ่งให้ประโยชน์อยู่ 3 อย่างดังนี้
o คุณสามารถใช้สัญลักษณ์ทำซ้ำกับกลุ่มที่จัดไว้
o คุณสามารถใช้เงื่อนไข OR
ยกตัวอย่างของประโยชน์อันแรก เช่น หากคุณต้องการค้นหาคำว่า "Ha " ที่ซ้ำกัน 10 ครั้ง ก็ให้ใช้ว่า /(Ha ){10}/ เท่านี้ ก็ไม่ต้องพิมพ์ยืดยาวล่ะครับ
เงื่อนไข OR
ใน Reg จะใช้สัญลักษณ์ที่แทนเงื่อนไข หรือ(or) ด้วย | (ขีดตรงขีดเดียว) ซึ่งขอให้อย่าสับสนกับภาษาสคริปหลายๆภาษาที่ใช้ || (สองขีด) กับเงื่อนไขหรือ ถ้าคุณต้องการค้นหาคำว่า "นาย " หรือ "นาง " หรือ "ด.ช. " ...จะเขียนได้ว่า /(นาย|นาง|ด.ช.)/g
ลองมาดูตัวอย่างที่ซับซ้อนขึ้นอีกระดับดีกว่าครับ กับ เลขหมายโทรศัพท์บ้านของกรุงเทพฯ ซึ่งอาจมีข้อมูลรูปแบบต่างๆ เช่น...
02-1234567
02 123-4567
02 1234567
123 4567
(02)123-4567
02 123-4567
02 1234567
123 4567
(02)123-4567
โอ้.. จะเขียน Reg อย่างไร ให้ครอบคลุมได้หมดเอ่ยๆ? เราสามารถใช้การจัดกลุ่มมาช่วยได้ครับ เริ่มแรกนั้นเป็นรหัส 02 ซึ่งอาจจะอยู่ในวงเล็บหรือไม่ก็ได้ หรืออาจไม่มีรหัสนี้เลยก็ได้ ดังนั้นเราจะรวมส่วนนี้เป็นกลุ่มเดียว และใช้เครื่องหมาย ? กับทั้งวงเล็บเปิดและปิด ซึ่งหมายความว่าวงเล็บจะมีหรือไม่ก็ได้ ส่วนข้างหน้าวงเล็บนั้นจะมีเครื่องหมาย \ ใส่ไว้เพื่อบอกว่า วงเล็บนี้ไม่ใช่สัญลักษณ์จัดกลุ่มของ Reg (เหมือนที่ใช้ในจาวาสคริปที่การใส่เครื่องหมายคำพูดเข้าไปในเครื่องหมายคำพูดต้องมี \ นำหน้า)
/(\(?02\)?)?
และหลังรหัสอาจตามด้วยขีดหรือที่ว่างหรือไม่มีอะไร(ติดกัน) ซึ่งไม่จำเป็นต้องจัดกลุ่ม แต่เราก็จะทำ เพื่อให้โค้ดอ่านง่ายขึ้น
/(\(?02\)?)?(-| )?
หมายเลขอีก 7 หลัก ก็ไม่ยากแล้วล่ะครับ ก็มีสามหลักแรก และสี่หลักสุดท้ายที่อาจคั่นด้วยขีด ที่ว่าง หรือไม่มีอะไร
/(\(?02\)?)?(-| )?\d{3}(-| )?\d{4}/
นี่อาจดูเป็นสัตว์ประหลาดเต็มขั้น แต่มันเป็นอะไรที่ง่ายกว่ามากๆ เมื่อเทียบกับการเขียนโค้ดทดสอบเบอร์โทรศัพท์ที่เป็นไปได้ทั้งหมด ถ้าคุณห่วงว่าเครื่องหมายขีด( - )อาจถูกคิดว่าเป็นสัญลักษณ์พิเศษของ Reg เนื่องจากอาจมีการส่งค่ากลับไปยังเซิร์ฟเวอร์ที่คุณไม่ทราบว่าใช้ภาษาอะไรในการแปรผล ซึ่งจะได้โค้ดทั้งหมดเป็น...
/(\(?02\)?)?(\-| )?\d{3}(\-| )?\d{4}/
คำสั่งต่างๆที่ใช้กับ Reg
มีสี่คำสั่งใช้กับ Reg ได้ ซึ่งสองคำสั่งแรกได้อธิบายไปแล้วในบทที่ 37 จึงไม่ขออธิบายสองคำสั่งแรกมากนักนะครับ
search()
ใช้ค้นหาบางส่วนของข้อความหรือ Reg ว่ามีอยู่ในข้อความหนึ่งๆหรือเปล่า ถ้ามี ก็จะให้ค่าตำแหน่งเริ่มต้นที่พบ หากไม่มี ก็จะให้ค่า -1
replace(... , ...)
ใช้ค้นหาและแทนที่บางส่วนของข้อความ แต่จะไม่ได้เป็นการเปลี่ยนแปลงข้อความนั้น แต่จะเป็นเพียงการเก็บค่าไว้(ในรูปของตัวแปร) ก่อนที่คุณจะนำมาเรียกใช้ได้
split()
มีการใช้คำสั่งนี้อยู่แล้วใน บทที่ 36 ซึ่งเป็นการใช้กับข้อความ(string) แต่ก็สามารถนำมาใช้กับ Reg ได้เช่นกันครับ มีประโยชน์มากหากนำมาใช้แยกส่วนข้อมูลที่มีรูปแบบซ้ำๆ เช่น ถ้ามีข้อมูลเป็นตัวเลขเป็นชุดๆที่มีช่องว่างหรือตัวหนังสือคั่นระหว่างชุดตัวเลข แล้วคุณต้องการแยกแต่ตัวเลขออกมาทั้งหมด(ซึ่งจะอยู่ในรูป Array) คุณอาจใช้คำสั่ง split(/[^\d]+/g) ซึ่งใน Reg นี้ก็หมายถึงส่วนที่ไม่ใช่ตัวเลขครับ ซึ่งจะเป็นจุดที่แยกส่วนข้อมูลออกจากกัน
match()
วิธีนี้จะค้นหาข้อมูลที่คุณต้องการ(ที่คุณใส่ไว้ในวงเล็บ) เมื่อค้นหาเจอ ก็จะเก็บค่าไว้เป็น Array ไว้ให้คุณเรียกใช้ได้ คล้ายๆคำสั่ง split() อย่างการเขียน Reg แทนเลขหมายโทรศัพท์ข้างบนนู้น คุณสามารถค้นหาและเก็บค่าเบอร์โทรศัพท์ทั้งหมด(ในรูป Array) ด้วยคำสั่ง match() ดังนี้...
a = /(\(?02\)?)?(\-| )?\d{3}(\-| )?\d{4}/
phoneArray = addrList.match(a)
ใช้ค้นหาบางส่วนของข้อความหรือ Reg ว่ามีอยู่ในข้อความหนึ่งๆหรือเปล่า ถ้ามี ก็จะให้ค่าตำแหน่งเริ่มต้นที่พบ หากไม่มี ก็จะให้ค่า -1
replace(... , ...)
ใช้ค้นหาและแทนที่บางส่วนของข้อความ แต่จะไม่ได้เป็นการเปลี่ยนแปลงข้อความนั้น แต่จะเป็นเพียงการเก็บค่าไว้(ในรูปของตัวแปร) ก่อนที่คุณจะนำมาเรียกใช้ได้
split()
มีการใช้คำสั่งนี้อยู่แล้วใน บทที่ 36 ซึ่งเป็นการใช้กับข้อความ(string) แต่ก็สามารถนำมาใช้กับ Reg ได้เช่นกันครับ มีประโยชน์มากหากนำมาใช้แยกส่วนข้อมูลที่มีรูปแบบซ้ำๆ เช่น ถ้ามีข้อมูลเป็นตัวเลขเป็นชุดๆที่มีช่องว่างหรือตัวหนังสือคั่นระหว่างชุดตัวเลข แล้วคุณต้องการแยกแต่ตัวเลขออกมาทั้งหมด(ซึ่งจะอยู่ในรูป Array) คุณอาจใช้คำสั่ง split(/[^\d]+/g) ซึ่งใน Reg นี้ก็หมายถึงส่วนที่ไม่ใช่ตัวเลขครับ ซึ่งจะเป็นจุดที่แยกส่วนข้อมูลออกจากกัน
match()
วิธีนี้จะค้นหาข้อมูลที่คุณต้องการ(ที่คุณใส่ไว้ในวงเล็บ) เมื่อค้นหาเจอ ก็จะเก็บค่าไว้เป็น Array ไว้ให้คุณเรียกใช้ได้ คล้ายๆคำสั่ง split() อย่างการเขียน Reg แทนเลขหมายโทรศัพท์ข้างบนนู้น คุณสามารถค้นหาและเก็บค่าเบอร์โทรศัพท์ทั้งหมด(ในรูป Array) ด้วยคำสั่ง match() ดังนี้...
a = /(\(?02\)?)?(\-| )?\d{3}(\-| )?\d{4}/
phoneArray = addrList.match(a)
การเปลี่ยนคำของทั้งบท ในหัวข้อพิเศษ 37 นั่นเป็นการใช้คำสั่ง replace กับทั้งหน้าครับ ซึ่งโค้ดจะเป็นแบบนี้...
<html><head>. . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .</head><body>
. . . . . . . . . . . . . . . . . . . . . . .
<button style="font-family:angsana new;font-size:20pt" onclick="alert('ขออภัยอย่างสูงครับ')
v=document.body.innerHTML.replace(/ครับ/gi,'โว้ย') document.body.innerHTML=v">
กดที่นี่เพื่อเปลี่ยนคำว่า "ครับ" ทั้งหมดในหน้านี้เป็น "โว้ย"</button>
<button style="font-family:angsana new;font-size:20pt"
onclick="alert('ขออภัยอีกครั้งนะท่านผู้อ่าน ผมเพียงต้องการแสดงให้เห็นชัดเจน')
v=document.body.innerHTML.replace(/ผม/gi,'กู');document.body.innerHTML=v">
กดที่นี่เพื่อเปลี่ยนคำว่า "ผม" ทั้งหมดในหน้านี้เป็น "กู"</button>
<button style="font-family:angsana new;font-size:20pt"
onclick="document.body.innerHTML=b">
ได้โปรดกดที่นี่ให้ทุกสิ่งทุกอย่างกลับเป็นดังเดิม</button>
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .</body>
<script>b=document.body.innerHTML</script></html>
. . . . . . . . . . . . . . . . . . . . . . . .</head><body>
. . . . . . . . . . . . . . . . . . . . . . .
<button style="font-family:angsana new;font-size:20pt" onclick="alert('ขออภัยอย่างสูงครับ')
v=document.body.innerHTML.replace(/ครับ/gi,'โว้ย') document.body.innerHTML=v">
กดที่นี่เพื่อเปลี่ยนคำว่า "ครับ" ทั้งหมดในหน้านี้เป็น "โว้ย"</button>
<button style="font-family:angsana new;font-size:20pt"
onclick="alert('ขออภัยอีกครั้งนะท่านผู้อ่าน ผมเพียงต้องการแสดงให้เห็นชัดเจน')
v=document.body.innerHTML.replace(/ผม/gi,'กู');document.body.innerHTML=v">
กดที่นี่เพื่อเปลี่ยนคำว่า "ผม" ทั้งหมดในหน้านี้เป็น "กู"</button>
<button style="font-family:angsana new;font-size:20pt"
onclick="document.body.innerHTML=b">
ได้โปรดกดที่นี่ให้ทุกสิ่งทุกอย่างกลับเป็นดังเดิม</button>
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .</body>
<script>b=document.body.innerHTML</script></html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น