ดูตัวอย่างสั้นๆเพื่อเอาไปใช้งานได้รวดเร็วคลิก
Regular Expression
มักใช้สำหรับ Search ,Replace , และ Filter ข้อมูลที่เป็น String ตัวอย่างเช่น การตรวจสอบ E-mail ใน input text ว่าผู้ใช้กรอกข้อมูลถูกต้องหรือไม่ ตัวอย่างที่จะมาสาธิตให้ดูเป็นภาษา javascript
Pattern เป็นรูปแบบ Regular Expression ที่เรากำหนด
Modifier เป็นเงื่อนไขการตรวจสอบของ Regular Expression
ตัวอย่างการใช้งานเบื้องต้น Regular Expression มี String อยู่ 3 ชุด
ชุดที่ 1 This is bat
ชุดที่ 2 This is hat
ชุดที่ 3 bat is animal
ต้องการตรวจสอบว่าประเภทชุดไหนบ้างที่มีคำว่า bat ไม่สนใจตัวใหญ่เล็กของตัวอักษรด้วย สามารถใช้ Regular Expression ด้วย javascript ได้ว่า
//เก็บข้อมูล 3 ชุด
var str = new Array();
str[0] = “This is bat”;
str[1]=”This is hat”;
str[2] = “bat is animal”
//กำหนด Regular Expression กรณี
ไม่สนใจตัวใหญ่ตัวเล็กให้ใช้ Modifier เป็น i
var batPatt = /bat/i;
//วนลูปตรวจสอบ
for(var i=0;i<str.length;i++){
document.write(i+" "+batPatt.test(str[i])+",");
}
จะได้ output ออกทางหน้าจอว่า
0 true,1 false,2 true,
แสดงว่า Array ช่องที่ 0 และ 2 มีคำว่า bat
การใช้งาน Regular Expression เงื่อนไขเพิ่มเติมโดยดูจากรายละเอียดตามตารางต่อไปนี้
ตัวอย่าง 1:
มีข้อมูล M062_PAGE2, M054_PAGE3, M065_PAGE1,F011_PAGE1, M073_PAGE2, F003_PAGE2,AF01_PAGE4
ต้องการกรองข้อมูลให้เหลือแต่ประเภทที่ขึ้นต้นด้วย M เท่านั้น คำตอบต้องได้
M062_PAGE2, M054_PAGE3, M065_PAGE1, M073_PAGE2 เท่านั้น สามารถเขียน Regular Expression ตาม Step ได้ดังนี้
เขียนรูปแบบ Pattern เบี้องต้นมาก่อน
var patt = //;
ข้อมูลขึ้นต้นด้วย M ใช้ ^
var patt = /^M/
แล้วต่อด้วยเลข 0-9 จำนวน 3 หลัก ใช้ [0-9] จำนวน{3}
var patt = /^M[0-9]{3}/
ตามด้วย _ underscore และคำว่า PAGE
var patt = /^M[0-9]{3}_PAGE/
แล้วต่อด้วยเลขหน้า PAGE ที่เป็น 0-9 จำนวน 1 หลักขึ้นไป ใช้ {1,}
var patt = /^M[0-9]{3}_PAGE[0-9]{1,}/
ตัวอย่างที่ 2 : มีข้อมูลใน Array str2 ดังนี้
var str2 = new Array();
str2[0] = "hotmail.com";
str2[1]= "google.co.th";
str2[2] = "3gpass.com";
str2[3] = "anything.co.th.cb";
str2[4] = "11.144.34.1";
str2[5] = "123.com.co";
str2[6] = "aga12.com.th";
ต้องกรองให้เหลือแต่ข้อมูลเว็บไซค์ hotmail.com, google.co.th, aga12.com.th
วิเคราะห์ได้ว่า
1.ห้ามขึ้นต้นด้วยตัวเลข แต่ตามด้วยตัวเลขได้
2.สามารถมีประโยคจำพวก .com หรือ .co ได้ 1 – 2 ครั้ง แต่อย่างต่ำต้องมี เช่น hotmail.com
3.ข้อมูลหลังจุดจำพวก .com มีตัวอักษรได้น้อยสุด 2 มากสุด 3 เช่น .co กับ .com
เมื่อวิเคราะห์แล้วทำตามสเตปได้ดังนี้
เขียนรูปแบบ Pattern เบี้องต้นมาก่อน
var patt = //;
ข้อมูลขึ้นต้นด้วยตัวอักษรเท่านั้น ถึงแม้จะมี 1 ตัวก็ต้องเป็นตัวอักษรขึ้นต้นไว้ก่อน
กำหนดการขึ้นต้นด้วย ^ และกำหนดตัวอักษรด้วย [a-zA-Z] อย่างน้อย 1 ตัวใช้ {1}
var patt = /^[a-zA-Z]{1}/
นอกนั้นจะตามด้วยเลขก็ไม่เกี่ยง ตัวอักษรก็ไม่เป็นไรใช้ \w อ้างอิงถึงตัวอักษรและตัวเลข แต่ตัวเลขหรือตัวอักษรนี้จะมีหรือไม่มีก็ได้ ใช้ * เป็นตัวกำหนด
var patt = /^[a-zA-Z]{1}\w*/
ต่อจากนั้นต้องตามด้วย จุด ก่อนประโยคพวก .com
var patt = /^[a-zA-Z]{1}\w*\./
และตามด้วยประโยค com หรือco ซึ่งต้องมีตัวอักษรขั้นต่ำ 2 ตัวสูงสุด 3 ใช้
[a-zA-Z]{2,3} เพื่อกำหนดจำนวนตัวอักษรหลังจุด
var patt = /^[a-zA-Z]{1}\w*\.[a-zA-Z]{2,3}/
หลังจากนั้นจะมีประโยคพวก .com หรือ .co จะมีหรือไม่มีก็ได้ โดยเงื่อนไขเหมือนกับก่อนหน้านี้คือ \.[a-zA-Z]{2,3} จัดเป็นกลุ่มโดยใช้วงเล็บ (\.[a-zA-Z]{2,3}) กำหนดว่ามีหรือไม่มีก็ได้ หรือถ้ามีให้มีได้แค่ หนึ่ง เท่านั้น ใช้ ? เราจัดเงื่อนไขเป็นกลุ่มไว้เพื่อให้ ? กำหนดทั้งกลุ่มเงื่อนไขนั้น ได้ว่า (\.[a-zA-Z]{2,3})? ซึ่งก็คือประโยค (\.[a-zA-Z]{2,3}) จะมีหรือไม่มีก็ได้ แต่ถ้ามีมีได้แค่หนึ่ง กำหนดลอง pattern ได้ดังนี้
var patt = /^[a-zA-Z]{1}\w*\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?/
เราต้องการให้เงื่อนไขเราตรวจสอบเป๊ะๆทั้งหัวและท้าย หัวเราใช้ ^ ไปแล้ว ท้ายให้เราใช้ $ เพื่อกำหนดว่า หลังจาก $ ห้ามมีอย่างอื่นอีก เพราะตรงนี้คือท้ายประโยคแล้ว
var patt = /^[a-zA-Z]{1}\w*\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?$/;
เสร็จสมบูรณ์ให้ลองทดสอบดู
การแทนข้อความด้วย Regular Expression
การแทนข้อความเราใช้ฟังก์ชั่น String Replace โดยพารามิเตอร์เป็น Regular Expression
ก่อนหน้านั้นมาดูการใช้ฟังก์ชัน String Replace คร่าวๆก่อน
String Replace ไว้สำหรับแทนข้อความที่กำหนด ใช้ Regular Expression
ทดสอบ String Replace และเปรียบเทียบ Modifier หลายคงสงสัยกันว่า แต่ละ Modifier ของ Regular Expression มันต่างกันอย่างไร
- Global (ที่เติม g) หมายถึงเมื่อพบข้อความที่กำหนดแล้วให้หาให้หมดทั้ง string นั้น
- case-insensitive (ที่เติม i) หมายถึงไม่สนใจว่าตัวอักษรจะใหญ่หรือเล็ก เช่น A กับ a คือตัวเดียวกัน
Modifier สามารถใช้ผสมกันได้
ตัวอย่าง เรากำหนดรูปแบบ Regular Expression ต่างกัน 4 แบบ
//Regular Expression ตรวจจับว่า คำไหนที่ขึ้นต้นด้วยอักษร h ซึ่งตัวตรงกลางที่เป็นจุดเป็นตัวอะไรก็ได้ จากนั้นตามด้วย t ให้ Regular Expression ค้นหา
var regExp = /h.t/;
var regExpGlobal = /h.t/g;
var regExpInsen = /h.t/i;
var regExpGlobalInsen = /h.t/gi;
//String ตัวอย่าง
var str = "I have a Hat that hat have been shadow and hut when pot hotting";
document.write(str+"<br/>");
document.write("default -> "+str.replace(regExp,"***")+"<br/>");
document.write("global -> "+str.replace(regExpGlobal,"***")+"<br/>");
document.write("case-insensitive -> "+str.replace(regExpInsen,"***")+"<br/>");
document.write("global and case-insensitive -> "+str.replace(regExpGlobalInsen,"***")+"<br/>");
ผลลัพธ์ออกทางหน้าจอ
เห็นว่าการใช้ default จะยังเห็นตัวใหญ่ตัวเล็กต่างกันอยู่ การใช้ Global จะตรวจจับทั้งข้อความหมดประโยค case-insensitive ไม่สนใจตัวใหญ่เล็ก Hat เลยโดนไปตัวแรกแต่เนื่องจากไม่ใช่ Global ตัวต่อไปเลยไม่ถูกแทนที่ ถ้าเราผสม Global กับ insensitive เข้าละก็ ไม่ว่า Hat hat haT ก็โดนแทนค่าทุกตัว
ตัวอย่าง การบล๊อกข้อความคำหยาบแบบง่ายๆ
var patt = /(kuy|fuck|shit)/i;
var str = new Array();
str[0] = "Damn you shit!!";
str[1] = "I hate you fuck";
str[2] = "kuy por mung di";
for(var i =0; i<str.length;i++){
document.write(str[i].replace(patt,"Teddy"));
document.write("<br/>");
}
ตรวจคำศัพท์ที่เป็นคำหยาบหรือเป็นคำที่ต้องการ kuy, fuck, shit ให้เปลี่ยนเป็นคำว่า Teddy แทน(เพื่อความน่ารักมากขึ้น)
String.Match(Pattern)
ตัวอย่างต่อไป ให้สวมบทบาทเป็นผู้สังเกตการเราต้องการสังเกตข้อมูลใน Internet อยากรู้ว่ามีใครบอกรักใครบ้างในวัน Valentie Day ใน Facebook เราโดยข้อมูลมากเกินที่เราจะมองด้วยตาเปล่า เราก็ทำการ Copy ข้อมูลทั้งหมดใน Facebook โดนคลุมดำแล้ว Copy แล้ว Paste เก็บลง String ตัวหนึ่ง สิ่งที่เราต้องการคือต้องการอยากรู้ว่า ใครบอก loveใครบ้าง เช่น Suda love Sam หรือ I love you ให้กรองข้อความเหล่านี้ออกมาจากข้อความทั้งหมด
ตรวจจับการบอกรักกัน
var patt = /\S+\slove\s\S+/ig;
var str = new Array();
str[0] = "I love daddy love me love you , SAM love BOE too ";
str[1] = "And Boy love Suda Improve";
str[2] = "Lovely my boyfriend";
str[3] = "Good morning, My love";
str[4] = "I love you, Henry";
str[5] = "Brain love I have to fuck her";
str[6] = "I love you";
str[7] = "I love you ";
str[8] = "Hey, That's work I'm love its";
str[9] = " If you are a developer, tester or script guru, you have to love Groovy.";
str[10] = "Valentie's is my love.";
for(var i=0;i<str.length;i++){
document.write(str[i].match(patt));
document.write("<br/>");
}//--------------------------output--------------------------------------------------
I love daddy,me love you,SAM love BOE
Boy love Suda
null
null
I love you,
Brain love I
I love you
I love you
I'm love its
to love Groovy.
null
Test() ใช้ตรวจสอบข้อความว่าเป็นไปตาม Regular Expression ที่กำหนดหรือไม่
รายละเอียดอื่นๆ
เขียนโดย ธนดิตถ์ บุตร์หงษ์ , Thanadit Buthong,heaven-front@hotmail.com,Mirror of Kagami
อ้างอิงข้อมูลโดย w3school และอื่นๆ
1. มี Code ตัวเลข 6 ตัว "010110" ต้องการทำให้เป็น Array 3 ชุดชุดละสองตัว(ใช้ regular expression เข้าช่วย)
2.มี ชุดข้อมูลที่จังหวัดอำเภอตำบล ต้องการแยกเก็บใน Array 3 ชุด ตัวอย่างข้อมูล "กรุงเทพมหานคร บางบอน บางโค"
3.ชุดข้อความที่อยู่ "บ้านอู่สำเภอ ซ.- ถ.- จังหวัด - อำเภอ ดำเนินสะดวก จ.ราชบุรี" ถ้าข้อมูลไม่มี(ข้อมูลที่ถูก -)ไม่ต้องแสดง เช่นให้แสดงเป็น "บ้านอู่สำเภอ อำเภอ ดำเนินสะดวก จ.ราชบุรี"
