Inserimento dopo la sezione head

Abbiamo una stringa e un documento HTML.

Scrivete un’espressione regolare che inserisca <h1>Hello</h1> subito dopo il tag <body>. Il tag può avere degli attributi.

Per esempio:

          let regexp = /your regular expression/;

let str = `
<html>
  <body style="height: 200px">
  ...
  </body>
</html>
`;

str = str.replace(regexp, `<h1>Hello</h1>`);
        

Dopo l’inserimento il valore di str dovrebbe essere:

          <html>
  <body style="height: 200px"><h1>Hello</h1>
  ...
  </body>
</html>
        

Per inserire qualcosa dopo il tag <body> dobbiamo prima trovarlo. A questo scopo possiamo usare l’espressione regolare <body.*?>.

In questa esercitazione non abbiamo bisogno di modificare il tag <body>. Dobbiamo solo aggiungere del testo dopo di esso.

Ecco come possiamo farlo:

let str = '...<body style="...">...';
str = str.replace(/<body.*?>/, '$&<h1>Hello</h1>');

alert(str); // ...<body style="..."><h1>Hello</h1>...

Nella stringa di sostituzione $& identifica la stessa corrispondenza, in altre parole, la parte della stringa sorgente che trova riscontro con <body.*?>. Essa viene sostituita da se stessa più l’aggiunta di <h1>Hello</h1>.

L’uso del lookbehind costituisce un’alternativa:

let str = '...<body style="...">...';
str = str.replace(/(?<=<body.*?>)/, `<h1>Hello</h1>`);

alert(str); // ...<body style="..."><h1>Hello</h1>...

Come potete osservare, c’è solo la parte di lookbehind in questa regexp.

Funziona in questo modo:

Per ogni posizione nella stringa.
Verifica se è preceduta da <body.*?>.
In caso affermativo abbiamo trovato la corrispondenza.

Il tag <body.*?> non verrà restituito. Il risultato di questa regexp è letteralmente una stringa vuota, ma individua le posizioni precedute da <body.*?>.

Quindi sostituisce uno “spazio vuoto” preceduto da <body.*?>, con <h1>Hello</h1>. In altre parole effettua un inserimento dopo <body>.

P.S. I flag s e i potrebbero inoltre risultare utili: /<body.*?>/si. Il flag s fa in modo che il . identifichi anche un carattere di nuova riga, e con il flag i otteniamo che <body> e <BODY> costituiscano entrambi un riscontro.