Ми хочемо зробити цей проєкт з відкритим кодом доступним для людей у всьому світі.

Допоможіть перекласти цей підручник вашою мовою!

КупитиEPUB/PDF
Навчальна карта
назад до уроку

Вставка після Head

У нас є рядок з HTML-документом.

Напишіть регулярний вираз який вставляє <h1>Привіт</h1> одразу після тегу <body>. Тег може мати атрибути.

Приклад:

let regexp = /ваш регулярний вираз/;

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

str = str.replace(regexp, `<h1>Привіт</h1>`);

Після цього значення str має бути:

<html>
  <body style="height: 200px"><h1>Привіт</h1>
  ...
  </body>
</html>

Щоб вставити після тегу <body> , нам потрібно спершу його знайти. Ми можемо використати для цього регулярний вираз <body.*?>.

В цьому завданні нам не потрібно змінювати тег <body>. Нам потрібно тільки додати текст після нього.

Ось таким чином ми можемо це зробити:

let str = '...<body style="...">...';
str = str.replace(/<body.*?>/, '$&<h1>Привіт</h1>');

alert(str); // ...<body style="..."><h1>Привіт</h1>...

в заміненому рядку $& означає співпадіння саме по собі, тобто, частина вихідного тексту яка відповідає шаблону <body.*?>. Її замінено на неї ж плюс <h1>Привіт</h1>.

Альнернативою було би використання зворотньої перевірки:

let str = '...<body style="...">...';
str = str.replace(/(?<=<body.*?>)/, `<h1>Привіт</h1>`);

alert(str); // ...<body style="..."><h1>Привіт</h1>...

Як бачите, в цьому регулярному виразі є тільки зворотня перевірка.

Це працює таким чином:

  • На кожній позиції в тексті.
  • Перевірте, чи йому передує <body.*?>.
  • Якщо це так, то у нас Ñ” співпадіння.

The tag <body.*?> won’t be returned. The result of this regexp is literally an empty string, but it matches only at positions preceded by <body.*?>.

So it replaces the “empty line”, preceded by <body.*?>, with <h1>Hello</h1>. That’s the insertion after <body>.

P.S. Regexp flags, such as s and i can also be useful: /<body.*?>/si. The s flag makes the dot . match a newline character, and i flag makes <body> also match <BODY> case-insensitively.