JavaScript Mønstermatching med Regulære Udtryk: En Omfattende Guide

Regulære udtryk (regex) er et stærkt værktøj til mønstermatching og tekstmanipulation i JavaScript. De giver udviklere mulighed for at søge, validere og transformere strenge baseret på definerede mønstre. Denne guide giver en omfattende oversigt over regulære udtryk i JavaScript, der dækker syntaks, brug og avancerede teknikker.

Hvad er Regulære Udtryk?

Et regulært udtryk er en sekvens af tegn, der definerer et søgemønster. Disse mønstre bruges til at matche og manipulere strenge. Regulære udtryk bruges i vid udstrækning i programmering til opgaver som:

• Datavalidering: Sikre, at brugerinput overholder specifikke formater (f.eks. e-mailadresser, telefonnumre).
• Dataudtræk: Hente specifik information fra tekst (f.eks. udtrække datoer, URL'er eller priser).
• Søg og Erstat: Finde og erstatte tekst baseret på komplekse mønstre.
• Tekstbehandling: Opdele, sammenføje eller transformere strenge baseret på definerede regler.

Oprettelse af Regulære Udtryk i JavaScript

I JavaScript kan regulære udtryk oprettes på to måder:

1. Brug af en "Regular Expression Literal": Indeslut mønsteret i skråstreger (/).
2. Brug af RegExp-konstruktøren: Opret et RegExp-objekt med mønsteret som en streng.

Eksempel:

// Brug af en "regular expression literal"
const regexLiteral = /hello/;

// Brug af RegExp-konstruktøren
const regexConstructor = new RegExp("hello");

Valget mellem de to metoder afhænger af, om mønsteret er kendt ved kompileringstidspunktet eller genereres dynamisk. Brug literal-notationen, når mønsteret er fast og kendt på forhånd. Brug konstruktøren, når mønsteret skal bygges programmatisk, især når variabler skal indarbejdes.

Grundlæggende Regex-Syntaks

Regulære udtryk består af tegn, der repræsenterer det mønster, der skal matches. Her er nogle grundlæggende regex-komponenter:

• Literale tegn: Matcher tegnene selv (f.eks. /a/ matcher tegnet 'a').
• Metategn: Har specielle betydninger (f.eks. ., ^, $, *, +, ?, [], {}, (), \, |).
• Tegnklasser: Repræsenterer sæt af tegn (f.eks. [abc] matcher 'a', 'b' eller 'c').
• Kvantifikatorer: Angiver, hvor mange gange et tegn eller en gruppe skal forekomme (f.eks. *, +, ?, {n}, {n,}, {n,m}).
• Ankre: Matcher positioner i strengen (f.eks. ^ matcher begyndelsen, $ matcher slutningen).

Almindelige Metategn:

• . (punktum): Matcher ethvert enkelt tegn undtagen linjeskift.
• ^ (caret): Matcher begyndelsen af strengen.
• $ (dollar): Matcher slutningen af strengen.
• * (asterisk): Matcher nul eller flere forekomster af det foregående tegn eller gruppe.
• + (plus): Matcher en eller flere forekomster af det foregående tegn eller gruppe.
• ? (spørgsmålstegn): Matcher nul eller én forekomst af det foregående tegn eller gruppe. Bruges til valgfrie tegn.
• [] (firkantede parenteser): Definerer en tegnklasse, der matcher ethvert enkelt tegn inden for parenteserne.
• {} (tuborgklammer): Angiver antallet af forekomster, der skal matches. {n} matcher præcis n gange, {n,} matcher n eller flere gange, {n,m} matcher mellem n og m gange.
• () (parenteser): Grupperer tegn sammen og fanger den matchede understreng.
• \ (backslash): Escaper metategn, så du kan matche dem bogstaveligt.
• | (pipe): Fungerer som en "eller"-operator, der matcher enten udtrykket før eller efter den.

Tegnklasser:

• [abc]: Matcher et af tegnene a, b eller c.
• [^abc]: Matcher ethvert tegn, der *ikke* er a, b eller c.
• [a-z]: Matcher ethvert lille bogstav fra a til z.
• [A-Z]: Matcher ethvert stort bogstav fra A til Z.
• [0-9]: Matcher ethvert ciffer fra 0 til 9.
• [a-zA-Z0-9]: Matcher ethvert alfanumerisk tegn.
• \d: Matcher ethvert ciffer (svarende til [0-9]).
• \D: Matcher ethvert ikke-ciffer tegn (svarende til [^0-9]).
• \w: Matcher ethvert ord-tegn (alfanumerisk plus understreg; svarende til [a-zA-Z0-9_]).
• \W: Matcher ethvert ikke-ord-tegn (svarende til [^a-zA-Z0-9_]).
• \s: Matcher ethvert blanktegn (mellemrum, tabulator, linjeskift, osv.).
• \S: Matcher ethvert tegn, der ikke er et blanktegn.

Kvantifikatorer:

• *: Matcher det foregående element nul eller flere gange. For eksempel matcher a* "", "a", "aa", "aaa", og så videre.
• +: Matcher det foregående element en eller flere gange. For eksempel matcher a+ "a", "aa", "aaa", men ikke "".
• ?: Matcher det foregående element nul eller én gang. For eksempel matcher a? "" eller "a".
• {n}: Matcher det foregående element præcis *n* gange. For eksempel matcher a{3} "aaa".
• {n,}: Matcher det foregående element *n* eller flere gange. For eksempel matcher a{2,} "aa", "aaa", "aaaa", og så videre.
• {n,m}: Matcher det foregående element mellem *n* og *m* gange (inklusiv). For eksempel matcher a{2,4} "aa", "aaa" eller "aaaa".

Ankre:

• ^: Matcher begyndelsen af strengen. For eksempel matcher ^Hello strenge, der *starter* med "Hello".
• $: Matcher slutningen af strengen. For eksempel matcher World$ strenge, der *slutter* med "World".
• \b: Matcher en ordgrænse. Dette er positionen mellem et ord-tegn (\w) og et ikke-ord-tegn (\W) eller begyndelsen eller slutningen af strengen. For eksempel matcher \bword\b hele ordet "word".

Flags:

Regex-flags ændrer adfærden for regulære udtryk. De tilføjes i slutningen af regex-literalen eller gives som et andet argument til RegExp-konstruktøren.

• g (global): Matcher alle forekomster af mønsteret, ikke kun den første.
• i (ignore case): Udfører matchning, der ignorerer store og små bogstaver.
• m (multiline): Aktiverer multiline-tilstand, hvor ^ og $ matcher begyndelsen og slutningen af hver linje (adskilt af \n).
• s (dotAll): Gør det muligt for punktummet (.) også at matche linjeskiftstegn.
• u (unicode): Aktiverer fuld Unicode-understøttelse.
• y (sticky): Matcher kun fra det indeks, der er angivet af regex'ets lastIndex-egenskab.

JavaScript Regex-Metoder

JavaScript tilbyder flere metoder til at arbejde med regulære udtryk:

• test(): Tester, om en streng matcher mønsteret. Returnerer true eller false.
• exec(): Udfører en søgning efter et match i en streng. Returnerer et array, der indeholder den matchede tekst og fangede grupper, eller null hvis intet match findes.
• match(): Returnerer et array, der indeholder resultaterne af at matche en streng mod et regulært udtryk. Opfører sig forskelligt med og uden g-flaget.
• search(): Tester for et match i en streng. Returnerer indekset for det første match, eller -1 hvis intet match findes.
• replace(): Erstatter forekomster af et mønster med en erstatningsstreng eller en funktion, der returnerer erstatningsstrengen.
• split(): Opdeler en streng i et array af understrenge baseret på et regulært udtryk.

Eksempler på Brug af 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'-flag
const regex3 = /\d+/g; // Matcher et eller flere cifre globalt
const str3 = "There are 123 apples and 456 oranges.";
const matches = str3.match(regex3);
console.log(matches); // Output: ["123", "456"]

// match() uden 'g'-flag
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"]

Avancerede Regex-Teknikker

Capturing Groups (Fangstgrupper):

Parenteser () bruges til at oprette "capturing groups" (fangstgrupper) i regulære udtryk. Fangstgrupper giver dig mulighed for at udtrække specifikke dele af den matchede tekst. Metoderne exec() og match() returnerer et array, hvor det første element er hele matchet, og de efterfølgende elementer er de fangede grupper.

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 (Hele matchet)
console.log(match[1]); // Output: 2023 (Den første fangede gruppe - år)
console.log(match[2]); // Output: 10 (Den anden fangede gruppe - måned)
console.log(match[3]); // Output: 27 (Den tredje fangede gruppe - dag)

Navngivne Fangstgrupper:

ES2018 introducerede navngivne fangstgrupper, som giver dig mulighed for at tildele navne til fangstgrupper ved hjælp af syntaksen (?...). Dette gør koden mere læsbar og vedligeholdelsesvenlig.

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

Ikke-Fangende Grupper:

Hvis du har brug for at gruppere dele af et regex uden at fange dem (f.eks. for at anvende en kvantifikator på en gruppe), kan du bruge en ikke-fangende gruppe med syntaksen (?:...). Dette undgår unødvendig hukommelsesallokering til fangede grupper.

const regex = /(?:https?:\/\/)?([\w\.]+)/; // Matcher en URL, men fanger kun domænenavnet
const url = "https://www.example.com/path";
const match = regex.exec(url);

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

Lookarounds:

Lookarounds er "zero-width assertions", der matcher en position i en streng baseret på et mønster, der kommer før (lookbehind) eller efter (lookahead) den position, uden at inkludere lookaround-mønsteret i selve matchet.

• Positive Lookahead: (?=...) Matcher, hvis mønsteret inde i lookahead'en *følger* den aktuelle position.
• Negative Lookahead: (?!...) Matcher, hvis mønsteret inde i lookahead'en *ikke* følger den aktuelle position.
• Positive Lookbehind: (?<=...) Matcher, hvis mønsteret inde i lookbehind'en *kommer før* den aktuelle position.
• Negative Lookbehind: (? Matcher, hvis mønsteret inde i lookbehind'en *ikke* kommer før den aktuelle position.

// Positive Lookahead: Hent prisen kun, når den efterfølges af USD
const regex = /\d+(?= USD)/;
const text = "The price is 100 USD";
const match = text.match(regex);
console.log(match); // Output: ["100"]

// Negative Lookahead: Hent ordet kun, når det ikke efterfølges af et tal
const regex2 = /\b\w+\b(?! \d)/;
const text2 = "apple 123 banana orange 456";
const matches = text2.match(regex2);
console.log(matches); // Output: null because match() only returns the first match without 'g' flag, which isn't what we need.
// for at rette 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' ]

// Positive Lookbehind: Hent værdien kun, når den er forudgået af $
const regex4 = /(?<=\$)\d+/;
const text4 = "The price is $200";
const match4 = text4.match(regex4);
console.log(match4); // Output: ["200"]

// Negative Lookbehind: Hent ordet kun, når det ikke er forudgået af 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; //Korrigeret 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-eksempel)
console.log(phoneRegex.test("+44 20 7946 0500")); // Output: true (UK-eksempel)
console.log(phoneRegex.test("+81 3 3224 5000"));  // Output: true (Japan-eksempel)
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 (intet stort bogstav eller tal)
console.log(passwordRegex.test("Password"));       // Output: false (intet tal)
console.log(passwordRegex.test("Pass123"));        // Output: false (intet lille bogstav)
console.log(passwordRegex.test("P@ss1"));          // Output: false (mindre end 8 tegn)