Reguláris kifejezések ebben a kurzusban:

A(z) Reguláris kifejezések fogalomról

Reguláris kifejezések JavaScriptben

A reguláris kifejezés (vagy regex) olyan karaktersorozat, amelyet arra használhatunk, hogy egy string adott elemeit megcélozzuk és módosítsuk. Így például tudunk:

• Keresés: szöveg keresése egy stringben
• Csere: részstringek cseréje egy stringben
• Kinyerés: információk kinyerése egy stringből

Ez a fogalom a reguláris kifejezések JavaScriptbeli használatára összpontosít. Ha szeretnéd megtanulni, hogyan kell reguláris kifejezéseket írni, az Eloquent JavaScript jó kiindulópont lehet.

💡 A JavaScript regex-implementációja része a nyelv ECMA-262 szabványának. Ez azt jelenti, hogy nem kell a böngészőspecifikus kompatibilitással törődnöd.

Hogyan hozzunk létre reguláris kifejezéseket

JavaScriptben a reguláris kifejezéseket többnyire /pattern/modifiers formában írjuk, ahol a „pattern” maga a regex, a „modifiers” pedig olyan karakterek sorozata, amelyekkel különleges beállításokat adhatunk meg (mintegy szuperképességeket).

Ennek ellenére kétféleképpen hozhatunk létre reguláris kifejezést:

1. Reguláris kifejezés literál:

const regex = /[a-z]/;

1. RegExp konstruktor:

const regex = new RegExp('[a-z]');

Mindkét esetben a JavaScript egy objektumot hoz létre a regexből. Alapértelmezésként ajánlott a literál szintaxist használni, mivel az változtathatatlan mintát ad.

A RegExp konstruktort olyan esetekben érdemes használni, amikor a regex változni fog, vagy még nem ismerjük (például egy bemenet esetén).

🏴‍☠️ Jelzők

A reguláris kifejezéseknek vannak választható szuperképességei, az úgynevezett flags jelzők, amelyek további funkciókat tesznek lehetővé. Ezek a jelzők külön-külön vagy együtt, tetszőleges sorrendben használhatók, és a reguláris kifejezés részét képezik.

Néhány gyakran használt közülük:

• /g - Globális keresés
• /i - Kis- és nagybetűre nem érzékeny
• /m - Többsoros keresés

Íme egy egyszerű példa:

const re = /home/gi;
const str = 'Home, sweet home.';

str.match(re);

// => ["Home", "home"]

A g karakter segítségével egy string összes lehetséges találatát feldolgozhatjuk. E funkció nélkül a JavaScript csak az első Home találatot nyerte volna ki.

A kis- és nagybetűre nem érzékeny /i jelző rugalmasságot ad a minta keresésekor. Így nem számít, hogy amit keresünk, UPPERCASE vagy lowercase formában van-e.

A RegExp konstruktor használatakor a jelzők hozzáadásának szintaxisa más. Ebben az esetben egyszerűen a második argumentumként kell átadni a jelzőket.

Gyakran használt függvények

Ha a reguláris kifejezéseket a JavaScript beépített függvényeivel kombináljuk, hatékony módjait kapjuk annak, hogy adatokat nyerjünk ki és módosítsunk stringekben.

A test() metódus remek módja annak, hogy megkeressük, és megtudjuk, létezik-e egy adott érték egy stringben. Ennek során logikai értéket ad vissza, true vagy false formában.

A match() metódus kinyeri a reguláris kifejezés találatát egy adott stringből. Egy tömböt ad vissza, benne információkkal és a találatokkal.

Mikor melyiket használjuk? A test()-et akkor, ha gyorsan szeretnéd ellenőrizni, hogy egy érték szerepel-e egy stringben; a match()-et pedig akkor, ha szükséged van magára az értékre, vagy több információt szeretnél a találatról.

Test

A test() metódus egy reguláris kifejezés és egy megadott string közötti egyezés keresését végzi el. Igaz vagy hamis értéket ad vissza.

const str = 'It is difficult to test if you have a virus';
const result = /virus$/.test(str);

console.log(result);

// => true

Match

Rendben, de mi van akkor, ha a reguláris kifejezéses keresés tényleges értékeit szeretnénk megkapni?

A match() metódussal nem csupán egy logikai értéket kapunk, hanem egy hasznos tömböt, amelynek tartalma attól függ, hogy találtunk-e egyezést vagy sem.

Így egyszerre tudunk keresni és információt kinyerni bármelyik stringből. Például:

const funnyQuote =
  'If you see someone crying, ask if it is because of their haircut.';
const regex1 = /someone/;
const regex2 = /happy/;

funnyQuote.match(regex1);
// => ["someone", index: 3, input: "If you see someone crying, ask if it is because of their haircut.", groups: undefined]

funnyQuote.match(regex2);
// => null

Amikor jelen van a globális keresés /g jelzője, a metódus a hasznos információkkal (például index vagy input) kísért egyetlen találat helyett a tömbben előforduló összes találatot adja vissza:

const funnyQuote =
  'If you see someone crying, ask if it is because of their haircut.';

const regex3 = /if/gi;

funnyQuote.match(regex3);
// => ["If", "if"];

Replace

A replace() metódus segítségével a JavaScriptben megkereshetünk egy értéket egy adott stringben, és lecserélhetjük egy új értékre.

string.replace(searchValue, newValue);

A keresett minta lehet egyetlen string vagy reguláris kifejezés.

let string = 'I like dogs!';
let result = string.replace('dogs', 'cats');

let string = 'I would love to travel to Japan';
let result = string.replace(/Japan/g, 'Hawaii');

Sőt, a csere helyére függvényt is adhatunk, hogy minden értéken további módosításokat végezzünk.

let text = 'Say hello to the chatbot.';
let result = text.replace(/chatbot|hello/gi, function (word) {
  return word.toUpperCase();
});
// => "Say HELLO to the CHATBOT"

💡 Végső soron a reguláris kifejezések és a replace() metódus kombinációja dinamikusabb módja az elemek cseréjének. Egyetlen string használata korlátozott lehet.

Split

A split() metódus a stringek reguláris kifejezésekkel történő használatának és módosításának egy másik módját kínálja.

Így a regexet arra használjuk, hogy egy adott stringet egy felismert minta alapján felosszunk, például str.split(/[,.\s]/). Ez a minta lesz a separator.

const str = 'hello,user.how are.you';

const result = str.split(/[,.\s]/);

console.log(result);
// => ['hello', 'user', 'how', 'are', 'you']

Teljesítmény

A teljesítményt tekintve mindkettő létrehoz egy RegExp objektumot. A fő különbség az, hogy milyen gyakran fordul le a regex:

• A Regular Expression Literal használatakor: egyszer, a kód kezdeti elemzésekor és lefordításakor
• A RegExp() szintaxis használatakor: minden alkalommal, amikor létrejön egy új objektum.

A literál szintaxis használata nemcsak a teljesítmény miatt lehet jobb választás, hanem az egyszerűség és az olvashatóság miatt is. Részletekért lásd ezt a Stack Overflow-beszélgetést.

1. Rövidebb, és nem kényszerít arra, hogy osztályszerű konstruktorokban gondolkodj.
2. A RegExp() konstruktor használatakor az idézőjeleket is escape-elni kell, a backslash-eket pedig kétszeresen. Ez az amúgy is nehezen olvasható és érthető reguláris kifejezéseket még nehezebbé teszi.