Utilia
Mga kategorya ▾
Wika: fil ▾

Regex Railroad Diagram

Gawing malinaw na railroad diagram ang JavaScript regular expression, kasama ang mga group, alternatibo, loop at lookaround, at i-export bilang SVG o PNG.

Mga flag: alinman sa d g i m s u v y. Puwede ka ring mag-paste ng literal gaya ng /\d+/g.

Mga capturing group
–
Mga alternation
–
Mga quantifier
–

Railroad diagram

Asul: literal na text. Berde: mga uri ng karakter at set (pula: hindi kasama na set). Lila: mga anchor at hangganan. Kahel: mga back-reference. Putol-putol na kahon: mga group at lookaround. Ang daan sa itaas ng isang item ay lumalaktaw dito, ang daan sa ibaba ay umuulit dito.

Paano i-visualize ang regular expression

  1. I-type o i-paste ang iyong pattern sa Regular expression. Puwede ka ring mag-paste ng kumpletong JavaScript literal gaya ng /^\d{3}-\d{4}$/gm: aalisin ang mga slash at awtomatikong lilipat ang mga flag sa kahon ng mga flag.
  2. Magdagdag ng mga flag kung kailangan (alinman sa d g i m s u v y). Binabago ng mga flag kung paano iginuguhit ang ilang bahagi: kapag may m, ang ^ at $ ay nagiging “simula ng linya” at “dulo ng linya”; kapag may s, ang tuldok ay nagiging “anumang karakter”.
  3. Nag-a-update ang diagram habang nagta-type ka. Ang Iguhit ang diagram ay iginuguhit ulit ito kapag hiniling, at ang Susunod na halimbawa ay umiikot sa ilang karaniwang pattern (email, numero ng telepono, hex na kulay, presyo, HTML tag, URL).
  4. Basahin ang diagram mula kaliwa pakanan, mula sa punô na tuldok hanggang sa tuldok na may singsing. Bawat daang masusundan mo ay isang string na matutugunan ng pattern.
  5. Gamitin ang I-download ang SVG para sa malinaw na vector na larawan (dokumentasyon, slide), I-download ang PNG para sa larawang doble ang resolution, o Kopyahin ang SVG code para i-paste ang markup sa isang web page.

I-hover ang isang kahon para makita ang bahagi ng pattern na pinanggalingan nito at ang posisyon nito.

Paano basahin ang railroad diagram

Inilalarawan ng mga railroad diagram, tinatawag ding syntax diagram, ang isang grammar bilang hanay ng mga riles. Ang regular expression ay eksaktong ganitong grammar, kaya mas malinaw na ipinapakita ng drawing ang istruktura nito kaysa sa siksik na linya ng mga simbolo:

  • Ang mga asul na kahon ay literal na text na dapat lumitaw ayon sa pagkakasulat, halimbawa “@”.
  • Ang mga berdeng kahon ay mga uri ng karakter (\d digit, \w karakter ng salita, . anumang karakter…) at mga character class. Ang class na gaya ng [\w.+-] ay nagiging kahon na may pamagat na “isa sa” na naglilista ng bawat item; ang negated na class na [^…] ay pula at may pamagat na “wala sa”.
  • Ang mga lilang pill ay mga anchor at hangganan: simula at dulo ng text o linya, \b hangganan ng salita. Posisyon ang tinutugunan nila, hindi karakter.
  • Ang mga kahel na putol-putol na kahon ay mga back-reference gaya ng \1 o \k<name>: ang parehong text ng group na natugunan kanina.
  • Ang mga putol-putol na balangkas ay mga group. Binibilang ang mga capturing group ayon sa pagkakasunod ng pambukas na panaklong (“group #2 “domain””); walang balangkas ang mga non-capturing group na (?:…). May kulay-rosas na balangkas ang mga lookahead at lookbehind na may label na “sinusundan ng” o “inuunahan ng”, dahil sinusuri nila ang text nang hindi ito kinukuha.
  • Ang magkakahiwalay na riles ay mga alternatibong pinaghihiwalay ng |.
  • Ang riles sa itaas ng isang item ay nagpapalaktaw dito (?, *, {0,n}). Ang riles sa ibaba na may arrow ay bumabalik para ulitin ito (+, *, {n,m}). Isinusulat sa ilalim ng loop ang mga bilang na hindi karaniwan, gaya ng “2 hanggang 5 beses”, at minamarkahang “lazy” ang mga lazy quantifier (+?, *?).

Mga error message na may posisyon

Sinusuri ng sarili mong JavaScript regular expression engine ng browser ang pattern, kaya ang tinatanggap ng tool na ito ay eksaktong tinatanggap ng new RegExp() na may parehong mga flag. Kapag tinanggihan ito ng engine, itinuturo ng tool ang may problemang karakter kasama ang posisyon nito at isang caret sa ilalim ng pattern. Nakikilala nito ang ) na walang katugma, group na hindi isinara, character class na walang ], quantifier na walang uulitin (*a, a|+), nag-iisang backslash sa dulo at mga quantifier na {n,m} kung saan mas malaki ang n kaysa sa m. Ang ibang error, gaya ng back-reference sa pangalan ng group na hindi umiiral, ay ipinapakita kasama ang mensahe ng browser.

Kino-compile lang ang expression para i-validate ito: hindi ito kailanman pinatatakbo laban sa anumang text, at walang lumalabas sa iyong browser.

Mga madalas itanong

Aling regex flavour ang sinusuportahan ng tool na ito?

Mga JavaScript (ECMAScript) regular expression, kasama ang mga named group, lookbehind, Unicode property escape na \p{…} at ang flag na v na may nested na class. Karaniwang gumagana rin ang mga pattern mula sa PCRE, Python o Java, pero tinatanggihan ang syntax na espesipiko sa mga engine na iyon, gaya ng possessive quantifier o (?P<name>…), dahil hindi ito sinusuportahan ng browser.

Bakit hindi iginuguhit bilang kahon ang non-capturing group ko?

Ang group na gaya ng (?:\.[\w-]+) ay nagpapangkat lang ng mga item para mailapat sa lahat ng ito ang quantifier o alternation. Hindi ito gumagawa ng capture, kaya ipinapakita ng diagram ang laman at loop nito nang walang balangkas, na nagpapanatiling madaling basahin ang drawing. May balangkas at label na mga flag ang mga group na may inline flag.

Ano ang pagkakaiba ng riles na lumalaktaw at ng loop?

Ang riles sa itaas ng item ay nangangahulugang “pinapayagan ang zero na beses”, at ang riles sa ibaba ay “puwede itong ulitin”. Ang ? ay may riles sa itaas lang, ang + ay sa ibaba lang, at ang * ay may pareho. Para sa quantifier na gaya ng {2,4}, may label na “2 hanggang 4 beses” ang loop.

Magagamit ko ba ang diagram sa aking dokumentasyon?

Oo. Ang SVG export ay standalone na vector file na may puting background at maitim na linya, perpekto para sa mga README, wiki at slide. Ang PNG export ay nire-render sa doble ng laki ng drawing sa screen para malinaw sa mga high-density na screen.

May limitasyon ba sa laki?

Hanggang 5,000 karakter ang haba ng mga pattern. Ang napakahabang expression ay gumagawa ng malapad na diagram na maaari mong i-scroll nang pahalang; kadalasang pinapadali ng paghahati sa mga pinangalanang bahagi ang pag-maintain ng diagram at ng regex.

Mga kaugnay na tool