ตัวสร้างแผนภาพ Railroad ของ Regex
แปลง regular expression เป็นแผนภาพ railroad (syntax diagram) เห็น groups, character classes, alternation และ quantifiers ชัดเจนเป็นภาพ ฟรี ทันที
Loading tool...
วิธีวาดไดอะแกรม railroad จาก regex
- วาง pattern: พิมพ์หรือวาง regular expression ลงช่อง pattern โดยมีตัวอย่างจับ URL โหลดไว้ให้เห็นไดอะแกรมทันที และกด Reset เพื่อกลับตัวอย่างเดิมได้ตลอด
- อ่านไดอะแกรม: ไล่รางหลักจากซ้ายไปขวา ทางแยกคือ alternation, แถบลูปคือ quantifier และป้ายเล็ก ๆ บอกชนิด group เช่น named capture และ lookahead
- แก้ error ถ้ามี: ถ้า pattern parse ไม่ผ่าน ข้อความ error จะระบุตัวอักษรและตำแหน่งที่ผิด แก้แล้วไดอะแกรมจะวาดใหม่ทันทีขณะพิมพ์
- ส่งออกเป็น SVG: กด Copy SVG เพื่อคัดลอก หรือกด Download SVG เพื่อบันทึก railroad-diagram.svg ตามขนาดที่ป้าย dimensions แสดง
คุณสมบัติหลัก
- parser รองรับ regex เต็มรูปแบบ: literals, classes, ranges, escapes และ anchors
- alternation วาดเป็นกิ่งที่เรียงซ้อนกันพร้อมเส้นเดินสัญญาณชัดเจน
- quantifier *, +, ? และ {m,n} แสดงเป็นส่วนโค้ง bypass และวนกลับ
- capture group มีเลขกำกับตรงกับ index ของ match()
- lookaround และ named group มีป้ายกำกับบนแผนภาพ
- คัดลอกหรือดาวน์โหลด SVG ได้ในคลิกเดียว สำหรับเอกสารและ PR
คำถามที่พบบ่อย
ไดอะแกรมรองรับฟีเจอร์ regex แบบไหนบ้าง
รองรับ literal, character class, alternation, anchor, escape อย่าง \d และ \b, ทุกแบบของ group (capturing, non-capturing, named, lookahead, lookbehind) และ quantifier *, +, ?, {m,n} รวมถึงแบบ lazy
ทำไมเครื่องมือแสดง error แทนไดอะแกรม
ตัว parser จะบอกปัญหาและตำแหน่งที่แน่นอน เช่น วงเล็บไม่ปิดหรือแบ็กสแลชต่อท้าย ให้แก้ pattern ได้ตรงจุด และไดอะแกรมจะวาดใหม่ทันทีที่ pattern ใช้ได้
เอาไดอะแกรมไปใส่เอกสารหรือ README ได้อย่างไร
กด Copy SVG เพื่อคัดลอกโค้ด หรือกด Download SVG เพื่อบันทึกไฟล์ railroad-diagram.svg ซึ่งเป็น SVG แยกไฟล์ที่ย่อขยายได้ ใช้กับ markdown, wiki และสไลด์ได้สวยงาม
regex ที่วางจะถูกส่งขึ้นเซิร์ฟเวอร์หรือเปล่า
ไม่ การ parse และวาดไดอะแกรมทำงานในเบราว์เซอร์ทั้งหมด ไม่มีการส่งข้อมูลออกไป แพตเทิร์นที่เป็นความลับจึงอยู่กับเครื่องของคุณ