Получение выбранной текстовой позиции

В настоящее время я получаю выделенный текст в браузере:

window.getSelection();

Теперь мне нужно показать всплывающую подсказку над этим текстом при нажатии пользовательского ключа (обратите внимание, что мышь больше не может быть над текстом), поэтому для этого мне нужна абсолютная позиция этого выделенного текста.

Есть ли способ сделать это, возможно, обернуть этот текст внутри тега и затем получить смещения?

Любая идея?

PS: Приходится работать с хром, а не для всех браузеров.

PS2: Извините за мой дерьмовый английский.

Ответ 1

Самый простой способ - вставить элемент временного маркера в начале или конце выбора и получить его позицию. Я продемонстрировал, как это сделать раньше в Stack Overflow: Как разместить элемент рядом с выбором текста пользователя?

Ответ 2

s = window.getSelection();

Возвращает выбор. Поэтому попробуйте

s = window.getSelection();
oRange = s.getRangeAt(0); //get the text range
oRect = oRange.getBoundingClientRect();

oRect будет ограничивающим прямоугольником в клиентских (фиксированных) координатах.

Ответ 3

Прежде чем использовать getBoundingClientRect, вам нужно знать это примечание:

Рабочий черновик CSSOM указывает, что он возвращает ClientRect для каждого поля рамки

И этим "стандартом":

Для встроенного элемента два определения одинаковы. Но для элемента блока Mozilla вернет только один прямоугольник.

Поэтому, если кто-либо читает этот пост, хочет общее решение для более точных позиций и макетов выбранных текстов, я предлагаю следующие подходы:

Вариант 1: Найдите точную начальную и конечную точку текста вставив невидимые элементы. Затем вычислите выделенные прямоугольники линий с извлеченной вычисленной высотой строки и шириной контейнера. Используемые API: window.getComputedStyle.

Pro: результат будет наиболее точным для каждой строки текста.
Con: 1) Если выбор выполняется по нескольким узлам с разной высотой и шириной линии, алгоритм становится сложным. 2) И вам нужно реализовать алгоритм вычисления, который слишком трудоемкий при реализации простой функции.

Вариант 2: Оберните каждый текст тщательно стилизованным встроенным элементом, извлекая компоновка каждого окна и объединение результатов в строки.

Pro: работает для всех непрерывных выборов (что в основном означает все случаи в современных реализациях браузера.). Достаточная точность для каждой строки текстов.
Con: 1) В некоторых случаях его результат немного неточен, так как он добавляет ширины ошибок kerning. 2) Он замедляется при очень большом выборе текстов.

Для опции 2 rangeblock - это существующая реализация с простым API, который дает вам макет абзаца каждой строки текста:

let block = rangeblock.extractSelectedBlock(window, document);
console.info("Text layout: " + JSON.stringify(block.dimensions));
// output: Text layout: {Left: 100, Top: 90, Width: 200, Height: 50}