Regex Tester สำหรับ JavaScript
พิมพ์ regular expression แล้วดูทุกส่วนที่ตรงกันถูกไฮไลต์ทันทีที่พิมพ์ พร้อม capture group ตัวอย่างการแทนที่ และคลังแพทเทิร์นสำเร็จรูป
ทำงานในเบราว์เซอร์ไม่ต้องสมัครไม่มีการอัปโหลด
ไฮไลต์รายการที่ตรงกัน
ใช้
$1, $<name>, $& (ทั้งส่วนที่ตรงกัน)
รายละเอียดการจับคู่
| # | ตำแหน่ง | ส่วนที่ตรงกัน | กลุ่ม |
|---|
สรุปไวยากรณ์ Regex
| . | อักขระใดก็ได้ยกเว้นขึ้นบรรทัดใหม่ (ทุกอักขระเมื่อใช้ s) |
| \d \w \s | ตัวเลข, อักขระคำ, ช่องว่าง |
| \D \W \S | ไม่ใช่ตัวเลข, ไม่ใช่อักขระคำ, ไม่ใช่ช่องว่าง |
| [abc] [^abc] | ตัวใดตัวหนึ่ง / ไม่ใช่ a, b, c |
| [a-z0-9] | ช่วงอักขระ |
| \p{L} \p{N} | ตัวอักษร / ตัวเลข Unicode (ต้องใช้ u) |
| ^ $ | จุดเริ่ม / จุดจบของข้อความ (ของบรรทัดเมื่อใช้ m) |
| \b \B | ขอบคำ / ไม่ใช่ขอบคำ |
| * + ? | 0 ครั้งขึ้นไป, 1 ครั้งขึ้นไป, 0 หรือ 1 ครั้ง |
| {n} {n,} {n,m} | n ครั้งพอดี, อย่างน้อย n ครั้ง, ระหว่าง n ถึง m ครั้ง |
| *? +? ?? | Lazy (น้อยที่สุดเท่าที่ได้) |
| a|b | a หรือ b |
| (…) | กลุ่มจับ อ้างอิงด้วย $1 |
| (?<name>…) | กลุ่มแบบมีชื่อ, $<name> |
| (?:…) | กลุ่มที่ไม่จับค่า |
| \1 \k<name> | Backreference (อ้างอิงย้อนกลับ) |
| (?=…) (?!…) | Lookahead / negative lookahead |
| (?<=…) (?<!…) | Lookbehind / negative lookbehind |
| \. \* \\ | อักขระตามตัวที่ escape แล้ว |
| \n \t \r | ขึ้นบรรทัดใหม่, แท็บ, carriage return |
| \uFFFF | Unicode code unit |
| \u{1F600} | Code point (ต้องใช้ u) |
| $& | ส่วนที่ตรงกันทั้งหมดในข้อความแทนที่ |
| $` $' | ข้อความก่อน / หลังส่วนที่ตรงกัน |
วิธีใช้ Regex Tester
- ป้อนแพทเทิร์นระหว่างเครื่องหมายทับ โดยไม่ต้องใส่
/ครอบ - เปิด/ปิดแฟล็ก เช่น
g(ทุกรายการที่ตรงกัน),i(ไม่สนตัวพิมพ์) และm(หลายบรรทัด) - วางข้อความทดสอบ ส่วนที่ตรงกันจะถูกไฮไลต์ทางขวา และแสดงรายการพร้อมตำแหน่งและ capture group ด้านล่าง
- ติ๊ก แทนที่ และป้อนข้อความแทนที่ เช่น
$1หรือ$<name>เพื่อดูตัวอย่างString.replace - เลือกแพทเทิร์นจาก คลังแพทเทิร์น เพื่อเริ่มจาก regex สำหรับอีเมล URL IP หรือวันที่ที่ผ่านการทดสอบแล้ว
Regular expression ของ JavaScript
ตัวทดสอบนี้ใช้เอนจิน RegExp ของเบราว์เซอร์คุณเอง ผลลัพธ์จึงตรงกับที่ String.match, matchAll, replace และ RegExp.exec ส่งคืนใน JavaScript และ Node.js ทุกประการ รวมถึงไวยากรณ์สมัยใหม่: กลุ่มแบบมีชื่อ (?<name>…), lookbehind (?<=…), Unicode property escape อย่าง \p{L} กับแฟล็ก u และตำแหน่งของการจับคู่กับแฟล็ก d
แฟล็กแต่ละตัวทำอะไร
| แฟล็ก | ชื่อ | ผล |
|---|---|---|
g | global | ค้นหาทุกรายการที่ตรงกัน แทนที่จะหยุดที่รายการแรก |
i | ignoreCase | ตัวอักษรตรงกันโดยไม่สนตัวพิมพ์เล็กใหญ่ |
m | multiline | ^ และ $ ตรงกับจุดเริ่มและจุดจบของแต่ละบรรทัด |
s | dotAll | . ตรงกับการขึ้นบรรทัดใหม่ด้วย |
u | unicode | ถือว่าแพทเทิร์นเป็น code point และเปิดใช้ \p{…} และ \u{…} |
y | sticky | จับคู่เฉพาะที่ตำแหน่ง lastIndex ปัจจุบัน |
d | hasIndices | รายงานตำแหน่งเริ่มและจบของแต่ละ capture group |
การป้องกัน catastrophic backtracking
แพทเทิร์นที่มี quantifier ซ้อนกัน เช่น (a+)+$ หรือ (\w|\d)*x อาจใช้เวลาแบบเอกซ์โพเนนเชียลกับข้อมูลที่เกือบตรงกัน ในหน้าเว็บปกติจะทำให้แท็บค้าง แต่ที่นี่การจับคู่ทุกครั้งทำงานใน Web Worker เบื้องหลังที่ถูกหยุดหลังหนึ่งวินาที และคุณจะได้รับคำเตือนที่ชัดเจนแทนเบราว์เซอร์ที่ค้าง แพทเทิร์นเดียวกันในโค้ด production อาจเป็นช่องโหว่ ReDoS จึงควรถือว่าคำเตือนนี้เป็นบั๊กที่ต้องแก้
เคล็ดลับการเขียน regex ที่ดีขึ้น
- ยึดแพทเทิร์นด้วย
^และ$เมื่อตรวจสอบค่าทั้งค่า มิฉะนั้นการตรงกันที่ใดก็ได้ในสตริงจะผ่าน - ใช้คลาสที่เจาะจงอย่าง
[^"]*แทน.*ซึ่งเร็วกว่าและไม่จับเกิน - ใช้กลุ่มที่ไม่จับค่า
(?:…)เมื่อไม่ต้องการค่าที่จับได้ - ตั้งชื่อให้กลุ่ม
match.groups.yearอ่านง่ายกว่าmatch[1]
คำถามที่พบบ่อย
ตัวทดสอบนี้ใช้ regex แบบใด?
JavaScript (ECMAScript) ผ่าน
RegExp ที่มีในเบราว์เซอร์ของคุณ ไวยากรณ์ส่วนใหญ่ใช้ร่วมกับ PCRE, Python และ Java แต่ฟีเจอร์อย่าง possessive quantifier, atomic group และ inline modifier เช่น (?i) ไม่มีใน JavaScriptทำไมแพทเทิร์นของฉันพบแค่รายการเดียว?
หากไม่มีแฟล็ก
g (global) JavaScript จะหยุดหลังรายการแรกที่ตรงกัน เปิด g เพื่อค้นหาทุกรายการอ้างอิงกลุ่มในข้อความแทนที่อย่างไร?
ใช้
$1, $2… สำหรับกลุ่มแบบตัวเลข, $<name> สำหรับกลุ่มแบบมีชื่อ, $& สำหรับส่วนที่ตรงกันทั้งหมด และ $$ สำหรับเครื่องหมายดอลลาร์ตามตัวทำไมตัวทดสอบหยุดเพราะหมดเวลา?
แพทเทิร์นใช้เวลามากกว่าหนึ่งวินาทีกับข้อมูลของคุณ ซึ่งแทบทุกครั้งหมายถึง catastrophic backtracking ให้มองหา quantifier ซ้อนกันอย่าง
(x+)+ หรือทางเลือกที่ทับซ้อนกันอย่าง (a|a)* แล้วเขียนใหม่ให้แต่ละอักขระจับคู่ได้เพียงวิธีเดียวข้อมูลทดสอบของฉันถูกส่งไปที่ใดหรือไม่?
ไม่ การจับคู่ทำงานภายในเครื่องใน Web Worker ในเบราว์เซอร์ของคุณ แพทเทิร์นและข้อความถูกเก็บไว้เฉพาะในเบราว์เซอร์ของคุณเอง เพื่อให้ยังอยู่เมื่อคุณกลับมา
เครื่องมือที่เกี่ยวข้อง
เปรียบเทียบข้อความ (Diff Checker)
เปรียบเทียบข้อความสองชุดแบบเคียงข้างกัน พร้อมไฮไลต์ระดับคำ
JSON Formatter
จัดรูปแบบ ย่อ และตรวจสอบ JSON พร้อมบอกบรรทัด/คอลัมน์ที่ผิด
URL Encode / Decode
เข้ารหัส/ถอดรหัส percent-encoding และแยก query string ของ URL
HTML Entity Encoder / Decoder
Escape อักขระพิเศษของ HTML หรือถอดรหัส &entities;