Aloittelija2-3 tuntia🛠️ Kehittäjätyökalut

Regex-testaaja

Testaa ja debuggaa säännöllisiä lausekkeita.

Teknologiat:Next.jsTypeScriptTailwind CSS

Aloitusprompt

Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.

Luo regex-testaaja.

Layout:
- Regex-input (flags: g, i, m checkboksit)
- Testiteksti-alue (suuri)
- Match-tulokset (lista)
- Cheat sheet (sivupalkki)

Toiminnot:
- Reaaliaikainen regex-tarkistus
- Matchien korostus tekstissä
- Capture groupit värikoodattuna
- Virheviestit (invalid regex)
- Replace-tila

Cheat sheet:
- Merkit: . ^ $ * + ? | \ [] ()
- Luokat: \d \w \s \b
- Quantifiers, anchors, groups

Esimerkit:
- Email, puhelin, postinumero, URL

Tech: Next.js, TypeScript, Tailwind CSS

Ominaisuudet

Tässä projektissa rakennetaan seuraavat ominaisuudet:

1Reaaliaikainen testaus
2Match-korostus
3Ryhmien näyttö
4Cheat sheet
5Esimerkkipatternit

Vaiheet

1

Perustestaus

Luo regex-input ja testiteksti.

Prompti:

Luo regex-testaaja: input regex-patternille, suuri tekstialue testistrelle. Korosta matchit tekstissä reaaliajassa eri väreillä.
2

Match-tiedot

Näytä yksityiskohtaiset tiedot.

Prompti:

Näytä match-tiedot: montako osumaa, jokaisen osuman teksti ja sijainti, capture groupit. Listaa matchit korteissa.
3

Opetusmateriaalit

Lisää cheat sheet ja esimerkit.

Prompti:

Lisää sivupalkki regex cheat sheetillä (^, $, *, +, ?, [], jne.). Lisää valmiita esimerkkipatterneja (email, puhelin, URL).

Laajennusideat

Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:

  • Regex debugger step-by-step
  • Tallenna patternit
  • Generoi regex kuvauksesta
  • Suorituskykyanalyysi
  • Export useaan kieleen

Lisää projekti-ideoita

Selaa kaikkia kehittäjätyökalut projekteja tai tutustu muihin kategorioihin.