Find the Word the Mouse is Pointing to on a Webpage with JavaScript

<script>
	import { onMount } from 'svelte';

	let hoveredWord;

	let text = `All states and governments that ever ruled over men have been either republics or monarchies. Monarchies may be hereditary, if the ruler’s family has governed for generations, or new. New monarchies can either be entirely new, as when Francesco Sforza captured Milan, or they could be territories a ruler has added to his existing hereditary state by conquest, as when the King of Spain took Naples. An additional territory won by conquest will be accustomed either to living under a monarch or to the freedom of self government and may be conquered by the new ruler’s own army or that of a third party, by luck or deservedly.`;
	
	onMount(async () => {
		document.addEventListener('mouseover', function (e) {
			document.querySelectorAll('.textContainer span').forEach((node) => {
				node.style.color = '';
			});

			let target = e.target.closest('.textContainer span');

			if (target) {
				target.style.color = 'red';

				hoveredWord =
					target.innerText.replace(',', '').replace('.', '') ||
					target.textContent.replace(',', '').replace('.', '');
			}
		});
	});
</script>

<p class="text-center font-bold">Hovered word: {hoveredWord ? hoveredWord : '-'}</p>
<div class="textContainer px-4 text-sm">
	{#each text.split(' ') as word}
		<span class="italic">{`${word} `}</span>
	{/each}
</div>

// When mouse is hovered on a word, trigger double click to select that word
document.addEventListener('mouseover', function (e) {
	var event = new MouseEvent('dblclick', {
		view: window,
		bubbles: true,
		cancelable: true
	});

	// Programatically fire it for the element we are interested in
	document.getElementById('textContainer').dispatchEvent(event);
});

// Get the selection when souble click fires
document.addEventListener('dblclick', function (e) {
	let target = e.target.closest('#textContainer');

	// Check if it is firing for the textContainer
	if (target) {
		let selectedWord =
			(document.selection && document.selection.createRange().text) ||
			(window.getSelection && window.getSelection().toString());

		// Do something (E.g. Show meaning of that word)
	}
});

document.addEventListener('mouseover', function (e) {
	let target = e.target.closest('.textContainer span');

	// Get width and height of container as this will be different depending on viewport
	if (target) {
		let targetRect = target.getBoundingClientRect();
		let height = targetRect.height;
		let width = targetRect.width;
		// ...
	}
});

<script>
// Get the container we want to modify
let container = document.getElementById('textContainer');

// Check if there is any text that is directly under the container
let firstBit = container.innerHTML[0] !== '<' ? container.innerHTML.split('<')[0] : '';
let lastBit =
	container.innerHTML.slice(-1) !== '>' ? container.innerHTML.split('>').slice(-1) : '';

// Add those text to a span element
if (firstBit) {
	container.innerHTML = `<span>${firstBit}</span>` + container.innerHTML.replace(firstBit, '');
}
if (lastBit) {
	container.innerHTML = container.innerHTML.replace(lastBit, '') + `<span>${lastBit}</span>`;
}

// Get children of the container
let children = getAllDescendants(container);

// Get texts of children that do not have any further children
let texts = children.filter((c) => c.childNodes.length === 0).map((c) => c.textContent);

// For each text block, split it into words and convert each word to a span element
texts.forEach((t) => {
	container.innerHTML = container.innerHTML
		.replace(
			`>${t}<`,
			`>${t
				.split(' ')
				.map((t) => `<span class="hover">${t}</span> `)
				.join('')}<`
		)
		.replace(
			`>"${t}"<`,
			`>${t
				.split(' ')
				.map((t) => `<span class="hover">${t}</span> `)
				.join('')}<`
		);
});

</script>


// This is the HTML container we will be manipulating
// With manipulation, we mean we are going to divide its text into words
// And enclose each word with span element
<div class="px-4 text-sm" id="textContainer">
	All states and governments that ever ruled over men have been either republics or monarchies. Monarchies
	may be hereditary, if the
	<a class="font-bold text-sky-500" href="javascript:void(0)">ruler’s family</a> has governed for
	generations, or new.
	<p>
		New monarchies can either be entirely new, as when Francesco Sforza captured Milan, or they
		could be territories a ruler has added to his existing hereditary state by conquest, as when
		the King of Spain took Naples.
	</p>
	<div><div><span class="font-bold">An additional territory</span></div></div>
	won by conquest will be accustomed either to living
	<span class="italic">under a monarch</span>
	or to the freedom of self government and may be conquered by the new ruler’s own army or that of
	a third party, <span class="text-lg">by luck</span> or deservedly.
</div>
</div>

// Add hover class for highlighting each word
<style>
:global(.hover:hover) {
	background: yellow;
} </style>