Insertar después de la cabecera

Tenemos un string con un documento HTML.

Escribe una expresión regular que inserte <h1>Hello</h1> inmediatamente después de la etiqueta <body>. La etiqueta puede tener atributos.

Por ejemplo:

          let regexp = /tu expresión regular/;

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

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

Después de esto el valor de str debe ser:

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

Para insertar algo después de la etiqueta <body>, primero debemos encontrarla. Para ello podemos usar la expresión regular <body.*?>.

En esta tarea no necesitamos modificar la etiqueta <body>. Solamente agregar texto después de ella.

Veamos cómo podemos hacerlo:

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

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

En el string de reemplazo, $& significa la coincidencia misma, la parte del texto original que corresponde a <body.*?>. Es reemplazada por sí misma más <h1>Hello</h1>.

Una alternativa es el uso de “lookbehind”:

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

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

Como puedes ver, solo está presente la parte “lookbehind” en esta expresión regular.

Esto funciona así:

En cada posición en el texto:
Verifica si está precedida por <body.*?>.
Si es así, tenemos una coincidencia.

La etiqueta <body.*?> no será devuelta. El resultado de esta expresión regular es un string vacío, pero coincide solo en las posiciones precedidas por <body.*?>.

Entonces reemplaza la “linea vacía”, precedida por <body.*?>, con <h1>Hello</h1>. Esto es, la inserción después de <body>.

P.S. Los indicadores de Regexp tales como s y i también nos pueden ser útiles: /<body.*?>/si. El indicador s hace que que el punto . coincida también con el carácter de salto de línea, y el indicador i hace que <body> también acepte coincidencias <BODY> en mayúsculas y minúsculas.