Как я могу получить смещение относительно элементов бабушки и дедушки в HTML?

Question

Если у меня есть <p> some text <b> some oth|er text </b> bla bla </p>, где | это каретка, и я хочу получить смещение относительно узла тега p, есть ли способ, возможно, я могу найти смещение относительно p?

Сейчас я получаю смещение выбора этим:

var range = window.getSelection().getRangeAt(0); 
var offset = range.startOffset; 

однако это возвращает смещение по отношению к жирным теге.

Мне нужно это, так как я разрабатываю редактор в Javascript, и мне нужно реализовать функцию ввода самостоятельно, так как я использую этот редактор для совместной работы в режиме реального времени. Я нашел эту проблему, когда кто-то нажал клавишу ввода в середине дочернего элемента тега p.

Спасибо за вашу помощь :)

Answer 1

Есть, вероятно, более эффективные способы достижения этой цели, но я достаточно не играл с выборами и диапазонов еще. Тем не менее, я думал, что, поскольку вы уже знаете символы, смещенные относительно тега b, вам нужно будет только добавить к счету количество символов, содержащихся в текстовых узлах, которое предшествует тегу b, чтобы узнать общее смещение.

Я считаю, что вы можете получить родительский узел тега b, выполнив что-то вроде range.startContainer.parentNode.

Затем, вы можете петля над childNodes от p тега до childNodes[i] является b тегом, и каждый раз, когда вы сталкиваетесь с текстовым узлом (node.nodeType === 3), добавьте node.textContent.length к смещению.