У меня есть текстовый блок с фиксированной шириной, и я пытаюсь получить каждую строку текста boundingClientRect.Мне интересно, есть ли у Selection api метод для этого, что я просто скучаю.Есть ли какой-нибудь простой способ получить каждую строку выделенного текста?
В настоящее время единственное решение, которое я могу придумать, - это создать интервалы вокруг каждого символа в выделении, а затем объединить символы, если они имеют одинаковый yкоординаты в их ограничивающем прямоугольнике клиента.Это очень неэффективно, поэтому мне любопытно, есть ли более простой метод.
Ниже приведено графическое представление того, что я пытаюсь найти.API выбора дает только прямоугольник вокруг поля в целом, включая невыбранный текст.Я пытаюсь найти прямоугольники вокруг каждой строки выделения.
Выбор будет всегда быть текстом.Поэтому не нужно беспокоиться об изображениях.Однако они могут находиться в разных элементах, но они будут иметь одинаковый тип тега (например, без ссылок или тегов em / strong).
Возвращает выбранный блок текста
const selection = window.getSelection().getRangeAt(0);
markjs имеет решение для выделения, которое оборачивает все в один тег.
<mark><p>hello there</p></mark>
Мой план состоял в том, чтобы использовать подобный алгоритм, чтобы получить внутренний html и пройти через каждый символ и обернуть его в новый тег с именем класса, который затем может быть найден, а затем вычислен ограничивающий прямоугольник.Это просто написать, но кажется, что вычислительно тяжелее, чем хотелось бы.
Есть ли способ просто получить ограничивающий прямоугольник каждой строки?