บทเรียนพิเศษ 37 Regular Expressions (1)

บทเรียนพิเศษ 37 Regular Expressions (1)

                    อ้า... นี่มัน..ผมไม่น่าทำเรื่องนี้เท่าไรเลยครับ เพราะไม่มีความรู้เอาซะเลย เพิ่งจะมาศึกษาเอาตอนที่ทำหน้านี้ แต่อยากให้หัวข้อจาวาสคริปในเว็บนี้สมบูรณ์ๆน่ะครับ และดูเหมือนว่ามันจะมีประโยชน์เอามากๆด้วยครับ แม้ว่าที่ผมแสดงในตัวอย่างจะดูไร้สาระก็ตาม ความหมายของ Regular Expressions นั้นผมก็อธิบายไม่ถูกครับ ประมาณว่าเป็นการค้นหาและจัดการเปลี่ยนแปลงข้อมูล อะไรทำนองนั้นครับ ลองมาดูตัวอย่างที่ผมใช้ Regular Expressions กับหน้านี้กันดีกว่า...

กดที่นี่เพื่อเปลี่ยนคำว่า "ครับ" ทั้งหมดในหน้านี้เป็น "โว้ย"

กดที่นี่เพื่อเปลี่ยนคำว่า "ผม" ทั้งหมดในหน้านี้เป็น "กู"

ได้โปรดกดที่นี่ให้ทุกสิ่งทุกอย่างกลับเป็นดังเดิม

                    ผมหวังว่าท่านผู้อ่านคงกดปุ่ม "...กลับเป็นดังเดิม" เรียบร้อยแล้วนะครับ ก่อนที่คุณจะทนอ่านไม่ได้และพังหน้าจอเอา คุณอาจเคยเห็นผลของการใช้ Regular Expressions ในหลายเว็บมาบ้างแล้ว แต่ไม่รู้ว่านั่นคือ Regular Expressions   ผมเคยเข้าไปในเว็บบอร์ด แล้วพิมพ์ความคิดเห็นส่งไปในกระทู้นั้นโดยมีคำว่า "กูเกิ้ล" อยู่ด้วย แล้วพอส่งเสร็จ หน้านั้นก็โหลดจากเซิร์ฟเวอร์ให้ใหม่ คำ "กูเกิ้ล" ที่ผมพิมพ์เข้าไปกลับปรากฎในเว็บเป็น "เราเกิ้ล" แสดงว่าเขาได้มีการใช้ Regular Expressions เปลี่ยนคำว่า "กู" เป็น "เรา" เรียบร้อยแล้ว เป็น Regular Expressions ที่ทำงานในฝั่งเซิร์ฟเวอร์หรือไม่ก็จาวาสคริปที่ทำงานในฝั่งของผู้ใช้ที่เขาเขียนดักคำไม่เหมาะสมไว้ แต่ในที่นี้เราจะพูดถึงแต่ที่ใช้ในจาวาสคริป แต่ก็มีการทำงานไม่ต่างกับฝั่งเซิร์ฟเวอร์นัก

                    ผมว่าเรื่องนี้ยุ่งยากและมีรายละเอียดมากกว่าบทที่ผ่านๆมา ผมจึงไม่ขอแสดงโค้ดที่ทำให้เกิดผลเมื่อคุณกดปุ่มข้างบนนะครับ เพราะกลัวคุณจะมึนตึ๊บและไม่อาจเข้าใจในส่วนต่อไป เราเริ่มจากพื้นฐานง่ายๆก่อนดีกว่า เรื่องยากๆมันก็มาจากเรื่องง่ายๆหลายๆเรื่องมารวมกันมั้งครับ..ผมว่า   สมมติผมมีข้อความมั่วๆว่า...(เป็นวันที่ผมเริ่มเขียนเรื่องนี้)

1 ตุลาคม พ.ศ. 2547 ต   ต
โค้ดของข้อความ... <font color="red" id="d">1 ตุลาคม พ.ศ. 2547 ต   ต</font>

ผมสามารถหาตำแหน่งของ "ตุลา" โดยการใช้ d.innerText.search(/ตุลา/)
กดที่นี่เพื่อดูค่าของ d.innerText.search(/ตุลา/)

ผมสามารถหาตำแหน่งของ "ตุลา" โดยการใช้ d.innerText.search('ตุลา')
กดที่นี่เพื่อดูค่าของ d.innerText.search('ตุลา')

                    คำสั่งใหม่ล่าสุดคือ search() ที่เอาไว้ค้นหาตำแหน่งในข้อความ(string) และจะให้ค่าตำแหน่งเริ่มต้นของสิ่งที่ค้นหาเจอครั้งเดียวในข้อความนั้นๆ แต่ถ้าหาไม่เจอ จะให้ค่า -1   /ตุลา/ เรียกได้ว่าเป็น Regular Expressions ซึ่งแตกต่างจากข้อความธรรมดาตรงที่ไม่มีเครื่องหมายคำพูดหุ้ม แต่จะมีเครื่องหมายทับ( / )หุ้มแทน แต่นั่นเป็น Regular Expressions แบบง่ายที่สุดแล้ว ซึ่งให้ค่าไม่ต่างจากข้อความธรรมดา

                    หากผมต้องการตำแหน่งของ "ต" ที่อยู่ท้ายสุด ผมจะใช้ /  ต/ หรือ "  ต" (สังเกตการเว้นวรรคสองครั้งด้านหน้า "ต") หากใช้ /ต/ ก็จะได้ตำแหน่งเดียวกับตัวอย่างข้างต้น ซึ่งไม่ใช่ตัวที่ผมต้องการ... เหอ..นี่มันอะไรกัน อย่างนี้ไม่ต้องใช้ Reg(ต่อไปผมจะเรียกสั้นๆแค่นี้นะครับ) ก็ทำงานนี้ได้แล้วนี่? เอ่อ.. ในกรณีนี้ก็จริงครับ แต่ว่าลองมาดูตัวอย่างต่อไปที่จำเป็นต้องใช้ Reg อย่างเดียวจึงจะทำได้... เพราะหากคุณใช้ข้อความ(string)... จะเปลี่ยนได้แค่ตัวเดียว แต่นี่...

ไอ้นี้ ไอ้นั้น ไอ้นู้น ไมเกรน
กดที่นี่เพื่อเปลี่ยนคำไม่สุภาพข้างบนทั้งหมด

กดที่นี่เพื่อเปลี่ยนเป็นคำไม่สุภาพเหมือนเดิม

โค้ด(ของข้อความและปุ่มบน)...
<font color="red" id="j">ไอ้นี้ ไอ้นั้น ไอ้นู้น ไมเกรน</font><br>
<button style="zoom:1.5" onclick="n=j.innerText.replace(/ไ\W\W/gi,'อัน')
j.innerText=n">กดที่นี่เพื่อเปลี่ยนคำไม่สุภาพข้างบนทั้งหมด</button>

                    คำสั่ง replace(... , ...) ใช้สำหรับเปลี่ยนตัวอักษรหรือคำหรือที่ว่างหรืออะไรก็แล้วแต่ ในที่นี้คำที่จะเปลี่ยนเป็น /ไ\W\W/gi ซึ่งเป็น Reg และคำที่จะแทนที่ลงไปคือ 'อัน' ผมขอแยกส่วนของ Reg นี้เพื่อให้เข้าใจง่าย...

·         /   ขีดแรกสำหรับเริ่มต้น Reg

·         ไ   สระไอ... แสดงว่าในคำที่จะเปลี่ยนต้องมีสระไอนำหน้า

·         \W   นี่เป็นสัญลักษณ์เฉพาะที่ใช้ใน Reg (ซึ่งยังมีตัวประหลาดเช่นนี้อีกหลายตัว) \W หมายความว่าเป็นอะไรก็ได้ที่ไม่ใช่ตัวอักษรภาษาอังกฤษหรือตัวเลข ในที่นี้ผมมีเป้าหมายให้ใช้แทน "อ"

·         \W   ผมตั้งใจเอาไว้ใช้แทนไม้โท

·         /   ใส่เครื่องหมายทับอีกครั้งเพื่อปิดเนื้อหาใน Reg

·         gi   ทั้งสองตัวนี้ฝรั่งเขาเรียก Parameters ซึ่งก็มีอยู่ทั้งหมดแค่ 2 ตัวนี้ล่ะครับ ตัว g หมายความว่าใช้ Reg นี้กับข้อความทั้งหมด(j.innerText)
i หมายความว่า อักษรภาษาอังกฤษทั้งใหญ่และเล็กมีค่าเท่ากัน เช่น /Dog/ มีค่าเท่ากับ /dog/ ซึ่งจริงๆแล้วผมไม่ต้องใช้ในตัวอย่างนี้ก็ได้ครับ เพราะยุ่งแต่คำไทยทั้งหมด

                    คุณจะเห็นได้ว่า ไมเกรน ก็ถูกเปลี่ยนเป็น อันกรน เพราะ ไมเ ไปตรงกับ /ไ\W\W/gi นี่จึงถือว่า หากคุณจะระบุให้เปลี่ยนแต่ ไอ้ ก็ควรจะใช้ /ไอ้/gi ไปเลย   แต่ผมใช้แบบนั้น เพื่อให้คุณรู้จักสัญลักษณ์พิเศษที่ใช้ใน Reg เท่านั้นเองครับ

ใช้ Reg กับแบบฟอร์ม(เพื่อบังคับให้ผู้ใช้ใส่แต่ตัวเลข)

โปรดพิมพ์ลงไป แล้วกดที่นี่เพื่อทดสอบ

<center><button style="zoom:1.5" onclick="m()">
โปรดพิมพ์ลงไป แล้วกดที่นี่เพื่อทดสอบ</button></center>
<script>function m(){
e1=k.value
e2=k.value.replace(/\D/gi,'')
if(e1!=e2)
{alert("โปรดใส่แต่ตัวเลขครับ")
k.value=e2;k.focus()}
}</script>