Objective

Highlight all substrings in a paragraph that match whatever is entered in an input element.

Difficulty

Easy

Description

You have a text input field and a paragraph given as shown in the HTML code below:

<input type="text">
<p>Regular expressions are extremely useful when we have to search for given patterns in given strings. We can create pretty complex patterns and match pretty complex substrings using regular expressions.</p>

The task is to make the input field work as a finder, highlighting segments in the paragraph below it that match whatever is input in it.

For example, in this case, if we enter 'in' into the input field, all the substrings 'in' in the paragraph should be highlighted as shown below:

Regular expressions are extremely useful when we have to search for given patterns in given strings. We can create pretty complex patterns and match pretty complex substrings using regular expressions.

Here a few things to keep in mind in this exercise:

  1. The search shall be case-sensitive and global.
  2. The highlight color should be yellow.
  3. The input element should react in any way data is input into it — pasted, typed, or dragged into.