Regex in JavaScript | Spiegato con esempi

Regex in JavaScript | Spiegato con esempi
Quando uno sviluppatore posa per la prima volta gli occhi su espressioni regolari o regex, sembra incomprensibile. Tuttavia possono apparire, le espressioni regolari sono estremamente utili e ti rendono un programmatore efficace. Il concetto di regex è un po 'complicato, tuttavia in questo post, ti accompageremo attraverso semplici passaggi insieme ad esempi per aiutarti a padroneggiare Regex in JavaScript.

Cosa è Regex in JavaScript?

Il regex o l'espressione regolare è semplicemente una stringa che definisce uno schema ed è molto utile per trovare uno schema in una stringa o sostituire una stringa con uno schema abbinato. Per dirla semplicemente, supponiamo di voler convalidare un indirizzo e -mail o un numero di telefono con uno schema specificato, quindi Regex è utile.

Sintassi di regex:

var myregex = /abc /;

Alleghiamo uno schema in forward slash "/" come mostrato sopra. Possiamo anche usare il Regexp costruttore per definire un modello di regex:

var myregex = new regexp ('ABC');

Ora che sappiamo cos'è Regex e qual è la sua sintassi, vediamo ora come specificare un modello usando Regex in JavaScript.

Specificare il modello usando Regex

Per specificare i modelli usando regex usiamo i metacharacter che sono caratteri che hanno un significato speciale. I metacharacter e ciò che rappresentano in regex sono riportati nella tabella seguente:

Meta carattere Che cosa fa?
[] (Parentesi quadre) Qualunque cosa scriviamo tra parentesi quadrate sarà abbinata a una determinata stringa. Per esempio [ABC] corrisponde al a, b, E C caratteri con una stringa specificata. Possiamo anche specificare un intervallo ad esempio [A-F] equivale a [a B c D e F] O [1-5] equivale a [12345].
^ (Simbolo di cura) Il simbolo di caret viene utilizzato per verificare se un testo o una stringa specificato inizia con un determinato carattere o no.G. ^a corrispondenze con ABC comunque ^a non corrisponde a BAC. Il simbolo di cura tra parentesi quadrate viene utilizzato per prendere il complemento di caratteri specificati. Per esempio [^ABC] Specifica questo tranne A, B o C Qualsiasi personaggio presente sarà abbinato.
$ (Simbolo del dollaro) IL $ il simbolo viene usato ovunque vogliamo verificare se una stringa termina con un certo carattere o no. Per esempio, A $ significa che qualunque stringa con cui stiamo abbinando dovrebbe avere una fine, cioè amnesia sarà abbinato a A $ Tuttavia il cuore non lo farà.
* (Simbolo stellare) Il simbolo della stella corrisponde a 0 o più occorrenze del modello o del carattere specificato presente a sinistra dal simbolo stella in una stringa. Per esempio, Uomo significa che la ricerca M e un carattere in una stringa. Quindi Mn avrà 1 corrispondenza. Principale non avrà alcuna corrispondenza in quanto a non è seguito da N e c'è io nel mezzo.
+ (più simbolo) Il simbolo Plus è proprio come un simbolo a stella con l'eccezione che corrisponde a 1 o più occorrenze del modello o del carattere specificato. Ad esempio, quando Mn La stringa viene cercata per l'espressione ma+n Non c'è corrispondenza, tuttavia quando l'espressione è cercata per l'uomo, c'è una corrispondenza.
(Bretelle) Per avere una chiara comprensione delle parentesi BREATS, consentiamo di vedere per la prima volta il seguente codice i-e 2,3 il che significa che almeno 2 e al massimo 3 ripetizioni sono possibili del modello lasciato da esso. Ad esempio, l'espressione a 2,3 Se abbinato alla stringa "ABC DAT" non avrà alcuna corrispondenza, tuttavia quando l'espressione è abbinata a "ABC DAAT" avrà una partita I-e DaaT.
| (Alterazione) Il simbolo dell'alterazione o della barra verticale viene utilizzato per l'operatore o. Ad esempio, l'espressione a | b indica che UN O B dovrebbe essere presente in una stringa specificata. Quindi FGH non ha corrispondenze e ABC ha 2 partite che sono ab.
\ (Backslash) Lo scopo di Backslash è di sfuggire ai personaggi e sfuggire a tutti i metacharacter. In parole semplici, se non sei sicuro se un personaggio contenga un significato speciale o meno, posiziona una retroscena prima del personaggio. Quindi quel personaggio non sarà trattato in alcun modo speciale, per esempio, \ $ a L'espressione corrisponderà a qualsiasi testo o stringa che ha a $ seguito da UN.

Ora che sappiamo come specificare i modelli usando regex, lasciaci passare attraverso alcuni metodi regex per abbinare un regex con una stringa specificata.

Modelli di prova per la corrispondenza

In precedenza, abbiamo discusso di come possiamo usare il costruttore Regexp per inizializzare l'oggetto reGEXP con uno schema specificato. Questo oggetto regexp ci dà molti metodi integrati e uno di questi è il test() metodo. IL test() Il metodo è molto utile in quanto controlla una stringa per uno schema specificato nell'espressione regolare. IL test() Il metodo restituisce un valore booleano, ovvero se il modello specificato corrisponde alla stringa viene restituita true, altrimenti viene restituito false. Per capire meglio il test() Metodo Vediamo un esempio:

var myregex = /hello /;
var output = myregex.test ('Hello World!');
console.registro (output); // VERO

Nel codice sopra prima, abbiamo definito un modello che è Ciao e quindi utilizzato il metodo integrato test () sul modello specificato per verificare se la stringa Ciao mondo! contiene ciao o no. Il risultato è riportato di seguito:

Invece del valore booleano, la corrispondenza della stringa può essere restituita anche con un altro metodo integrato che è il metodo Match (). Il codice seguente sta implementando il metodo Match ():

var mystring = "Hello World!";
// modello
var myregex = /hello /;
console.registro (mystring.match (myregex)); // Ciao

Verrà restituito un array che conterrà la stringa di input per il metodo Match (), l'indice su cui viene trovata la corrispondenza e la corrispondenza stessa.

Se una partita non viene trovata, allora nullo verrà restituito:

var mystring = "Hello World!";
// modello
var myregex = /hi /;
console.registro (mystring.match (myregex)); // nullo

Bandiere di pattern

Abbiamo visto che l'oggetto regexp accetta uno schema; Tuttavia va anche notato che il regexp può anche prendere un parametro di flag opzionale. Le bandiere sono solo un po 'di topping extra che cambia il comportamento di ricerca.

La prima bandiera di cui discuteremo è il Ignora la bandiera indicato da i. Per impostazione predefinita, la ricerca di pattern in regex è sensibile al caso, quindi per ignorare i casi utilizziamo il flag Ignore (i) quando cerchiamo uno schema. Per esempio:

var myregex = /hello /i;
console.registro (myregex.Test ("Hello World!")); // VERO

Sebbene il modello abbia Ciao E la stringa nel metodo di prova ha il primo capitale della lettera, è ancora una corrispondenza perché abbiamo usato il flag Ignore (i) Quindi il risultato sarà vero:

Per utilizzare il flag Ignora con l'oggetto Regexp Copia il seguente codice:

var myregex = new regexp ('ciao', 'i');
console.registro (myregex.Test ("Hello World!")); // VERO

Allo stesso modo, possiamo usare il Bandiera globale indicato da G la cui funzione è restituire tutte le partite nella stringa. Senza la bandiera globale, viene restituita solo la prima partita. Il codice seguente utilizza il flag globale:

var mystring = 'ciao mondo! e ciao universo!';
var myregex = /hello /gi;
var matches = [];
var match;
Fare
match = myregex.Exec (mystring);
if (match)
corrispondenze.push (match);

while (match != null)
console.registro (corrispondenze);

Innanzitutto, abbiamo inizializzato Mystring che contiene la stringa che verrà utilizzata per la ricerca di un modello e, successivamente, abbiamo creato un modello di espressione regolare che contiene la bandiera globale e ignorano la bandiera. La bandiera globale cercherà tutte le partite mentre la bandiera ignora ignorerà la sensibilità dei casi. Nel codice sopra, viene utilizzato un altro metodo integrato che è il Exec () la cui funzione è restituire un array che contiene la corrispondenza. Tuttavia, se non vi era alcuna corrispondenza tra il modello e la stringa, verrà restituito null. Va notato che il metodo Exec () restituisce solo una singola corrispondenza contempo. Alla fine, registriamo la console l'array di corrispondenze che contiene tutte le partite:

Conclusione

Regex è una stringa che definisce un modello o trova uno schema in una stringa specificata. Utilizziamo l'oggetto regexp o l'annullare / per definire regex. Il regexp prende anche un parametro opzionale i-e flag che cambia il comportamento di ricerca. Per specificare i modelli utilizziamo i metacharacter che sono alcuni caratteri specifici con significati speciali. Per verificare se corrisponde a una stringa o meno utilizziamo metodi integrati come test (), match () o exec ().

In questo post, in primo luogo, abbiamo definito ciò che è regex in JavaScript e ciò che è la sintassi di Regex in JavaScript. Quindi ti abbiamo mostrato come specificare i modelli usando Regex e i modelli di test in JavaScript. Alla fine, abbiamo discusso delle due bandiere che sono globali e ignorano le bandiere.