Vložení za hlavičku

Máme řetězec s HTML dokumentem.

Napište regulární výraz, který vloží <h1>Ahoj</h1> hned za značku <body>. Tato značka může obsahovat atributy.

Například:

          let rv = /váš regulární výraz/;

let řetězec = `
<html>
  <body style="height: 200px">
  ...
  </body>
</html>
`;

řetězec = řetězec.replace(rv, `<h1>Ahoj</h1>`);
        

Pak by hodnota proměnné řetězec měla být následující:

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

Abychom něco vložili za značku <body>, musíme ji napřed najít. Můžeme k tomu použít vzor regulárního výrazu <body.*?>.

V této úloze nemusíme měnit značku <body>. Potřebujeme jen vložit text za ni.

Můžeme to udělat následovně:

let řetězec = '...<body style="...">...';
řetězec = řetězec.replace(/<body.*?>/, '$&<h1>Ahoj</h1>');

alert(řetězec); // ...<body style="..."><h1>Ahoj</h1>...

V nahrazovacím řetězci $& znamená samotnou shodu, tedy část zdrojového textu, která odpovídá <body.*?>. Bude nahrazena sama sebou plus <h1>Ahoj</h1>.

Alternativou je použít zpětné nahlédnutí:

let řetězec = '...<body style="...">...';
řetězec = řetězec.replace(/(?<=<body.*?>)/, `<h1>Ahoj</h1>`);

alert(řetězec); // ...<body style="..."><h1>Ahoj</h1>...

Jak vidíte, tento regulární výraz obsahuje pouze nahlížecí část.

Funguje následovně:

Na každé pozici v textu.
Ověří, zda jí předchází <body.*?>.
Pokud ano, máme shodu.

Značka <body.*?> nebude vrácena. Výsledkem tohoto RV je doslova prázdný řetězec, ale shoda se najde jen na pozicích, před kterými se nachází <body.*?>.

Nahrazuje tedy „prázdný řádek“, jemuž předchází <body.*?>, za <h1>Ahoj</h1>. To je vložení za <body>.

P.S. Užitečné mohou být i příznaky RV, konkrétně s nebo i: /<body.*?>/si. Příznak s způsobí, že tečka . najde znak nového řádku, a příznak i způsobí, že <body> najde i <BODY> bez ohledu na malá a velká písmena.