regresar a la lección
Este material solo está disponible en los siguientes idiomas: عربي, English, Русский, 简体中文. Por favor, ayúdanos a traducir al Español.

Insert After Head

We have a string with an HTML Document.

Write a regular expression that inserts <h1>Hello</h1> immediately after <body> tag. The tag may have attributes.

For instance:

let regexp = /your regular expression/;

let str = `
  <body style="height: 200px">

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

After that the value of str should be:

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

In order to insert after the <body> tag, we must first find it. We can use the regular expression pattern <body.*> for that.

In this task we don’t need to modify the <body> tag. We only need to add the text after it.

Here’s how we can do it:

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

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

In the replacement string $& means the match itself, that is, the part of the source text that corresponds to <body.*>. It gets replaced by itself plus <h1>Hello</h1>.

An alternative is to use lookbehind:

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

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

As you can see, there’s only lookbehind part in this regexp.

It works like this:

  • At every position in the text.
  • Check if it’s preceeded by <body.*>.
  • If it’s so then we have the match.

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

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

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