Select Specific Line Of Text Within TextArea In JavaScript

Selecting a specific line of text within a textarea using JavaScript can be a useful feature in various web applications. It allows you to programmatically highlight or select a particular line of text, which can be handy for tasks like code editors, text processors, or providing a user-friendly interface for selecting content. In this tutorial, you will learn how to select a given line in a textarea using JavaScript with code example.

View Demo

1. Create an HTML TextArea

First, create a simple HTML structure with a textarea element. This element will allow the user to input text and will serve as the target for selecting a specific line using JavaScript.

<!DOCTYPE html>
<html>
    <head>
        <title>Select Line in Text Area</title>
    </head>
    <body>
        <textarea id="textArea" rows="5" cols="30"></textarea>
        <button onclick="selectLine()">Select Line</button>
    </body>
</html>

In this example, we have a textarea element with the ID textArea and a button that, when clicked, will execute the selectLine() function.

2. JavaScript Code for Selecting a specific line in TextArea

In the following JavaScript code, we retrieve the content of the textarea, calculate the starting and ending indices for the desired line, and used the setSelectionRange() method to select it.

function selectLine() {
    // Get the textarea element
    const textarea = document.getElementById('textArea');

    // Get the textarea content
    const text = textarea.value;

    // Determine the line number you want to select
    const lineNumber = 3; // Change this to the desired line number

    // Initialize variables to track the starting and ending indices
    let startIndex = 0;
    let endIndex = text.length;

    // Split the content into lines
    const lines = text.split('\n');

    // Check if the desired line exists
    if (lineNumber > 0 && lineNumber <= lines.length) {
        // Calculate the starting and ending indices for the desired line
        for (let i = 0; i < lineNumber - 1; i++) {
            startIndex += lines[i].length + 1; // +1 to account for the newline character
        }
        endIndex = startIndex + lines[lineNumber - 1].length;
    }

    // Set the selection range to the desired line
    textarea.setSelectionRange(startIndex, endIndex);

    // Focus the textarea to show the selection
    textarea.focus();
}

In this JavaScript code:

Retrieve the textarea element using its ID.
Get the content of the textarea using the value property.
Specify the desired line number to be selected (you can change the value of lineNumber as needed).
Initialize startIndex and endIndex to track the selection range, and we initially set endIndex to the length of the entire content.
Split the content into an array of lines using the newline character (\n) as the delimiter.
Ccalculate the startIndex and endIndex based on the content of the desired line.
Finally, we use the setSelectionRange() method to select the specified line and then focus the textarea to display the selection.

1. Create an HTML TextArea

2. JavaScript Code for Selecting a specific line in TextArea

Leave a Reply Cancel reply