Почему замена содержимого блока через innerHTML предотвращает стандартное поведение браузера?

Question

[Богдан Кучерук]

Есть блок:

<div contenteditable="true" id="editable-div"></div>

Хочу реализовать функционал хэштегов с помощью этого кода:

const editableDiv = document.getElementById('editable-div');
editableDiv.addEventListener('input', function(event) {
let a = editableDiv.innerHTML;
if (a.indexOf('#') !== -1) {
event.preventDefault();
const editableDiv = document.getElementById('editable-div');
let a = editableDiv.innerHTML;
// Сохраняем текущую позицию курсора
const selection = window.getSelection();
const range = selection.getRangeAt(0);
const startContainer = range.startContainer;
const startOffset = range.startOffset;
// Изменяем содержимое блока
a = a.replace(/#(\w+)/g, '<a href="#">#$1</a>');
editableDiv.innerHTML = a;
// Восстанавливаем позицию курсора
const newRange = document.createRange();
newRange.setStart(startContainer, startOffset);
selection.removeAllRanges();
selection.addRange(newRange);
}
});

Почему после изменения содержимого блока:

a = a.replace(/#(\w+)/g, '<a href="#">#$1</a>');
editableDiv.innerHTML = a;

Курсор всегда находится в начале? Как это исправить? event.preventDefault(); не работает.
И восстановление позиции не работает:

const newRange = document.createRange();
newRange.setStart(startContainer, startOffset);
selection.removeAllRanges();
selection.addRange(newRange);

Comments

[WbICHA]

Причём здесь реакт?

[Богдан Кучерук]

WbICHA, ожидал что по тегу React знают javascript

[WbICHA]

Богдан Кучерук, ты глупый или что-то?

[Богдан Кучерук]

WbICHA, а ты?

Answer 1

[Stalker_RED]

Так вы сперва заменяете innerHTML, а после этого сохраняете и восстанавливаете позицию курсора.
Проблема в том, что на момент сохранения позиции курсор уже в начале :)

Comments

[Богдан Кучерук]

Извините, исправил, теперь вообще не работает)

[Stalker_RED]

Богдан Кучерук, а теперь вы ссылаетесь на несуществующие элементы.
При замене innerHTML startContainer вероятно был уничтожен, и в том-же месте был создан другой элемент.

[Богдан Кучерук]

Stalker_RED, умная мысль! И как это исправить?

[Stalker_RED]

Богдан Кучерук, Отказаться от замены всего innerHTML, менять только нужные узлы.

[Богдан Кучерук]

Stalker_RED, с помощью чего?

[Stalker_RED]

Богдан Кучерук, перебрать все узлы, проверить их текст на наличие хештегов, заменить текстовые ноды на html

[Богдан Кучерук]

Stalker_RED, что такое узлы? Извините, не понимаю

[Богдан Кучерук]

Stalker_RED, сколько денег хотите за решение моей задачи?

[Stalker_RED]

Богдан Кучерук, узел это node

[Богдан Кучерук]

Stalker_RED, через node тоже курсор скидывается в начало:

const editableDiv = document.getElementById('myDiv');
editableDiv.addEventListener('input', function(event) {
  const childNodes = editableDiv.childNodes;
  for (let i = 0; i < childNodes.length; i++) {
  const childNode = childNodes[i];
    childNode.textContent = childNode.textContent + 'New text';
}
  });

[Stalker_RED]

Богдан Кучерук, у вас изначально в диве просто plain text или html?
Одна текстовая нода, или множество?

[Богдан Кучерук]

Stalker_RED, как посмотреть? Самый стандартный блок:

<div contenteditable="true" id="editable-div"></div>

[Stalker_RED]

Богдан Кучерук, он изначально пустой, или в нем что-то есть? Текст, или может быть HTML?

Это важно, т.к. если изначально пустой, то у вас ни в какой момент не может быть больше одного необработанного хештега, и можно ставить курсор в тот тег, который вводится прямо сейчас. Если там может быть со старта текст с несколькими хештегами - все сложнее. Если там может быть со старта HTML - то есть идет редактирование поста, например, то все еще запутаннее.

[Богдан Кучерук]

Stalker_RED, вообще не понял. Самый обычный contenteditable="true блок.

У Твиттера и фейсбука тоже в таких блоках пост идет.

Может можно просто сами слова подсветить как-то? Хэштеги сделаю на PHP.