Выделить весь текст в contenteditable div?

Question

[arklight]

Привет! есть разметка

<tr class="text-center">
    <th>${id}</th>
    <td><div class="form-control" contenteditable="true">${text1}</div></td>
    <td><div class="form-control" contenteditable="true">${text2}</div></td>
    <td><div class="form-control" contenteditable="true">${text3}</div></td>
    <td><div class="form-control" contenteditable="true">${text4}</div></td>
    <td><div class="form-control" contenteditable="true">${text5}</div></td>
    <td class="d-flex flex-row align-items-center justify-content-center">
        <button class="upd btn btn-primary me-1">&uparrow;</button>
        <button class="del btn btn-primary btn-close me-1"></button>
    </td>
</tr>

Как можно выделить весь text5, например?

<div class="form-control" contenteditable="true">${text5}</div>

Answer 1

[Danny Arty]

С использованием jQuery можно сделать выделение всего текста при клике например так:

Comments

[arklight]

Спасибо, я через selectNode простой делал, у меня, видимо, поэтому не работало

Answer 2

[Вадим]

Теория с примерами как выделять элементы или текст: Selection and Range

Comments

[arklight]

Да, спасибо, человек выше уже скинул примерно такой же код, как тут, у меня ошибка была элементарная, через selectNode делал вместо selectNodeContents

Answer 3

[Tim]

Comments

[arklight]

Ты гений! Минимум строчек - максимум пользы. Большое спасибо

Answer 4

[arklight]

Возможно, кому-то поможет, ОБЯЗАТЕЛЬНО делать через selectNodeContents вместо selectNode

$("#root").on("click", (e) => {
        console.log(e.target.tagName)
        if (e.target.tagName === "DIV") {
            let rng = document.createRange()
            let sel = window.getSelection()
            rng.selectNodeContents($(e.target)[0])
            sel.removeAllRanges()
            sel.addRange(rng)
        }
    })

P. S.: у меня разметка добавляется по мере поступления ответов от сервера, так что тут захватывается контейнер root, на него накидывается обработчик onclick, затем проверяется, что был нажат именно блок div и только после этого всё, что в нём есть, выделяется