งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

Javascript. Regular Expressions รูปแบบ (Pattern) ของกลุ่มตัวอักษร (Characters) ที่ใช้สำหรับค้นหาหรือเปรียบเทียบ กับข้อความ (String) เช่น ตรวจสอบค่าที่ผู้ใช้กรอกลงในแบบฟอร์ม.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "Javascript. Regular Expressions รูปแบบ (Pattern) ของกลุ่มตัวอักษร (Characters) ที่ใช้สำหรับค้นหาหรือเปรียบเทียบ กับข้อความ (String) เช่น ตรวจสอบค่าที่ผู้ใช้กรอกลงในแบบฟอร์ม."— ใบสำเนางานนำเสนอ:

1 Javascript

2 Regular Expressions รูปแบบ (Pattern) ของกลุ่มตัวอักษร (Characters) ที่ใช้สำหรับค้นหาหรือเปรียบเทียบ กับข้อความ (String) เช่น ตรวจสอบค่าที่ผู้ใช้กรอกลงในแบบฟอร์ม อีเมล์ ว่าอยู่ในรูปแบบอีเมล์ หรือไม่ ส่วนใหญ่ใช้ในการตรวจสอบความถูกต้องของ ข้อมูลที่กรอกลงในฟอร์มที่เว็บบราวเซอร์ของ ผู้ใช้เลย เรียกเทคนิคนี้ว่า Client-Side Validation

3 วิธีการสร้าง Object RegExp การสร้างด้วย Literal Syntax การสร้างด้วย Constructor Syntax

4 การสร้างด้วย Literal Syntax การกำหนดรูปแบบ (Pattern) ให้กับตัวแปร ค่ารูปแบบจะอยู่ภายในเครื่องหมาย “ // ” var regExp = /pattern/options; pattern รูปแบบที่ใช้ในการค้นหา options ออฟชันเพิ่มเติมสำหรับการค้นหา จะ ใส่หรือไม่ก็ได้ และ มากกว่าหนึ่งก็ได้ –i สำหรับค้นหากลุ่มอักษรทั้งตัวเล็กและ ตัวใหญ่ –g สำหรับค้นหากลุ่มตัวอักษรทั้งหมดใน ข้อความ –m สำหรับค้นหากลุ่มตัวอักษรในข้อความที่ มากกว่าหนึ่งบรรทัด

5 ตัวอย่าง การสร้างด้วย Literal Syntax var regExp = var regExp = /^\d{5}$/; var regExp = /chiangmai/i;

6 การสร้างด้วย Constructor Syntax var regExp = new RegExp(“pattern”,options); pattern รูปแบบที่ใช้ในการค้นหาหรือ เปรียบเทียบ options ออฟชันเพิ่มเติมในการค้นหา –i สำหรับค้นหากลุ่มอักษรทั้งตัวเล็กและตัว ใหญ่ –g สำหรับค้นหากลุ่มตัวอักษรทั้งหมดใน ข้อความ –m สำหรับค้นหากลุ่มตัวอักษรในข้อความที่ มากกว่าหนึ่งบรรทัด

7 ตัวอย่าง การสร้างด้วย Constructor Syntax var regExp = new var regExp = new RegExp(“^\\d{5}$”); var regExp = new RegExp(“chiangmai”, “i”);

8 การกำหนดรูปแบบ (Pattern) ประกอบไปด้วย 2 ส่วนหลัก ดังนี้ – กลุ่มตัวอักษรที่ต้องการค้นหา เช่น /javascript/ – เครื่องหมายพิเศษ (Metacharacters) เช่น /s$/

9 กลุ่มของการกำหนดรูปแบบ Positioning matching Character classes Repetition matching Alternation and grouping matching Special literal character matching Back reference matching

10 Positioning matching กลุ่มของเครื่องหมายพิเศษที่เกี่ยวข้องกับ ตำแหน่งในการค้นหา - ^(Caret) ใช้สำหรับกำหนดว่า ต้องอยู่หน้า สุดของข้อความ เช่น /^One/i“One day”true “Only one”false -$(Dollar) ใช้สำหรับกำหนดว่า ต้องอยู่ ท้ายสุดของข้อความ เช่น /man$/i“Woman”true “Many”false

11 -\b(Boundary) ใช้สำหรับกำหนดว่า ต้อง อยู่หน้าสุดของคำ หรือ ท้ายสุดของคำ ภายในข้อความ เช่น /ly\b/“really cool”true “lyric”false /\bja/i“Java”, “japan is nice”true - \B(Not Boundary) ใช้สำหรับกำหนดว่า ต้องไม่อยู่หน้าสุดของคำ หรือ ท้ายสุดของ คำ ภายในข้อความ

12 Character classes เครื่องหมายพิเศษที่ใช้สำหรับสร้างเซ็ทของ ตัวอักษรสำหรับรูปแบบค้นหา ใช้เครื่องหมาย “[ ]” เช่น [ab] คือ เซ็ทของ ตัวอักษร “a” หรือ “b” มีรูปแบบการใช้งานดังนี้ -[pattern] pattern เซ็ทของตัวอักษร เช่น /^[ab]/“apple”, “banana”true /[ab]/“bill”, “way”true /^s[au]/“sand”, “sun”true “sea”false

13 -[^pattern](Negate) ใช้สำหรับกำหนดว่า ต้อง ไม่อยู่ในเซ็ท เช่น /[^AN]BC/“BBC”true “ABC”, “NBC”false -[pattern - pattern] ใช้สำหรับกำหนดช่วงของ ตัวอักษร เช่น /[a-z]/ true หากมีตัวอักษร a ถึง z อย่างน้อยหนึ่งตัว /[0-9]/ true หากมีตัวเลข 0 ถึง 9 อย่าง น้อยหนึ่งตัว

14 นอกจากการใช้ “[ ]” ยังมีเครื่องหมายลัด ดังนี้ - \w[a-zA-Z0-9_] - \W[^a-zA-Z0-9_] - \d[0-9] - \D[^0-9] - \s ช่องว่าง (space) - \S ไม่ใช่ช่องว่าง -. (Dot) แทนตัวเลข, ตัวอักษร, เครื่องหมายใดๆ ( ยกเว้น \n )

15 Repetition matching เครื่องหมายพิเศษที่ช่วยระบุจำนวนครั้งของ รูปแบบที่ต้องการค้นหา -{n} กำหนดจำนวน n ครั้งของรูปแบบที่อยู่ ด้านหน้า {n} เช่น /\d{5}/“123456”, “12345a”true /^\d{5}$/“11010”true “20000x”, “123456”false

16 -{n, } กำหนดจำนวน n ครั้งหรือมากกว่า ของรูปแบบที่อยู่ด้านหน้า {n} เช่น /\d{5,}/“12345”, “123456”, “12345ab” true /^\d{5,}$/“123456”, “ ” true “123456ab” false

17 -{n,m} ใช้สำหรับกำหนด n ครั้ง แต่ไม่เกิน m ครั้งของรูปแบบที่อยู่ข้างหน้า {n,m} เช่น /\d{2,5}/ “10”, “100”, “100000”true /^\d{2,5}$/ “100”true “100000”false

18 -? ใช้กำหนดจำนวน 0 หรือ 1 ครั้งของ รูปแบบที่อยู่ข้างหน้า ? เช่น /colou?r/“colour”, “color”true -* ใช้กำหนดจำนวน 0 หรือ 1 ครั้งขึ้นไป ของรูปแบบที่อยู่ข้างหน้า * เช่น /tha*/ “th”, “thai”, “the”, “thaas”true -+ ใช้กำหนดจำนวน 1 ครั้งหรือมากกว่า ของรูปแบบที่อยู่ข้างหน้า + เช่น /fe+d/“fed”, “feed”true “food”false

19 Alternation and grouping matching Alternation matching เครื่องหมายพิเศษที่ ช่วยในการสร้างทางเลือกให้กับรูปแบบได้ Grouping matching เครื่องหมายพิเศษที่ ช่วยจับกลุ่มหรือสร้างกลุ่มย่อยให้กับรูปแบบ

20 -|(Alternation) ใช้สำหรับสร้างเงื่อนไข “ หรือ ” เช่น /bangkok|bkk/ “I live in bangkok”, “I live in bkk”true -( )(Grouping) ใช้สำหรับจับกลุ่มรูปแบบ หรือ สร้างกลุ่มย่อย ใช้ร่วมกับเครื่องหมายพิเศษอื่นๆ เช่น *, +, ?, | เป็นต้น เช่น /java(script)?/ “java”, “javascript”true

21 Special literal character matching ค้นหาเครื่องหมายพิเศษ หรือ ตัวอักษรที่ไม่มีบน คีย์บอร์ด -\t ค้นหาเครื่องหมาย Tab -\n ค้นหาเครื่องหมาย ขึ้นบรรทัดใหม่ -\uxxxx ค้นหาตัวอักษรตามรหัส Unicode เช่น \u00A9 คือ © -\punctuation ค้นหาเครื่องหมาย Metacharacters ต่างๆ เช่น \$“$” ไม่ใช่เครื่องหมาย ตัวปิดท้าย

22 Back reference matching เครื่องหมายพิเศษที่ใช้สำหรับอ้างอิงกลับไปยัง รูปแบบและผลการค้นหาก่อนหน้านี้ -( )( )…( )\n ใช้สำหรับคัดลอกรูปแบบและผล การค้นหาของวงเล็บที่อ้างอิง โดยที่ “n” หมายถึงเลขตำแหน่งของวงเล็บ ที่ใช้ในการกำหนดรูปแบบ และ “( )” จะมีกี่วงเล็บก็ได้

23 -/(A)(B)\1/“ABA”true “ABC”false -/(A)(B)(A)\2/“ABAB”true -/(\d+)=\1/“45=45”, “9=9”true “1=2”false

24 Method ของ String สำหรับทำ Pattern matching search() replace() match() split()

25 search(regExp:RegExp) : int ใช้สำหรับค้นหาว่า มีกลุ่มตัวอักษรตามรูปแบบ (regExp) ที่กำหนดหรือไม่ และจะส่งค่าคำแหน่ง กลับมาหากค้นเจอ หากไม่เจอจะส่งค่า -1 กลับมา หากส่งค่า string เข้าไป จะถูกเปลี่ยนเป็น object RegExp โดยอัตโนมัติ varstr = “JavaScript is Fun”; str.search(/script/i);4 str.search(“java”, “i”);0

26 replace(regExp:RegExp,replace:string) : string ใช้สำหรับค้นหาด้วยรูปแบบ (regExp) และแทนที่ ด้วยค่า string (replace) จะส่งค่า string ใหม่ที่ถูกแทนที่ออกมา ( ไม่ไป เปลี่ยนค่าที่ string เดิม ) var str = “Hello World, Java”; var newStr = str.replace(/java/i, “Javascript”); document.write(newStr);Hello World, Javascript

27 match(regExp:RegExp) : string[] ใช้สำหรับค้นหาและส่งค่าผลลัพธ์กลับมา เป็น Array หากไม่มีผลลัพธ์ จะคืนค่า null var str = “I love glove”; var result = str.match(/love/g); document.write(result.length);2

28 split(delimiter:string,limit:int) : string[] ใช้สำหรับแบ่งข้อความเป็นคำย่อยๆ โดยแบ่ง ด้วยรูปแบบ (delimiter) ที่กำหนด และ สามารถ กำหนดจำนวนคำ (limit) สูงสุดที่ถูกตัดได้ และ จะกำหนดหรือไม่ก็ได้ var str = “Rajamangala University of Technology Lanna”; var result = str.split(“ ”); document.write(result); Rajamangala,University,of,Technology,Lanna


ดาวน์โหลด ppt Javascript. Regular Expressions รูปแบบ (Pattern) ของกลุ่มตัวอักษร (Characters) ที่ใช้สำหรับค้นหาหรือเปรียบเทียบ กับข้อความ (String) เช่น ตรวจสอบค่าที่ผู้ใช้กรอกลงในแบบฟอร์ม.

งานนำเสนอที่คล้ายกัน


Ads by Google