JavaScript Regulære Udtryk Tutorial (Komplet Syntaks + Almindelige Eksempler)

> Denne artikel er en komplet tutorial for JavaScript Regulære Udtryk (RegExp), fra begynder til avanceret. Den inkluderer syntaksregler, almindelige metategn, flags, assertions, gruppering, greedy versus lazy matching og kan anvendes til front-end udvikling, web-scraping, formvalidering og andre scenarier. Den er velegnet til både begyndere og avancerede brugere som lærings- og reference materiale.

Grundlæggende Regex Syntaks

To måder at oprette et regulært udtryk på

const regex1 = /abc/;             // Literal måde
const regex2 = new RegExp('abc'); // Konstruktør måde

Almindelige Flags

Flag	Beskrivelse
g	Globalt match
i	Case-insensitivt match
m	Multiline match
s	Tillader . at matche linjeskift (ES2018)
u	Understøtter Unicode (ES6)
y	Sticky matching (ES6)

Eksempel:

const re = /hello/gi;
const str = 'Hello hello';
console.log(str.match(re)); // ["Hello", "hello"]

---

Metategn og Tegnsæt

Almindelige Metategn

Tegn	Betydning
.	Matcher ethvert tegn (undtagen linjeskift)
\d	Matcher et ciffer [0-9]
\D	Matcher et ikke-ciffer tegn
\w	Matcher et ordtegn (alfanumerisk + underscore)
\W	Matcher et ikke-ordtegn
\s	Matcher et mellemrumstegn
\S	Matcher et ikke-mellemrumstegn
\b	Matcher en ordbegrænsning
\B	Matcher en ikke-ordbegrænsning
\\	Matcher en backslash

Tegnsæt og Områder

/[abc]/     // Matcher 'a' eller 'b' eller 'c'
/[a-z]/     // Matcher små bogstaver
/[A-Z]/     // Matcher store bogstaver
/[0-9]/     // Matcher cifre
/[^abc]/    // Matcher ethvert tegn undtagen a, b eller c

---

Kvantorer (Gentagelse)

Kvantor	Betydning
*	Matcher det foregående element 0 eller flere gange
+	Matcher det foregående element 1 eller flere gange
?	Matcher det foregående element 0 eller 1 gang
{n}	Matcher præcis n gange
{n,}	Matcher mindst n gange
{n,m}	Matcher mindst n gange, højst m gange

Eksempel:

/\d{4}/.test("2025");       // true
/ab{2,4}c/.test("abbbc");   // true

---

Gruppering og Fangst

/(abc)/         // Fangende gruppe
/(abc){2}/      // Fangende gruppe gentaget
/(?:abc)/       // Ikke-fangende gruppe
/(a)(b)(c)/     // Flere fangende grupper

Uddragning af matches:

const match = /(hello) (\w+)/.exec("hello world");
console.log(match[1]); // hello
console.log(match[2]); // world

---

Assertions (Zero-width Assertions)

Positiv Lookahead

/\d+(?=px)/     // Matcher cifre efterfulgt af px

Negativ Lookahead

/\d+(?!px)/     // Matcher cifre ikke efterfulgt af px

Lookbehind (ES2018+)

/(?<=\$)\d+/    // Matcher cifre forudgået af $
/(?<!$)\d+/    // Matcher cifre ikke forudgået af $

---

Greedy vs. Lazy Matching

Udtryk	Matching Adfærd
.*	Greedy (så meget som muligt)
.*?	Lazy (så lidt som muligt)

Eksempel:

const str = '<p>text</p><p>more</p>';
const greedy = /<p>.*<\/p>/;
const lazy = /<p>.*?<\/p>/g;

console.log(str.match(greedy)); // ['<p>text</p><p>more</p>']
console.log(str.match(lazy));   // ['<p>text</p>', '<p>more</p>']

---

Eksempler på Almindelige Anvendelsesscenarier

E-mail Validering

/^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/.test("[email protected]");

Mobilnummer Validering (Fastlandskina)

/^1[3-9]\d{9}$/.test("13888888888");

Fjern alt mellemrum

const cleaned = str.replace(/\s+/g, '');

Uddrag domæne fra URL

const domain = url.match(/https?:\/\/([^\/]+)/)[1];

---

Regex Metoder Oversigt

Metode	Beskrivelse
test(str)	Tester om strengen matcher
exec(str)	Returnerer matchresultat objekt (med grupper)
str.match(re)	Returnerer alle matches (med global flag)
str.replace()	Ersætter matchende indhold
str.split(re)	Opdeler strengen ved brug af regex
str.search(re)	Returnerer indekset for det første match

---

Konklusion

Denne tutorial giver et systematisk overblik over JavaScript Regulære Udtryks syntaks og praktiske anvendelseseksempler, egnet til front-end udvikling, back-end udvikling, tekstbehandling og forskellige andre anvendelsesscenarier. At mestre regulære udtryk kan i høj grad forbedre effektiviteten af strengbehandling.