Programmatically Select Text on Component Click using React

share link

by Abdul Rawoof A R dot icon Updated: Feb 20, 2023

technology logo
technology logo

Solution Kit Solution Kit  

In JavaScript code, to highlight the text given by the user, there are many built-in functions in mark.js, but we are using only two functions for our requirement: the mark() and unmark() functions. In these functions, the mark() function is used to highlight the search text, and unmark() function is used to remove the highlighted text that is highlighted before. 

The main purpose of the highlighting method is to draw attention to important information or data in a text. It first asks the reader to pick out the important parts, and then it gives an effective way to review that information later so that it is called effective highlighting. Sometimes, we may want to select information or data in a text programmatically on a web page. It limits us to highlighting one sentence or phrase per paragraph and looks for the sentence that best expresses the main concept. The effect of highlighting is to make better text memory when re-rendering it, and better comprehension as students evaluate the importance of individual passages while reading. 

Here is an example of how you can programmatically select text on a component click using React: