Find and Highlight Exercise

Prerequisites for this exercise

JavaScript Regex Basics
JavaScript and CSS

Foundation

Basics

Foundation

Flags

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:

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

New file

Inside the directory you created for this course on JavaScript RegExp, create a new folder called Exercise-1-Find-and-Highlight and put the new HTML file solution files for this exercise within it.

Solution

We have to be able to match whatever is entered into the input field with the text in the paragraph below. This hints the usage of RegExp() — only it could create a regex on-the-go.

This finalizes the way to create the expression.

Let's move forward...

The exercise description clearly says to make the input element react at any method of entering data into it — by means of pasting, typing, or dragging text. This hints us to handle the input event on the element.

This finalizes the event to handle.

Now what to do inside the event's handler. Well, we have to search for all occurrences of whatever string is entered into the input field in the paragraph below and highlight each of them.

How to do this highlighting thing?

It's very simple — we replace each matched string with '', followed by the string, followed by ''; and then configure the styles of  using CSS.

It seems that all aspects of the solution are covered. Let's now write the code.

Here's the JavaScript part:

var inputField = document.querySelector('input');
var para = document.querySelector('p');
var paraText = para.innerHTML;

inputField.oninput = function() {
   var patt = this.value;
   var regex = new RegExp(patt, 'g');

   para.innerHTML = paraText.replace(regex, '<span>' + patt + '</span>');
}

First, both <input> and  are selected in inputField and para, respectively, and then the text of the paragraph is saved in a variable paraText.

This is necessary because when highlighting is done inside the paragraph, new tags are added, and so if we keep working with the latest text inside the  element, we'd be including these tags in the search as well.

By saving the text at the start of the program inside a variable, we make sure that whenever search is performed, it's performed over the original text of the paragraph.

Moving on, the oninput handler is pretty apparent on what it's doing.

First, the value of the input field is retrieved, followed by creating an regex out of it using RegExp(), and then using this expression to find and highlight each matched substring (by means of encapsulating the substring with a  tag).

And here's the CSS part which is required only to configure the styles of the  element: