JavaScript Select All Text in Div with a Mouse Click

To select all div text with a single mouse click in JavaScript, you can use the following code:

HTML:

<div id="sample" onclick="highlight('sample')"><b>Click this paragraph once and it's highlighted by JavaScript!</b></div>

JavaScript:

function highlight(id) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(id));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(id));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}

Here’s what the JavaScript function does step-by-step:

1. The function checks whether the document.selection property exists. This property is only available in older versions of Internet Explorer.
2. If document.selection exists, the function creates a new text range and positions it to surround the text within the element with the ID id. It then selects the text range using the select() method.
3. If document.selection does not exist, the function checks whether the window.getSelection() method exists. This method is available in modern browsers.
4. If window.getSelection() exists, the function creates a new range that encompasses the element with the ID id. It then removes any existing selections using the removeAllRanges() method and adds the new range to the user’s selection using the addRange() method.

Update: Because Internet Explorer is no longer in use, you might just want to remove the if-else function and use the code inside the else block.

function highlight(id) {
    var range = document.createRange();
    range.selectNode(document.getElementById(id));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
}

Test the above code solutions below by clicking the text element:

Alternative Solution: Use CSS

To make an HTML div text selectable with a single click of a button, you can use CSS. This way you don’t have to use JavaScript at all.

To pull this off, you can use the user-select specification as follows.

CSS:

.sample {
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

HTML:

<div class="sample"><b>Click this paragraph once and it's highlighted by CSS!</b></div>

You can test this solution by clicking the paragraph below:

Careful with Content Editable Elements!

Content editable elements are HTML elements that can be edited by the user, such as div, span, and p elements. These elements have the contenteditable attribute set to “true”. When an element is content editable, the user can interact with its contents as if they were editing a document in a word processor.

When using JavaScript to select text in a content-editable element, it’s important to use the selectNodeContents method instead of selectNode. The selectNodeContents method selects all of the contents of the element, whereas selectNode only selects the element itself.

Here’s an example:

HTML:

<div contenteditable="true" onclick="selectEditableText(this)">
    This is some editable text. Select me!
</div>

JavaScript:

function selectEditableText(element) {
    const range = document.createRange();
    range.selectNodeContents(element);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}

In this code, we define a function called selectEditableText that takes one argument, element. This function creates a new range that encompasses all of the text within the element, selects that range, and adds it to the user’s selection.

In the HTML, we add an onclick attribute to the content editable div and pass this as an argument to the selectEditableText function. The this keyword refers to the element that triggered the event, which in this case is the content editable div.

Because the element is content editable, we use the selectNodeContents method to ensure that all of the text is selected.

You can try the solution by clicking the content editable div below:

Thanks for reading. Happy coding!