Создание функции проверки орфографии с подчеркиванием и всплывающим окном в текстовой области с использованием чистого H ⇐ CSS

[Гость]

Я хочу создать текстовую область с функцией проверки орфографии, аналогичной Grammarly. Если набрано слово с ошибкой, его следует подчеркнуть. При нажатии на подчеркивание должно открыться вот такое всплывающее окно.

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

Я попробовал этот подход, но определить положение каждого слова сложно. Например, поведение текстовой области включает ранние разрывы строк, чтобы избежать обрезания слов. Вот мой текущий код:

function updateOverlay() { const textarea = document.getElementById('textarea'); const overlay = document.getElementById('overlay'); overlay.innerHTML = ''; константный текст = textarea.value; const wordAndSpaces = text.split(/(\s+)/) //.filter(e => e.length > 0)//.map(e => e.replace(" ", " ")); console.log(wordsAndSpaces) пусть offsetLeft = 0; пусть offsetTop = 0; пусть lineHeight = parseFloat(window.getComputedStyle(textarea).lineHeight); for (пусть элемент wordAndSpaces) { const span = document.createElement('span'); если (item.includes(" ")) { span.innerHTML = item.replace(" ", " "); } еще { span.textContent = элемент; } span.style.display = 'inline-block'; overlay.appendChild(диапазон); const rect = span.getBoundingClientRect(); константная ширина = rect.width; константная высота = rect.height; const left = offsetLeft + rect.left - 10; const top = offsetTop + rect.top; const подчеркивание = document.createElement('div'); underline.classList.add('подчеркивание'); underline.style.width = ширина + 'px'; underline.style.height = '1px'; underline.style.left = влево + 'px'; underline.style.top = верх + высота - 10 + 'px'; overlay.appendChild(подчеркивание); offsetLeft += span.offsetWidth; if (offsetLeft >= textarea.clientWidth) { смещениеслефт = 0; offsetTop += lineHeight; } overlay.removeChild(диапазон); } } // Первоначальный вызов для обновления наложения updateOverlay(); #textarea-container { положение: относительное; ширина: 400 пикселей; размер шрифта: средний; вес шрифта: 500; семейство шрифтов: «Courier New», Courier, моноширинный; /* поле снизу: 20 пикселей; */ } #textarea, #overlay-container { ширина: 100%; высота: 200 пикселей; размер коробки: граница-коробка; отступ: 0 пикселей; размер шрифта: 16 пикселей; изменение размера: нет; граница: 0 пикселей, сплошная #ccc; маржа: 0; } #overlay-контейнер { позиция: абсолютная; верх: 0; слева: 0; события указателя: нет; будет-изменение: трансформировать; } #оверлей { положение: относительное; ширина: 100%; высота: 100%; размер коробки: граница-коробка; отступ: 0 пикселей; поле: 0 пикселей; } .подчеркнуть { позиция: абсолютная; нижняя граница: 1 пиксель, сплошной синий; a b

Как я могу решить эту проблему? Есть ли способ вычислить положение каждого слова в текстовой области? Или мне следует рассмотреть другой подход?

Спасибо.