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 = `
<html>
<body style="height: 200px">
...
</body>
</html>
`;
str = str.replace(regexp, `<h1>Hello</h1>`);After that the value of str should be:
<html>
<body style="height: 200px"><h1>Hello</h1>
...
</body>
</html>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:
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:
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 preceded 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 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.