25º novembre 2020

Modo multilinea, flag "m"

Il modo multilinea si abilita col flag /.../m.

Esso modifica il comportamento dei soli ^ e $.

In modalità multilinea essi non trovano corrispondenza solo con l’inizio e la fine della stringa ma anche con gli inizi e fine di linea.

Inizio linea ^

Nell’esempio sotto riportato il testo è distribuito su più linee. Il pattern /^\d+/gm prende un numero dall’inizio di ogni riga:

let str = `1o posto: Winnie
2o posto: Piglet
33o posto: Eeyore`;

alert( str.match(/^\d+/gm) ); // 1, 2, 33

Il motore di regex si sposta sul testo alla ricerca di un inizio riga ^, quando lo trova – continua a trovare la corrispondenza col resto del pattern \d+. Mentre senza il flag /.../m troverebbe corrispondenza solo col primo numero:

let str = `1o posto: Winnie
2o posto: Piglet
33o posto: Eeyore`;

alert( str.match(/^\d+/g) ); // 1

Questo accade perchè di base il comportamento del caret ^ trova corrispondenza solo con l’inizio del testo, mentre in modo multilinea trova – con l’inizio di ogni riga.

Fine linea $

Il simbolo di dollaro $ si comporta in modo simile.

L’espressione regolare \w+$ trova l’ultima parola in ogni stringa.

let str = `1o posto: Winnie
2o posto: Piglet
33o posto: Eeyore`;

alert( str.match(/\w+$/gim) ); // Winnie,Piglet,Eeyore

Senza il flag /.../m il dollaro $ troverebbe corrispondenza solo con la fine dell’intera stringa, dunque risulterebbe solo l’ultima parola dell’intero testo.

Ancore ^$ rispetto \n (a-capo)

Per trovare un fine linea è possibile usare non solo ^ e $, ma anche il carattere a-capo \n.

La prima differenza è che, contrariamente alle ancore, il carattere \n “consuma” il carattere a-capo aggiungendolo al risultato.

Ad esempio qui lo usiamo al posto di $:

let str = `1o posto: Winnie
2o posto: Piglet
33o posto: Eeyore`;
alert( str.match(/\w+\n/gim) ); // Winnie\n,Piglet\n

Qui ogni corrispondenza è una parola più il carattere a-capo.

Un’altra differenza – l’ a-capo \n non trova corrispondenza a fine stringa. Questo è il motivo per cui Eeyore non è trovato nell’esempio sopra.

Pertanto le ancore sono migliori: sono più vicine a ciò che si vuole estrarre.

Mappa del tutorial

Commenti

leggi questo prima di lasciare un commento…
  • Per qualsiasi suggerimento - per favore, apri una issue su GitHub o una pull request, piuttosto di lasciare un commento.
  • Se non riesci a comprendere quanto scitto nell'articolo – ti preghiamo di fornire una spiegazione chiara.
  • Per inserire delle righe di codice utilizza il tag <code>, per molte righe – includile nel tag <pre>, per più di 10 righe – utilizza una sandbox (plnkr, jsbin, codepen…)