Как правильно в этом случае брать параметры Selection и Range?

Question

[Ankozar]

Я хочу чтобы при нажатии на кнопку на странице в текст вставлялся определённый символ. Сейчас я пришёл вот к такому коду

<div class="block">
  текст..... <b>текст...<b/>текст....<b>текст....</b> текст....
<div>

let block
if(window.getSelection().anchorNode.nodeName == '#text') {
        block = window.getSelection().anchorNode.parentNode
    }else {
        block = window.getSelection().anchorNode
    }
let caret  = window.getSelection().getRangeAt(0).startOffset;
    console.log(block.innerHTML)
        block.innerText = block.innerHTML.slice(0, caret) + symbol + block.innerHTML.slice(caret);

Если у меня в диве только текст, всё работает. Если я часть текста выделяю тегом <b>, то абзацы до тега считаются нормально, во всех тегах нормально, а абзацы между тегами и самый последний абзац - там startOffset берётся от последнего закрытого тега. И, соответственно, сивол вставляется в первый абзац DIVа. Я пытался разобраться. Читал, как и откуда берётся Range. Но не понимаю до конца.

Comments

[Sergey В.]

Если Вы часть текста выделяете тегом <b>, то parentNode у текста внутри тегов будет элемент <b>. И уже у него нужно будет изменять innerHTML или textContent

Answer 1

[RAX7]

Слайсить innerHTML и вставлять результат в innerText - очень плохая идея. Да, и использование parentNode здесь не к чему.

Comments

[Ankozar]

Спасибо! Но я успел дойти до textContent сам =) Сообразил, как нужно, буквально минут за 20 до вашего ответа. Доволен как слон, что сам дошёл.

А не подскажете, как быть с textaerea? Почему-то с ним этот код не работает. Он selection определяет родительский блок почему-то.

[RAX7]

Ankozar, попробуй что-нибудь из этого https://stackoverflow.com/a/10596963