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

[Anonymous]

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

Код: Выделить всё

function updateOverlay() {
const textarea = document.getElementById('textarea');
const overlay = document.getElementById('overlay');

overlay.innerHTML = '';

const text = textarea.value;

const wordsAndSpaces = text.split(/(\s+)/) //.filter(e => e.length > 0)//.map(e => e.replace(" ", " "));
console.log(wordsAndSpaces)

let offsetLeft = 0;
let offsetTop = 0;
let lineHeight = parseFloat(window.getComputedStyle(textarea).lineHeight);

for (let item of wordsAndSpaces) {
const span = document.createElement('span');
if (item.includes(" ")) {
span.innerHTML = item.replace(" ", " ");
} else {
span.textContent = item;
}
span.style.display = 'inline-block';

overlay.appendChild(span);

const rect = span.getBoundingClientRect();

const width = rect.width;
const height = rect.height;
const left = offsetLeft + rect.left - 10;
const top = offsetTop + rect.top;

const underline = document.createElement('div');
underline.classList.add('underline');
underline.style.width = width + 'px';
underline.style.height = '1px';
underline.style.left = left + 'px';
underline.style.top = top + height - 10 + 'px';
overlay.appendChild(underline);

offsetLeft += span.offsetWidth;
if (offsetLeft >= textarea.clientWidth) {
offsetLeft = 0;
offsetTop += lineHeight;
}

overlay.removeChild(span);
}
}

// Initial call to update overlay
updateOverlay();

Код: Выделить всё

#textarea-container {
position: relative;
width: 400px;
font-size: medium;
font-weight: 500;
font-family: 'Courier New', Courier, monospace;
/* margin-bottom: 20px; */
}

#textarea, #overlay-container {
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 0px;
font-size: 16px;
resize: none;
border: 0px solid #ccc;
margin: 0;
}

#overlay-container {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
will-change: transform;
}

#overlay {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0px;
margin: 0px;
}

.underline {
position: absolute;
border-bottom: 1px solid blue;
}

Код: Выделить всё

a b

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

Подробнее здесь: https://stackoverflow.com/questions/780 ... th-pure-ht