Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на другие языки.
КупитьEPUB/PDF
Карта учебника
вернуться к уроку

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

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

Напишите регулярное выражение которое вставляет <h1>Hello</h1> сразу же после тега <body>. У тега могут быть атрибуты.

Например:

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.*?>.

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

P.S. Флаги регулярных выражений, такие как s и i, также могут быть полезны: /<body.*?>/si. Флаг s создает точечный . соответствует символу новой строки, а флаг i делает <body> также соответствующим <BODY> без учета регистра.