Insérer après Body

Nous avons une chaîne avec un document HTML.

Écrivez une expression régulière qui insère <h1>Hello</h1> immédiatement après la balise <body>. La balise peut avoir des attributs.

Par exemple:

          let regexp = /your regular expression/;

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

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

Après cela, la valeur de str devrait être :

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

Pour insérer après la balise <body>, nous devons d’abord la trouver. Nous pouvons utiliser le modèle d’expression régulière <body.*?> pour cela.

Dans cette tâche, nous n’avons pas besoin de modifier la balise <body>. Nous n’avons qu’à ajouter le texte après.

Voici comment nous pouvons le faire :

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

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

Dans la chaîne de remplacement, $& signifie la correspondance elle-même, c’est-à-dire la partie du texte source qui correspond à <body.*?>. Il est remplacé par lui-même suivi de <h1>Hello</h1>.

Une alternative consiste à utiliser lookbehind :

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

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

Comme vous pouvez le voir, il n’y a qu’une partie lookbehind dans cette expression régulière.

Cela fonctionne comme ceci :

À chaque position dans le texte.
Vérifiez s’il est précédé de <body.*?>.
Si c’est le cas, nous avons le match.

La balise <body.*?> ne sera pas renvoyée. Le résultat de cette expression régulière est littéralement une chaîne vide, mais elle ne correspond qu’aux positions précédées de <body.*?>.

Il remplace donc la “ligne vide”, précédée de <body.*?>, par <h1>Hello</h1>. C’est l’insertion après <body>.

PS Les drapeaux d’expression régulière, tels que s et i peuvent également être utiles : /<body.*?>/si. Le drapeau s fait correspondre le point . à un caractère de retour à la ligne, et le drapeau i fait que <body> correspond également à <BODY> insensible à la casse.