JavaScript mintaillesztés reguláris kifejezésekkel: Egy átfogó útmutató

A reguláris kifejezések (regex) egy hatékony eszköz a mintaillesztésre és szövegmanipulációra JavaScriptben. Lehetővé teszik a fejlesztők számára, hogy definiált minták alapján keressenek, validáljanak és alakítsanak át stringeket. Ez az útmutató átfogó áttekintést nyújt a reguláris kifejezésekről JavaScriptben, kitérve a szintaxisra, használatra és haladó technikákra.

Mik azok a reguláris kifejezések?

A reguláris kifejezés egy karaktersorozat, amely egy keresési mintát definiál. Ezeket a mintákat stringek illesztésére és manipulálására használják. A reguláris kifejezéseket széles körben használják a programozásban olyan feladatokra, mint:

• Adatvalidálás: Annak biztosítása, hogy a felhasználói bevitel megfeleljen bizonyos formátumoknak (pl. e-mail címek, telefonszámok).
• Adatkinyerés: Specifikus információk kinyerése szövegből (pl. dátumok, URL-ek vagy árak kinyerése).
• Keresés és csere: Szöveg keresése és cseréje komplex minták alapján.
• Szövegfeldolgozás: Stringek felosztása, összekapcsolása vagy átalakítása definiált szabályok alapján.

Reguláris kifejezések létrehozása JavaScriptben

JavaScriptben a reguláris kifejezések kétféleképpen hozhatók létre:

1. Reguláris kifejezés literál használatával: A mintát perjelek (/) közé kell tenni.
2. A RegExp konstruktor használatával: Egy RegExp objektum létrehozása a mintával stringként.

Példa:

// Reguláris kifejezés literál használata
const regexLiteral = /hello/;

// A RegExp konstruktor használata
const regexConstructor = new RegExp("hello");

A két módszer közötti választás attól függ, hogy a minta fordítási időben ismert-e vagy dinamikusan generált. Használja a literális jelölést, ha a minta rögzített és előre ismert. Használja a konstruktort, ha a mintát programozottan kell felépíteni, különösen változók beépítésekor.

Alapvető Regex szintaxis

A reguláris kifejezések karakterekből állnak, amelyek a keresendő mintát képviselik. Íme néhány alapvető regex komponens:

• Literális karakterek: Magukat a karaktereket illesztik (pl. a /a/ az 'a' karakterre illeszkedik).
• Metakarakterek: Különleges jelentéssel bírnak (pl. ., ^, $, *, +, ?, [], {}, (), \, |).
• Karakterosztályok: Karakterkészleteket képviselnek (pl. a [abc] illeszkedik az 'a', 'b' vagy 'c' karakterekre).
• Kvantorok: Meghatározzák, hogy egy karakter vagy csoport hányszor forduljon elő (pl. *, +, ?, {n}, {n,}, {n,m}).
• Horgonyok: Pozíciókra illeszkednek a stringben (pl. a ^ az elejére, a $ a végére illeszkedik).

Gyakori metakarakterek:

• . (pont): Bármely egyetlen karakterre illeszkedik, kivéve az újsort.
• ^ (kalap): A string elejére illeszkedik.
• $ (dollárjel): A string végére illeszkedik.
• * (csillag): Az előző karakterre vagy csoportra illeszkedik nulla vagy több alkalommal.
• + (plusz): Az előző karakterre vagy csoportra illeszkedik egy vagy több alkalommal.
• ? (kérdőjel): Az előző karakterre vagy csoportra illeszkedik nulla vagy egy alkalommal. Opcionális karakterekhez használatos.
• [] (szögletes zárójelek): Karakterosztályt definiál, a zárójeleken belüli bármely egyetlen karakterre illeszkedik.
• {} (kapcsos zárójelek): Az illesztendő előfordulások számát határozza meg. A {n} pontosan n alkalommal illeszkedik, az {n,} n vagy több alkalommal, az {n,m} pedig n és m között (beleértve).
• () (zárójelek): Karaktereket csoportosít és elfogja az illesztett részstringet.
• \ (fordított perjel): Escapeli a metakaraktereket, lehetővé téve azok literális illesztését.
• | (függőleges vonal): „Vagy” operátorként működik, az előtte vagy utána lévő kifejezésre illeszkedik.

Karakterosztályok:

• [abc]: Illeszkedik az a, b vagy c karakterek bármelyikére.
• [^abc]: Illeszkedik bármely karakterre, amely *nem* a, b vagy c.
• [a-z]: Illeszkedik bármely kisbetűs karakterre a-tól z-ig.
• [A-Z]: Illeszkedik bármely nagybetűs karakterre A-tól Z-ig.
• [0-9]: Illeszkedik bármely számjegyre 0-tól 9-ig.
• [a-zA-Z0-9]: Illeszkedik bármely alfanumerikus karakterre.
• \d: Bármely számjegyre illeszkedik (egyenértékű a [0-9]-cel).
• \D: Bármely nem-számjegy karakterre illeszkedik (egyenértékű a [^0-9]-cel).
• \w: Bármely szókarakterre illeszkedik (alfanumerikus plusz aláhúzás; egyenértékű a [a-zA-Z0-9_]-vel).
• \W: Bármely nem-szókarakterre illeszkedik (egyenértékű a [^a-zA-Z0-9_]-vel).
• \s: Bármely whitespace karakterre illeszkedik (szóköz, tab, újsor, stb.).
• \S: Bármely nem-whitespace karakterre illeszkedik.

Kvantorok:

• *: Az előző elemre illeszkedik nulla vagy több alkalommal. Például az a* illeszkedik a "", "a", "aa", "aaa" és így tovább.
• +: Az előző elemre illeszkedik egy vagy több alkalommal. Például az a+ illeszkedik az "a", "aa", "aaa" karakterekre, de a ""-re nem.
• ?: Az előző elemre illeszkedik nulla vagy egy alkalommal. Például az a? illeszkedik a ""-re vagy az "a"-ra.
• {n}: Az előző elemre pontosan *n* alkalommal illeszkedik. Például az a{3} az "aaa"-ra illeszkedik.
• {n,}: Az előző elemre *n* vagy több alkalommal illeszkedik. Például az a{2,} illeszkedik az "aa", "aaa", "aaaa" és így tovább.
• {n,m}: Az előző elemre *n* és *m* között (beleértve) illeszkedik. Például az a{2,4} illeszkedik az "aa", "aaa" vagy "aaaa" karakterekre.

Horgonyok:

• ^: A string elejére illeszkedik. Például a ^Hello olyan stringekre illeszkedik, amelyek a "Hello"-val *kezdődnek*.
• $: A string végére illeszkedik. Például a World$ olyan stringekre illeszkedik, amelyek a "World"-del *végződnek*.
• \b: Szóhatárra illeszkedik. Ez a pozíció egy szókarakter (\w) és egy nem-szókarakter (\W) között, vagy a string elején vagy végén található. Például a \bword\b a teljes "word" szóra illeszkedik.

Jelzők (Flags):

A Regex jelzők módosítják a reguláris kifejezések viselkedését. A regex literál végére illesztik őket, vagy a RegExp konstruktor második argumentumaként adják meg.

• g (globális): A minta összes előfordulására illeszkedik, nem csak az elsőre.
• i (kis- és nagybetű figyelmen kívül hagyása): Kis- és nagybetűre érzéketlen illesztést végez.
• m (többsoros): Engedélyezi a többsoros módot, ahol a ^ és $ minden sor elejére és végére illeszkedik (\n-nel elválasztva).
• s (dotAll): Lehetővé teszi, hogy a pont (.) az újsor karakterekre is illeszkedjen.
• u (unicode): Teljes Unicode támogatást engedélyez.
• y (sticky): Csak a regex lastIndex tulajdonsága által jelzett indextől illeszkedik.

JavaScript Regex metódusok

A JavaScript számos metódust biztosít a reguláris kifejezésekkel való munkához:

• test(): Teszteli, hogy egy string illeszkedik-e a mintára. true vagy false értéket ad vissza.
• exec(): Keresést hajt végre egy stringben egyezésért. Egy tömböt ad vissza, amely tartalmazza az illesztett szöveget és az elfogott csoportokat, vagy null-t, ha nincs találat.
• match(): Egy tömböt ad vissza, amely tartalmazza egy string és egy reguláris kifejezés illesztésének eredményeit. Különbözően viselkedik a g jelzővel és anélkül.
• search(): Egyezést keres egy stringben. Az első egyezés indexét adja vissza, vagy -1-et, ha nincs találat.
• replace(): Lecseréli a minta előfordulásait egy csereszöveggel vagy egy olyan függvénnyel, amely a csereszöveget adja vissza.
• split(): Egy stringet részstringek tömbjére bont egy reguláris kifejezés alapján.

Példák Regex metódusok használatára:

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

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

// match() 'g' jelzővel
const regex3 = /\d+/g; // Egy vagy több számjegyre illeszkedik globálisan
const str3 = "There are 123 apples and 456 oranges.";
const matches = str3.match(regex3);
console.log(matches); // Kimenet: ["123", "456"]

// match() 'g' jelző nélkül
const regex4 = /\d+/;
const str4 = "There are 123 apples and 456 oranges.";
const match = str4.match(regex4);
console.log(match); // Kimenet: ["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)); // Kimenet: 6

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

// replace() függvénnyel
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); // Kimenet: Today's date is 27/10/2023

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

Haladó Regex technikák

Elfogó csoportok (Capturing Groups):

A zárójelek () elfogó csoportok létrehozására szolgálnak a reguláris kifejezésekben. Az elfogó csoportok lehetővé teszik az illesztett szöveg bizonyos részeinek kinyerését. Az exec() és match() metódusok egy tömböt adnak vissza, ahol az első elem a teljes egyezés, a további elemek pedig az elfogott csoportok.

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

console.log(match[0]); // Kimenet: 2023-10-27 (A teljes egyezés)
console.log(match[1]); // Kimenet: 2023 (Az első elfogott csoport - év)
console.log(match[2]); // Kimenet: 10 (A második elfogott csoport - hónap)
console.log(match[3]); // Kimenet: 27 (A harmadik elfogott csoport - nap)

Elnevezett elfogó csoportok (Named Capturing Groups):

Az ES2018 bevezette az elnevezett elfogó csoportokat, amelyek lehetővé teszik, hogy neveket rendeljünk az elfogó csoportokhoz a (?...) szintaxissal. Ez olvashatóbbá és karbantarthatóbbá teszi a kódot.

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

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

Nem-elfogó csoportok (Non-Capturing Groups):

Ha egy regex részeit csoportosítani kell anélkül, hogy elfognánk őket (pl. egy kvantor alkalmazása egy csoportra), használhatunk nem-elfogó csoportot a (?:...) szintaxissal. Ezzel elkerülhető a felesleges memóriafoglalás az elfogott csoportok számára.

const regex = /(?:https?:\/\/)?([\w\.]+)/; // Egy URL-re illeszkedik, de csak a domain nevet fogja el
const url = "https://www.example.com/path";
const match = regex.exec(url);

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

Körülnézések (Lookarounds):

A körülnézések nulla szélességű állítások, amelyek egy pozícióra illeszkednek egy stringben egy olyan minta alapján, amely megelőzi (lookbehind) vagy követi (lookahead) azt a pozíciót, anélkül, hogy a körülnézés mintáját magába foglalná az egyezésbe.

• Pozitív előretekintés (Positive Lookahead): (?=...) Akkor illeszkedik, ha a körülnézésben lévő minta *követi* az aktuális pozíciót.
• Negatív előretekintés (Negative Lookahead): (?!...) Akkor illeszkedik, ha a körülnézésben lévő minta *nem követi* az aktuális pozíciót.
• Pozitív visszatekintés (Positive Lookbehind): (?<=...) Akkor illeszkedik, ha a körülnézésben lévő minta *megelőzi* az aktuális pozíciót.
• Negatív visszatekintés (Negative Lookbehind): (? Akkor illeszkedik, ha a körülnézésben lévő minta *nem előzi meg* az aktuális pozíciót.

// Pozitív előretekintés: Az ár kinyerése, csak ha USD követi
const regex = /\d+(?= USD)/;
const text = "The price is 100 USD";
const match = text.match(regex);
console.log(match); // Kimenet: ["100"]

// Negatív előretekintés: A szó kinyerése, csak ha nem követi szám
const regex2 = /\b\w+\b(?! \d)/;
const text2 = "apple 123 banana orange 456";
const matches = text2.match(regex2);
console.log(matches); // Kimenet: null, mert a match() csak az első egyezést adja vissza 'g' jelző nélkül, ami nem az, amire szükségünk van.
// a javításhoz:
const regex3 = /\b\w+\b(?! \d)/g;
const text3 = "apple 123 banana orange 456";
const matches3 = text3.match(regex3);
console.log(matches3); // Kimenet: [ 'banana' ]

// Pozitív visszatekintés: Az érték kinyerése, csak ha $ előzi meg
const regex4 = /(?<=\$)\d+/;
const text4 = "The price is $200";
const match4 = text4.match(regex4);
console.log(match4); // Kimenet: ["200"]

// Negatív visszatekintés: A szó kinyerése, csak ha nem előzi meg a 'not' szó
const regex5 = /(?

const regex = /([a-z]+) \1/;
const text = "hello hello world";
const match = regex.exec(text);
console.log(match); // Kimenet: ["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"));    // Kimenet: true
console.log(emailRegex.test("invalid-email"));       // Kimenet: false
console.log(emailRegex.test("test@sub.example.co.uk")); // Kimenet: 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); // Kimenet: ["https://www.example.com", "http://blog.example.org"]

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

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


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

const phoneRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
console.log(phoneRegex.test("+1 555 123 4567")); // Kimenet: true (Amerikai példa)
console.log(phoneRegex.test("+44 20 7946 0500")); // Kimenet: true (Brit példa)
console.log(phoneRegex.test("+81 3 3224 5000"));  // Kimenet: true (Japán példa)
console.log(phoneRegex.test("123-456-7890"));   // Kimenet: false

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

console.log(passwordRegex.test("P@ssword123")); // Kimenet: true
console.log(passwordRegex.test("password"));       // Kimenet: false (nincs nagybetű vagy szám)
console.log(passwordRegex.test("Password"));       // Kimenet: false (nincs szám)
console.log(passwordRegex.test("Pass123"));        // Kimenet: false (nincs kisbetű)
console.log(passwordRegex.test("P@ss1"));          // Kimenet: false (kevesebb mint 8 karakter)