Een beginnershandleiding voor reguliere expressies in JavaScript

Iedereen die met JavaScript werkt, zal op een bepaald moment met strings te maken krijgen. Soms moet je gewoon een string opslaan in een andere variabele en die dan doorgeven. Andere keren zul je het moeten inspecteren en kijken of het een bepaalde substring bevat.

Maar dingen zijn niet altijd zo eenvoudig. Er zullen tijden zijn dat je niet op zoek bent naar een bepaalde subtekenreeks maar een reeks subtekenreeksen die een bepaald patroon volgen.

Laten we zeggen dat je alle voorkomens van "Appelen" in een string met "appels" moet vervangen. Je zou het gewoon kunnen gebruiken theMainString.replace ("Apples", "apples"). Leuk en gemakkelijk.

Laten we nu eens aannemen dat je "appLes" ook moet vervangen door "appels". Op dezelfde manier moeten "appLES" ook "appels" worden. Kortom, alle casusvarianten van "Apple" moeten worden gewijzigd in "apple". Het doorgeven van eenvoudige reeksen als argument zal in dergelijke gevallen niet langer praktisch of efficiënt zijn.

Hier komen reguliere expressies bij - u kunt gewoon de niet-hoofdletter gebruiken ik en er klaar mee zijn. Met de vlag op zijn plaats, maakt het niet uit of de originele reeks "Appelen", "APPELEN", "APPARATEN" of "Appelen" bevatte. Elke instantie van het woord zal worden vervangen door "appels".

Net als de hoofdlettergevoelige vlag bieden reguliere expressies veel andere functies die in deze zelfstudie aan de orde zullen komen.

Reguliere expressies gebruiken in JavaScript

U moet een iets andere syntaxis gebruiken om een reguliere expressie binnen verschillende aan te geven Draad methoden. In tegenstelling tot een eenvoudige tekenreeks, die tussen aanhalingstekens staat, bestaat een reguliere expressie uit een patroon tussen slashes. Alle vlaggen die u in een reguliere expressie gebruikt, worden na de tweede schuine streep toegevoegd.

Terugkomend op het vorige voorbeeld, hier is wat het vervangen() methode zou eruit zien met een reguliere expressie en een eenvoudige string.

"Ik heb appels gegeten" .replace ("Appels", "apples"); // Ik at appels "Ik at appels" .replace (/ Apples / i, "apples"); // Ik at appels "I at aPPles" .replace ("Appels", "apples"); // Ik at APPles "IK at APPles" .REplace (/ Apples / i, "apples"); // Ik heb appels gegeten

Zoals u kunt zien, werkte de reguliere expressie in beide gevallen. We zullen nu meer leren over vlaggen en speciale tekens die deel uitmaken van het patroon in een reguliere expressie.

Backslash in reguliere expressies

U kunt normale tekens in speciale tekens veranderen door er een backslash voor toe te voegen. Op dezelfde manier kunt u speciale tekens in normale tekens veranderen door een backslash vóór hen toe te voegen.

Bijvoorbeeld, d is geen speciaal personage. Echter, \ d wordt gebruikt om een cijfer in een tekenreeks overeen te laten komen. evenzo, D is ook geen speciaal personage, maar \ D wordt gebruikt om niet-cijferige tekens in een tekenreeks te matchen.

Cijfertekens zijn 0, 1, 2, 3, 4, 5, 6, 7, 8 en 9. Wanneer u gebruikt \ d in een reguliere expressie komt het overeen met elk van deze negen tekens. Wanneer je gebruikt \ D in een reguliere expressie komt het overeen met alle niet-cijferige tekens.

Het volgende voorbeeld moet dingen duidelijk maken.

"L8" .replace (/ \ d / i, "E"); // LE "L8" .replace (/ \ D / i, "E"); // E8 "LLLLL8" .replace (/ \ D / i, "E"); // ELLLL8

Houd er rekening mee dat alleen het eerste overeenkomende teken in het derde geval wordt vervangen. U kunt ook vlaggen gebruiken om alle overeenkomsten te vervangen. Later leren we over dergelijke vlaggen.

Net als \ d en \ D, er zijn ook andere speciale tekenreeksen.

Je kunt gebruiken \ w om elk "woord" teken in een string te matchen. Hier verwijst woordteken naar A-Z, a-z, 0-9 en _. In feite komt het overeen met alle cijfers, alle kleine letters en hoofdletters en het onderstrepingsteken.
Je kunt gebruiken \ w om elk niet-woordkarakter in een string te evenaren. Het zal overeenkomen met tekens zoals%, $, #, ₹, enz.
Je kunt gebruiken \ s om een enkel witruimteteken te matchen, dat ruimte, tab, formulierinvoer en regelinvoer omvat. Op dezelfde manier kunt u gebruiken \ S om alle andere karakters naast witruimte te evenaren.
U kunt ook zoeken naar een specifiek witruimte-teken met \ f, \ n, \ r, \ t, en \ v, die staan voor formulierinvoer, regelinvoer, regelterugloop, horizontaal tabblad en verticaal tabblad.

Soms zul je situaties tegenkomen waarbij je een woord moet vervangen door zijn vervanger, maar alleen als dat het geval is nietonderdeel van een groter woord. Neem bijvoorbeeld de volgende zin:

"Er zijn veel ananasafbeeldingen gepost op de app".

In dit geval willen we het woord "app" vervangen door "bord". Gebruik echter een eenvoudig patroon van een reguliere expressie om "apple" in "boardle" te veranderen en de laatste zin zou worden:

"Er zijn veel pineboardle-afbeeldingen op de app geplaatst".

In dergelijke gevallen kunt u een andere speciale tekenreeks gebruiken: \ b. Dit controleert de woordgrenzen. Een woordgrens wordt gevormd door het gebruik van niet-woordtekens zoals spatie, "$", "%", "#", enzovoort. Pas echter op - het bevat ook geaccentueerde tekens zoals "ü".

"Veel ananasafbeeldingen werden gepost op de app" .replace (/ app /, "board"); // Een groot aantal pineboardle-afbeeldingen werden gepost op de app "Veel ananasafbeeldingen werden gepost op de app" .replace (/ \ bapp /, "board"); // Er zijn veel ananasafbeeldingen op het bord geplaatst

Op dezelfde manier kunt u gebruiken\ B om een niet-woordgrens te evenaren. U zou bijvoorbeeld kunnen gebruiken \ B om alleen de "app" te matchen wanneer deze zich binnen een ander woord bevindt, zoals "ananas".

Overeenstemmend aantal keren een patroon "n"

Je kunt gebruiken ^ om JavaScript te vertellen om alleen naar het begin van de reeks te kijken voor een overeenkomst. Op dezelfde manier kunt u gebruiken $ om alleen het einde van de reeks te bekijken voor een overeenkomst.

Je kunt gebruiken *om de vorige uitdrukking 0 of meer keer overeen te laten komen. Bijvoorbeeld, / Ap * / zal matchen EEN, Ap, App, APPP, enzovoorts.

Op een vergelijkbare manier kunt u gebruiken + om de voorgaande uitdrukking 1 of meerdere keren overeen te laten komen. Bijvoorbeeld, / Ap + / zal matchen Ap, App, APPP, enzovoorts. De expressie komt niet overeen met de single EEN deze keer.

Soms wil je alleen een specifiek aantal keren dat een bepaald patroon voorkomt, matchen. In dergelijke gevallen moet u de N tekenreeks, waarbij n een getal is. Bijvoorbeeld, / Ap 2 / zal matchen App maar niet Ap. Het komt ook overeen met de eerste twee 'p's in APPP en laat de derde onaangeroerd.

Je kunt gebruiken N, om ten minste 'n' occurrences van een gegeven uitdrukking te matchen. Dit betekent dat / Ap 2 / zal matchen App maar niet Ap. Het zal ook overeenkomen met alle 'p's in Apppp en vervang ze door je vervangende string.

Je kan ook gebruiken N, m om een minimum- en een maximumaantal op te geven en het aantal keren te beperken dat de gegeven uitdrukking moet worden vergeleken. Bijvoorbeeld, / Ap 2,4 / zal matchen App, APPP, en Apppp. Het komt ook overeen met de eerste vier 'p's in' Apppppp en laat de rest van hen onaangeroerd.

"Apppppples" .replace (/ Ap * /, "App"); // Apples "Ales" .replace (/ Ap * /, "App"); // Apples "Appppples" .replace (/ Ap 2 /, "Toevoegen"); // Addppples "Appppples" .replace (/ Ap 2, /, "Add"); // Addles "Appppples" .replace (/ Ap 2,4 /, "Toevoegen"); // Addples

Haakjes gebruiken om overeenkomsten te onthouden

Tot nu toe hebben we alleen patronen vervangen door een constante reeks. In het vorige gedeelte was de vervanging die we gebruikten bijvoorbeeld altijd 'toevoegen'. Soms zul je moeten zoeken naar een patroonovereenkomst binnen de gegeven reeks en deze dan vervangen door een deel van het patroon.

Laten we zeggen dat je een woord met vijf of meer letters in een string moet vinden en dan een "s" aan het einde van het woord moet toevoegen. In dergelijke gevallen kunt u een constante tekenreekswaarde niet als vervanging gebruiken, omdat de uiteindelijke waarde afhangt van het overeenkomende patroon zelf.

"I like Apple" .replace (/ (\ w 5,) /, '$ 1s'); // Ik hou van appels "I like Banana" .replace (/ (\ w 5,) /, '$ 1s'); // Ik hou van bananen

Dit was een eenvoudig voorbeeld, maar u kunt dezelfde techniek gebruiken om meer dan één patroon in het geheugen bij te houden. Het aantal subpatronen in de volledige match wordt bepaald door het aantal gebruikte haakjes.

Binnen de vervangende tekenreeks wordt de eerste subovereenkomst geïdentificeerd met behulp van $ 1, de tweede submatch wordt geïdentificeerd met behulp van $ 2, enzovoorts. Hier is nog een voorbeeld om het gebruik van haakjes verder te verduidelijken.

"Ik ben op zoek naar John en Jason" .replace (/ (\ w +) \ sand \ s (\ w +) /, '$ 2 and $ 1'); // Ik ben op zoek naar Jason en John

Vlaggen gebruiken met reguliere expressies

Zoals ik al zei in de inleiding, is nog een belangrijk kenmerk van reguliere expressies het gebruik van speciale vlaggen om te wijzigen hoe een zoekopdracht wordt uitgevoerd. De vlaggen zijn optioneel, maar u kunt ze gebruiken om dingen te doen zoals het globaal of niet-hoofdlettergevoelig maken van een zoekopdracht.

Dit zijn de vier meest gebruikte vlaggen om te wijzigen hoe JavaScript een tekenreeks doorzoekt of vervangt.

g: Deze vlag voert een algemene zoekopdracht uit in plaats van te stoppen na de eerste overeenkomst.
ik: Deze vlag voert een zoekopdracht uit zonder te controleren op een exacte case match. Apple, APPE en apPLE worden bijvoorbeeld allemaal hetzelfde behandeld tijdens niet-hoofdzoekopdrachten.
m: Deze vlag voert een zoekopdracht met meerdere regels uit.
Y: Deze vlag zoekt naar een overeenkomst in de index die wordt aangegeven door de lastIndex eigendom.

Hier zijn enkele voorbeelden van reguliere expressies die worden gebruikt met vlaggen:

"Ik heb appels gegeten, je hebt appels gegeten" .replace (/ apples /, "mango's"); // "Ik heb mango's gegeten, je hebt appels gegeten" "Ik heb appels gegeten, je hebt appels gegeten" .replace (/ apples / g, "mango's"); // "Ik at mango's, je at mango's" "Ik at appels, je at APPELEN" .replace (/ apples /, "mango's"); // "Ik at mango's, je at APPELEN" "Ik at appels, je at APPELEN" .replace (/ apples / gi, "mango's"); // "Ik at mango's, je at mango's" var stickyRegex = / apples / y; stickyRegex.lastIndex = 3; "Ik heb appels gegeten, je hebt appels gegeten" .replace (stickyRegex, "mango's"); // "Ik at appels, je at appels" var stickyRegex = / apples / y; stickyRegex.lastIndex = 6; "Ik heb appels gegeten, je hebt appels gegeten" .replace (stickyRegex, "mango's"); // "Ik at mango's, je at appels" var stickyRegex = / apples / y; stickyRegex.lastIndex = 8; "Ik heb appels gegeten, je hebt appels gegeten" .replace (stickyRegex, "mango's"); // "Ik heb appels gegeten, je hebt appels gegeten"

Laatste gedachten

Het doel van deze zelfstudie was om u kennis te laten maken met reguliere expressies in JavaScript en het belang ervan. We begonnen met de basics en bedekten backslash en andere speciale personages. We leerden ook hoe te controleren op een herhalend patroon in een reeks en hoe gedeeltelijke overeenkomsten in een patroon te onthouden om ze later te kunnen gebruiken.

Ten slotte hebben we geleerd over veelgebruikte vlaggen die reguliere expressies nog krachtiger maken. U kunt meer lezen over reguliere expressies in dit artikel op MDN.

Code