如何在文本Javascript中获取char的索引作为坐标

问题描述

我想获取坐标处文本中char的索引。我目前的方法是模拟选择。

我能够使用以下代码模拟对坐标的点击，但是与真实点击不同，此模拟点击不会触发选择（设置document.getSelection().anchorOffset）。

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

这是实验代码 https://jsfiddle.net/fbwgm1s0/1/

function click(x,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>

解决方法

您可以将<h1>标记内的每个字符包装在<span>中。这对于用户是不可见的，但是为您提供了另一个元素来监听点击。然后，您可以检查<span>中被点击的<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>

javascript textselection