How To Highlight A Part Of Text In Textarea

Highlighting a part of text in a textarea can be a useful feature when you want to draw attention to specific information or make it stand out. In this article, we'll walk you through a simple way to achieve this using JavaScript.

First, let's create a basic HTML file with a textarea element where we want to enable text highlighting. Below is an example of the HTML structure:

<title>Text Highlighter</title>


    <textarea id="textArea"></textarea>
    <button>Highlight</button>

    
        function highlightText() {
            var textarea = document.getElementById('textArea');

            var startIndex = textarea.selectionStart;
            var endIndex = textarea.selectionEnd;

            var selectedText = textarea.value.substring(startIndex, endIndex);

            var highlightedText = '<span style="background-color: yellow">' + selectedText + '</span>';

            textarea.setRangeText(highlightedText, startIndex, endIndex, 'end');
        }

In the code snippet above, we have an HTML textarea element with an ID of "textArea" where users can input text. There is also a button that calls the `highlightText` function when clicked.

Inside the `highlightText` function, we first get the start and end positions of the selected text within the textarea. We then extract the selected text using these positions.

Next, we create a new highlighted version of the selected text by wrapping it in a `` element with a yellow background color.

Finally, we replace the selected text in the textarea with the highlighted version using the `setRangeText` method.

When you run this code in a browser, you can type or paste text into the textarea, select a portion of it, and click the "Highlight" button to see the selected text get highlighted with a yellow background.

Remember that this is a basic example and can be further enhanced to suit your specific requirements. You can customize the highlighting color, add more styling, or even implement additional features such as removing the highlight.

In conclusion, adding the ability to highlight text in a textarea using JavaScript can enhance the user experience and make certain pieces of information more prominent. It's a simple yet effective way to improve the usability of your web application.