How to get index of char as coordinate in a text Javascript

Question

I want to get the index of char in text at coordinates. My current approach is to simulate selection.

I was able to simulate a click at coordinates with the following code, but this simulated click does not trigger selection (setting document.getSelection().anchorOffset) unlike a real click.

function click(x,y){
  var el = document.elementFromPoint(x,y);
  var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )
  el.dispatchEvent(event);
}

Here is the experiment code https://jsfiddle.net/fbwgm1s0/1/

function click(x,y){
  var el = document.elementFromPoint(x,y);
  var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )
  el.dispatchEvent(event);
}

function printCoordinatesAndSelectedIndex(event) {
  let coordinates = "clientX: " + event.clientX + " - clientY: " + event.clientY
  let selectedIndex = "index: " + (document.getSelection().anchorOffset -1)
  return coordinates + " " + selectedIndex
}

document.querySelector('h1').addEventListener('click', function(event){
  let result = document.createElement("div")
  result.innerText = printCoordinatesAndSelectedIndex(event)

  let results = document.querySelector('#results')
  results.appendChild(result)
})

document.addEventListener('keydown', function(event){
  document.getSelection().removeAllRanges()

  let h1 = document.querySelector("h1").getBoundingClientRect()
  var x = h1.x + 50
  var y = h1.y + 15
  click(x, y)
})

<h1>press any key or click me</h1>
<div id="results"></div>

Answer 1

You could wrap every character inside the <h1> tag in a <span>. This will be invisible to the user, but gives you another element to listen for clicks on. Then you can check the index of the clicked <span> inside the <h1>.

const h1 = document.querySelector('h1');

const wrapTextWithSpans = target => {
  const text = target.textContent;
  const separatedText = text.split('');
  const wrappedText = separatedText.map(item => `<span>${item}</span>`);
  target.innerHTML = wrappedText.join('');
}

h1.addEventListener('click', ({ target }) => {
  const index = Array.from(target.parentElement.children).indexOf(target);
  console.log(index);
});

wrapTextWithSpans(h1);

<h1>press any key or click me</h1>
<div id="results"></div>