How to Highlight Text Using JavaScript

While developing dynamic websites, developers frequently need to highlight text on a web page to emphasize any text or information. Highlighting text is a very useful feature that helps the users to focus on the particular text or information.

This article will describe the procedure for highlighting text in JavaScript.

How to Highlight Text Using JavaScript?

For highlighting text in JavaScript, utilize the “mark” element/tag in the <script> tag or JavaScript file. It is used with predefined JavaScript methods, such as the “innerHTML” attribute, and the “getElementById()” method. Let’s see some examples to understand.

Example 1: Highlight Hard Code Text

In this example, we will add the text on the web page dynamically and highlight it. For this purpose, first, create an <p> element in an HTML file by assigning an id “text”:

Now, in the <script> tag, first, get the <p> element using its assigned id with the help of “getElementById()” method. Then, use the “innerHTML” attribute to add the text on the web page. For highlighting the specified text, add it between the “<mark>” tag:

document.getElementById("text").innerHTML = "Learn <mark>JavaScript</mark> from <mark>Linuxhint</mark>";

Output

Example 2: Highlight Text on Run Time (User-Specified)

Here, we will highlight the text in the given paragraph that will be entered by the user. For the corresponding purpose, add a text in an HTML file in a <p> tag with an id “message”:

<p id="message">Linuxhint is an excellent resource for learning about Linux and related open-source software. It also offers many tutorials and guides on different programming languages, such as Java, Python, HTML, CSS, JavaScript, and so on. Linuxhint provides simple, clear, and authentic information. </p>

Create an input field for searching text to highlight in the paragraph:

Now, in <script> tag or in the JavaScript file, access the paragraph and the text field using their assigned ids with the help of “getElementById()” method:

const textMsg = document.getElementById('message');
const highlightText = document.getElementById('highlightText');

Use the “addEventListener()” method that will search the entered value in the paragraph and highlight it. For this purpose, use a regular expression to find all text that matches the searched word or sentence. For highlighting matched text, utilize the <mark> tag:

highlightText.addEventListener('input', (event) => {
const textSearch = event.target.value;
const regexPattern = new RegExp(textSearch, 'gi');

let text = textMsg.innerHTML;
text = text.replace(/(<mark class="highlightColor">|<\/mark>)/gim, '');

const newText = text.replace(regexPattern, '<mark class="highlightColor">$&</mark>');
textMsg.innerHTML = newText;
});

As you can see that we have successfully highlighted the text in the paragraph that is searched in the input box:

That was all about highlighting the text in JavaScript.

Conclusion

For highlighting text in JavaScript, use the “mark” element/tag in the <script> tag or JavaScript file. In this article, we have provided properly detailed examples for highlighting the text in JavaScript. We gave an example of hard-coded text highlighting as well as highlighting or selecting text by the user-entered value.

How to Highlight Text Using JavaScript