Så Testar Du Ett Reguljärt Uttryck Online (Med Verkliga Exempel)
Du testar ett reguljärt uttryck genom att skriva mönstret mellan /-avgränsare, slå på de flaggor du behöver (oftast g om du vill hitta fler än en träff), köra det mot en verklig teststräng och sedan kontrollera två saker: att de gula markeringarna täcker exakt den text du förväntar dig, och att eventuella fångade grupper innehåller rätt delsträngar. Först då är mönstret klart att klistras in i produktionskod.
Mönster, flaggor och grupper: så hänger de ihop
Ett regex-mönster skrivs mellan två snedstreck, /mönster/, precis som fältet i verktyget nedan förväntar sig. Allt mellan strecken är själva sökuttrycket. Efter det andra snedstrecket kan du lägga till en eller flera flaggor som ändrar hur mönstret tolkas:
- g (global): hittar alla träffar i strängen, inte bara den första. Utan
gstannar motorn direkt vid första träff. - i (case-insensitive): gör matchningen skiftlägesokänslig, så
RegexochREGEXräknas som samma sak. - m (multiline): får
^och$att matcha början och slutet av varje rad i en flerradig sträng, inte bara hela strängens start och slut. - s (dotAll): gör att punkten
.även matchar radbrytningar, vilket den annars aldrig gör.
Parenteser () i mönstret skapar en fångad grupp, en delmängd av träffen som du kan läsa ut separat efteråt. Namngivna grupper som (?<year>\d{4}) fungerar likadant men ger gruppen ett namn i stället för bara ett nummer, vilket gör koden som läser resultatet betydligt lättare att förstå senare.
Fyra mönster, testade i praktiken
Nedan är fyra mönster som täcker olika vanliga uppgifter: e-postvalidering, hexadecimala färgkoder, REST-liknande sökvägar och ett datumformat. Alla fyra går att klistra rakt in i verktyget längre ner på sidan.
| Mönster | Flaggor | Matchar | Matchar inte | Fångar |
|---|---|---|---|---|
^[\w.+-]+@[\w-]+\.[a-zA-Z]{2,}$ | inga | [email protected] | jane@example (ingen toppdomän) | inget |
#([0-9a-fA-F]{6}|[0-9a-fA-F]{3}) | g | #2F7BFF, #fff | #12G456 (G är inte hex) | Grupp 1: 2F7BFF |
\/(\w+)\/(\w[\w-]*) | g | /users/123, /products/abc-456 | /users (ingen andra del) | Grupp 1: resurstyp, Grupp 2: id |
^\d{4}-\d{2}-\d{2}$ | inga | 2026-07-11 | 07/11/2026 (fel format) | inget |
Sökvägsmönstret: \/(\w+)\/(\w[\w-]*)
Det här mönstret är byggt för att plocka isär en enkel REST-liknande URL i två delar. \/ matchar ett bokstavligt snedstreck (det måste escapas eftersom / annars skulle tolkas som avgränsare i vissa motorer). Direkt efter kommer (\w+), en fångad grupp som samlar en eller flera “ord-tecken” (bokstäver, siffror, understreck), och det blir resurstypen: users, products och så vidare. Sedan upprepas samma struktur, ett nytt \/ följt av (\w[\w-]*), en andra grupp som kräver att första tecknet är ett ord-tecken men sedan tillåter bindestreck också, vilket fångar id:n som abc-456. Kör mönstret mot /users/123 och du får Grupp 1 lika med users och Grupp 2 lika med 123. Kör det mot bara /users och det matchar inte alls, eftersom det andra \/(...)-blocket aldrig hittar något att fylla. Det här är precis den typ av mönster du använder för att bygga en enkel routervalidator: kontrollera att en inkommande sökväg har exakt formen /resurs/id innan du ens försöker slå upp något i databasen, och läs ut resurstyp och id direkt från grupperna i stället för att göra en manuell split('/') och hoppas att indexen stämmer.
Hex-färgmönstret: #([0-9a-fA-F]{6}|[0-9a-fA-F]{3})
Det här mönstret jagar CSS-färgkoder. # matchar det bokstavliga fyrkantstecknet, och resten sitter i en fångad grupp med två alternativ separerade av |: antingen exakt sex hexadecimala tecken ([0-9a-fA-F]{6}, den långa formen som 2F7BFF) eller exakt tre ([0-9a-fA-F]{3}, kortformen som fff). Regexmotorn provar alternativen i ordning och tar det första som passar på den positionen. Här är g-flaggan helt avgörande: en CSS-fil eller en designtoken-lista innehåller vanligtvis många färgkoder, och utan g skulle mönstret ge dig exakt en träff, den första, och sedan tyst ignorera resten av filen. Med g påslaget hittar det varje förekomst, och för varje träff kan du läsa Grupp 1 för att få själva hex-värdet utan #-tecknet. Det är precis vad du behöver om du vill bygga ett litet skript som drar ut alla brand-färger ur en CSS-fil och samlar dem i en lista, eller kontrollerar att ingen ogiltig färgkod (till exempel #12G456, där G inte är ett giltigt hex-tecken) har smugit sig in i en design-token-fil.
Testa själv
Klistra in ditt eget mönster och en teststräng nedan, så ser du markeringarna och de fångade grupperna uppdateras direkt medan du skriver.
Vanliga misstag och specialfall
Att glömma g-flaggan. Utan den stannar regexet efter första träffen, vilket tyst förstör allt som förväntar sig alla förekomster, till exempel ett “ersätt alla”-anrop som bara ersätter den första matchningen och lämnar resten orörd utan att kasta något fel.
Den oescapade punkten. En oescapad . matchar vilket tecken som helst, inte en bokstavlig punkt. Mönstret 192.168.1.1 matchar därför även 192X168X1X1, eftersom varje punkt i mönstret bara betyder “ett godtyckligt tecken här”. Använd \. när du faktiskt menar en bokstavlig punkt.
Giriga kontra lata kvantifierare. .* tar så mycket som möjligt (girig), vilket kan sträcka sig långt bortom det avsedda stället, till exempel matcha från första < till det allra sista > i ett helt HTML-block i stället för en enda tagg. .*? (lat) stannar i stället vid första möjliga punkt, vilket oftast är det du faktiskt vill ha.
Saknade ankare. Utan ^ och $ kan ett mönster matcha som delsträng var som helst i texten, så ett “validerings”-mönster utan ankare kan godkänna en sträng som bara innehåller en giltig del någonstans i mitten, vilket släpper igenom ogiltig indata. ^ och $ tvingar hela strängen att matcha, från första till sista tecken, vilket är precis vad du vill ha i ett valideringsmönster som e-postexemplet ovan.
Vanliga frågor
Vad är den faktiska skillnaden mellan att använda g-flaggan och att utelämna den?
Utan g returnerar motorn ett enda matchningsobjekt, det första den hittar, och stannar där även om texten innehåller fler förekomster. Med g fortsätter sökningen genom hela strängen och samlar varje träff i en lista. Skillnaden märks tydligast vid ersättning eller extraktion: ett replace-anrop utan g byter bara ut den första förekomsten, medan samma anrop med g byter ut alla.
Hur matchar jag ett bokstavligt specialtecken som en punkt, dollartecken eller parentes?
Föregå tecknet med ett bakstreck: \. för en bokstavlig punkt, \$ för ett dollartecken, \( och \) för parenteser. Tecken som . ^ $ * + ? ( ) [ ] { } | \ / har alla särskild betydelse i ett regex-mönster, så om du menar tecknet självt och inte dess specialfunktion måste det escapas.
Vad är en icke-fångande grupp, (?:…), och när behöver jag en sådan istället för en vanlig (…)-grupp?
En icke-fångande grupp grupperar en del av mönstret, till exempel för att applicera en kvantifierare på flera tecken samtidigt eller bygga upp alternativ med |, men utan att spara innehållet som en numrerad fångad grupp i resultatet. Du använder den när du behöver strukturen som gruppering ger, men inte bryr dig om att läsa ut just den delen efteråt. Det håller ner antalet grupper i resultatet till bara de du faktiskt tänker använda, vilket gör koden som läser ut Grupp 1, Grupp 2 och så vidare mindre förvirrande.
Skickar det här verktyget mitt mönster eller min testtext någonstans? Nej. Allt körs i webbläsaren via den inbyggda JavaScript RegExp-motorn, ingenting skickas till en server. Både mönstret och teststrängen stannar lokalt på din enhet under hela testet.