back to the lesson

Вставьте после фрагмента

Есть строка с HTML-документом.

Вставьте после тега <body> (у него могут быть атрибуты) строку <h1>Hello</h1>.

Например:

let regexp = /ваше регулярное выражение/;

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

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

После этого значение str:

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

Для того, чтобы вставить после тега <body>, нужно вначале его найти. Будем использовать регулярное выражение <body.*>.

Далее, нам нужно оставить сам тег <body> на месте и добавить текст после него.

Это можно сделать вот так:

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

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

В строке замены $& означает само совпадение, то есть мы заменяем <body.*> заменяется на самого себя плюс <h1>Hello</h1>.

Альтернативный вариант – использовать ретроспективную проверку:

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

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

Такое регулярное выражение на каждой позиции будет проверять, не идёт ли прямо перед ней <body.*>. Если да – совпадение найдено. Но сам тег <body.*> в совпадение не входит, он только участвует в проверке. А других символов после проверки в нём нет, так что текст совпадения будет пустым.

Происходит замена “пустой строки”, перед которой идёт <body.*> на <h1>Hello</h1>. Что, как раз, и есть вставка этой строки после <body>.

P.S. Этому регулярному выражению не помешают флаги: /<body.*>/si, чтобы в “точку” входил перевод строки (тег может занимать несколько строк), а также чтобы теги в другом регистре типа <BODY> тоже находились.