JavaScript-mönstermatchning med reguljära uttryck: En omfattande guide

Reguljära uttryck (regex) är ett kraftfullt verktyg för mönstermatchning och textmanipulering i JavaScript. De gör det möjligt för utvecklare att söka, validera och omvandla strängar baserat på definierade mönster. Denna guide ger en omfattande översikt över reguljära uttryck i JavaScript, och täcker syntax, användning och avancerade tekniker.

Vad är reguljära uttryck?

Ett reguljärt uttryck är en sekvens av tecken som definierar ett sökmönster. Dessa mönster används för att matcha och manipulera strängar. Reguljära uttryck används i stor utsträckning inom programmering för uppgifter som:

• Datavalidering: Säkerställa att användarinmatning följer specifika format (t.ex. e-postadresser, telefonnummer).
• Dataextraktion: Hämta specifik information från text (t.ex. extrahera datum, URL:er eller priser).
• Sök och ersätt: Hitta och ersätta text baserat på komplexa mönster.
• Textbehandling: Dela, sammanfoga eller omvandla strängar baserat på definierade regler.

Skapa reguljära uttryck i JavaScript

I JavaScript kan reguljära uttryck skapas på två sätt:

1. Använda en reguljär uttrycksliteral: Omslut mönstret med snedstreck (/).
2. Använda RegExp-konstruktorn: Skapa ett RegExp-objekt med mönstret som en sträng.

Exempel:

// Använda en reguljär uttrycksliteral
const regexLiteral = /hello/;

// Använda RegExp-konstruktorn
const regexConstructor = new RegExp("hello");

Valet mellan de två metoderna beror på om mönstret är känt vid kompileringstid eller genereras dynamiskt. Använd literalnotationen när mönstret är fast och känt i förväg. Använd konstruktorn när mönstret behöver byggas programmatiskt, särskilt när variabler ska inkluderas.

Grundläggande regex-syntax

Reguljära uttryck består av tecken som representerar mönstret som ska matchas. Här är några grundläggande regex-komponenter:

• Literala tecken: Matchar tecknen själva (t.ex. /a/ matchar tecknet 'a').
• Metatecken: Har speciella betydelser (t.ex. ., ^, $, *, +, ?, [], {}, (), \, |).
• Teckenklasser: Representerar uppsättningar av tecken (t.ex. [abc] matchar 'a', 'b' eller 'c').
• Kvantifierare: Anger hur många gånger ett tecken eller en grupp ska förekomma (t.ex. *, +, ?, {n}, {n,}, {n,m}).
• Ankare: Matchar positioner i strängen (t.ex. ^ matchar början, $ matchar slutet).

Vanliga metatecken:

• . (punkt): Matchar vilket enskilt tecken som helst utom nyradstecken.
• ^ (caret): Matchar början av strängen.
• $ (dollar): Matchar slutet av strängen.
• * (asterisk): Matchar noll eller flera förekomster av föregående tecken eller grupp.
• + (plus): Matchar en eller flera förekomster av föregående tecken eller grupp.
• ? (frågetecken): Matchar noll eller en förekomst av föregående tecken eller grupp. Används för valfria tecken.
• [] (hakparenteser): Definierar en teckenklass, matchar vilket enskilt tecken som helst inom parenteserna.
• {} (klammerparenteser): Anger antalet förekomster som ska matchas. {n} matchar exakt n gånger, {n,} matchar n eller fler gånger, {n,m} matchar mellan n och m gånger.
• () (parenteser): Grupperar tecken tillsammans och fångar den matchade delsträngen.
• \ (omvänt snedstreck): Escapar metatecken, vilket gör att du kan matcha dem bokstavligt.
• | (pipe): Fungerar som en "eller"-operator och matchar antingen uttrycket före eller efter den.

Teckenklasser:

• [abc]: Matchar något av tecknen a, b eller c.
• [^abc]: Matchar vilket tecken som helst som *inte* är a, b eller c.
• [a-z]: Matchar vilken gemen bokstav som helst från a till z.
• [A-Z]: Matchar vilken versal bokstav som helst från A till Z.
• [0-9]: Matchar vilken siffra som helst från 0 till 9.
• [a-zA-Z0-9]: Matchar vilket alfanumeriskt tecken som helst.
• \d: Matchar vilken siffra som helst (motsvarar [0-9]).
• \D: Matchar vilket tecken som helst som inte är en siffra (motsvarar [^0-9]).
• \w: Matchar vilket ordtecken som helst (alfanumeriskt plus understreck; motsvarar [a-zA-Z0-9_]).
• \W: Matchar vilket tecken som helst som inte är ett ordtecken (motsvarar [^a-zA-Z0-9_]).
• \s: Matchar vilket blankstegstecken som helst (mellanslag, tab, nyrad, etc.).
• \S: Matchar vilket tecken som helst som inte är ett blanksteg.

Kvantifierare:

• *: Matchar föregående element noll eller flera gånger. Till exempel matchar a* "", "a", "aa", "aaa" och så vidare.
• +: Matchar föregående element en eller flera gånger. Till exempel matchar a+ "a", "aa", "aaa", men inte "".
• ?: Matchar föregående element noll eller en gång. Till exempel matchar a? "" eller "a".
• {n}: Matchar föregående element exakt *n* gånger. Till exempel matchar a{3} "aaa".
• {n,}: Matchar föregående element *n* eller flera gånger. Till exempel matchar a{2,} "aa", "aaa", "aaaa" och så vidare.
• {n,m}: Matchar föregående element mellan *n* och *m* gånger (inklusive). Till exempel matchar a{2,4} "aa", "aaa" eller "aaaa".

Ankare:

• ^: Matchar början av strängen. Till exempel matchar ^Hello strängar som *börjar* med "Hello".
• $: Matchar slutet av strängen. Till exempel matchar World$ strängar som *slutar* med "World".
• \b: Matchar en ordgräns. Detta är positionen mellan ett ordtecken (\w) och ett icke-ordtecken (\W) eller början eller slutet av strängen. Till exempel matchar \bword\b hela ordet "word".

Flaggor:

Regex-flaggor modifierar beteendet hos reguljära uttryck. De läggs till i slutet av regex-literalen eller skickas som ett andra argument till RegExp-konstruktorn.

• g (global): Matchar alla förekomster av mönstret, inte bara den första.
• i (ignore case): Utför skiftlägesokänslig matchning.
• m (multiline): Aktiverar flerradsläge, där ^ och $ matchar början och slutet av varje rad (separerad med \n).
• s (dotAll): Låter punkten (.) matcha även nyradstecken.
• u (unicode): Aktiverar fullt Unicode-stöd.
• y (sticky): Matchar endast från det index som anges av regexets lastIndex-egenskap.

JavaScript Regex-metoder

JavaScript tillhandahåller flera metoder för att arbeta med reguljära uttryck:

• test(): Testar om en sträng matchar mönstret. Returnerar true eller false.
• exec(): Utför en sökning efter en matchning i en sträng. Returnerar en array som innehåller den matchade texten och fångade grupper, eller null om ingen matchning hittas.
• match(): Returnerar en array som innehåller resultaten av att matcha en sträng mot ett reguljärt uttryck. Beter sig olika med och utan g-flaggan.
• search(): Testar för en matchning i en sträng. Returnerar indexet för den första matchningen, eller -1 om ingen matchning hittas.
• replace(): Ersätter förekomster av ett mönster med en ersättningssträng eller en funktion som returnerar ersättningssträngen.
• split(): Delar upp en sträng i en array av delsträngar baserat på ett reguljärt uttryck.

Exempel med Regex-metoder:

// test()
const regex = /hello/;
const str = "hello world";
console.log(regex.test(str)); // Output: true

// exec()
const regex2 = /hello (\w+)/;
const str2 = "hello world";
const result = regex2.exec(str2);
console.log(result); // Output: ["hello world", "world", index: 0, input: "hello world", groups: undefined]

// match() med 'g'-flaggan
const regex3 = /\d+/g; // Matchar en eller flera siffror globalt
const str3 = "There are 123 apples and 456 oranges.";
const matches = str3.match(regex3);
console.log(matches); // Output: ["123", "456"]

// match() utan 'g'-flaggan
const regex4 = /\d+/;
const str4 = "There are 123 apples and 456 oranges.";
const match = str4.match(regex4);
console.log(match); // Output: ["123", index: 11, input: "There are 123 apples and 456 oranges.", groups: undefined]

// search()
const regex5 = /world/;
const str5 = "hello world";
console.log(str5.search(regex5)); // Output: 6

// replace()
const regex6 = /world/;
const str6 = "hello world";
const newStr = str6.replace(regex6, "JavaScript");
console.log(newStr); // Output: hello JavaScript

// replace() med en funktion
const regex7 = /(\d+)-(\d+)-(\d+)/;
const str7 = "Today's date is 2023-10-27";
const newStr2 = str7.replace(regex7, (match, year, month, day) => {
  return `${day}/${month}/${year}`;
});
console.log(newStr2); // Output: Today's date is 27/10/2023

// split()
const regex8 = /, /;
const str8 = "apple, banana, cherry";
const arr = str8.split(regex8);
console.log(arr); // Output: ["apple", "banana", "cherry"]

Avancerade Regex-tekniker

Fångstgrupper (Capturing Groups):

Parenteser () används för att skapa fångstgrupper i reguljära uttryck. Fångade grupper låter dig extrahera specifika delar av den matchade texten. Metoderna exec() och match() returnerar en array där det första elementet är hela matchningen, och efterföljande element är de fångade grupperna.

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match[0]); // Output: 2023-10-27 (Hela matchningen)
console.log(match[1]); // Output: 2023 (Den första fångade gruppen - år)
console.log(match[2]); // Output: 10 (Den andra fångade gruppen - månad)
console.log(match[3]); // Output: 27 (Den tredje fångade gruppen - dag)

Namngivna fångstgrupper:

ES2018 introducerade namngivna fångstgrupper, vilket gör att du kan tilldela namn till fångstgrupper med syntaxen (?...). Detta gör koden mer läsbar och underhållbar.

const regex = /(?\d{4})-(?\d{2})-(?\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match.groups.year);  // Output: 2023
console.log(match.groups.month); // Output: 10
console.log(match.groups.day);   // Output: 27

Icke-fångande grupper:

Om du behöver gruppera delar av ett regex utan att fånga dem (t.ex. för att tillämpa en kvantifierare på en grupp), kan du använda en icke-fångande grupp med syntaxen (?:...). Detta undviker onödig minnesallokering för fångade grupper.

const regex = /(?:https?:\/\/)?([\w\.]+)/; // Matchar en URL men fångar bara domännamnet
const url = "https://www.example.com/path";
const match = regex.exec(url);

console.log(match[1]); // Output: www.example.com

Lookarounds:

Lookarounds är nollbreddsassertioner som matchar en position i en sträng baserat på ett mönster som föregår (lookbehind) eller följer (lookahead) den positionen, utan att inkludera lookaround-mönstret i själva matchningen.

• Positiv Lookahead: (?=...) Matchar om mönstret inuti lookahead *följer* den aktuella positionen.
• Negativ Lookahead: (?!...) Matchar om mönstret inuti lookahead *inte* följer den aktuella positionen.
• Positiv Lookbehind: (?<=...) Matchar om mönstret inuti lookbehind *föregår* den aktuella positionen.
• Negativ Lookbehind: (? Matchar om mönstret inuti lookbehind *inte* föregår den aktuella positionen.

// Positiv Lookahead: Hämta priset endast när det följs av USD
const regex = /\d+(?= USD)/;
const text = "The price is 100 USD";
const match = text.match(regex);
console.log(match); // Output: ["100"]

// Negativ Lookahead: Hämta ordet endast när det inte följs av ett nummer
const regex2 = /\b\w+\b(?! \d)/;
const text2 = "apple 123 banana orange 456";
const matches = text2.match(regex2);
console.log(matches); // Output: null eftersom match() bara returnerar den första matchningen utan 'g'-flaggan, vilket inte är vad vi behöver.
// för att fixa det:
const regex3 = /\b\w+\b(?! \d)/g;
const text3 = "apple 123 banana orange 456";
const matches3 = text3.match(regex3);
console.log(matches3); // Output: [ 'banana' ]

// Positiv Lookbehind: Hämta värdet endast när det föregås av $
const regex4 = /(?<=\$)\d+/;
const text4 = "The price is $200";
const match4 = text4.match(regex4);
console.log(match4); // Output: ["200"]

// Negativ Lookbehind: Hämta ordet endast när det inte föregås av ordet 'not'
const regex5 = /(?

const regex = /([a-z]+) \1/;
const text = "hello hello world";
const match = regex.exec(text);
console.log(match); // Output: ["hello hello", "hello", index: 0, input: "hello hello world", groups: undefined]

const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

console.log(emailRegex.test("test@example.com"));    // Output: true
console.log(emailRegex.test("invalid-email"));       // Output: false
console.log(emailRegex.test("test@sub.example.co.uk")); // Output: true

const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
const text = "Visit our website at https://www.example.com or check out http://blog.example.org.";
const urls = text.match(urlRegex);
console.log(urls); // Output: ["https://www.example.com", "http://blog.example.org"]

const csvString = 'John,Doe,"123, Main St",New York';
const csvRegex = /(?:"([^"]*(?:""[^"]*)*)")|([^,]+)/g; //Korrigerat CSV-regex
let values = [];
let match;  

while (match = csvRegex.exec(csvString)) {
  values.push(match[1] ? match[1].replace(/""/g, '"') : match[2]);
}


console.log(values); // Output: ["John", "Doe", "123, Main St", "New York"]

const phoneRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
console.log(phoneRegex.test("+1 555 123 4567")); // Output: true (USA-exempel)
console.log(phoneRegex.test("+44 20 7946 0500")); // Output: true (UK-exempel)
console.log(phoneRegex.test("+81 3 3224 5000"));  // Output: true (Japan-exempel)
console.log(phoneRegex.test("123-456-7890"));   // Output: false

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

console.log(passwordRegex.test("P@ssword123")); // Output: true
console.log(passwordRegex.test("password"));       // Output: false (ingen versal eller siffra)
console.log(passwordRegex.test("Password"));       // Output: false (ingen siffra)
console.log(passwordRegex.test("Pass123"));        // Output: false (ingen gemen)
console.log(passwordRegex.test("P@ss1"));          // Output: false (mindre än 8 tecken)