通过Javascript获取点击事件的文字偏移量？

Question

所以我一直在搜索，试图弄清楚如何做以下事情并且尚未找到解决方案：

我需要从click事件中获取给定HTML元素的文本偏移量。这意味着如果我有以下HTML

<p>This is a really cool paragraph</p>

并且用户点击句子中的第一个'a'，如果我们将'This'中的'T'作为索引0，则文本偏移量将为8，因为第一个'a'在索引8处。 / p>

我需要这些信息，以便我可以根据用户点击的位置以编程方式创建文本选择。到目前为止，我可以跟踪点击哪些HTML元素，因此我可以在HTML元素级别的粒度下创建这种活动，但我希望能有更好的控制。

谢谢！

Answer 1

使用原型：

<p id='mytext'>This is a really cool paragraph</p>
<script type='text/javascript'>
   var characters = $('mytext').textContent;
   var newchars = '';
   for(I = 0;I < chars.length;I++) {
      newchars += '<span id="char_' + I + '">' + chars[I] + '</span>';
   }
   $('mytext').textContent = newchars;
   Event.observe($('mytext'), 'click', function(e) {
      var spanID = (e.findElement('span')).getAttribute('id')
      var index = spanID.split('_')[1]; // Ta-daaa!
   });
</script>

请不要对大块文本（或者最好是）执行此操作。它为每个角色创建一个DOM节点，并且可以减慢浏览器的速度......

Answer 2

在另一个答案中复制你的评论：

  

我目前正试图通过Javascript模拟人类行为   结果比我预期的要困难得多（大多数   可能是设计）。

您想要的是Selenium，用于网络浏览器自动化：http://seleniumhq.org/

Answer 3

我认为没有内置任何内容。任何解决方案都是黑客并且不可靠。

您可以做的是使用selection API在页面上进行用户选择，这听起来就像您一样。

Answer 4

将其作为可能的黑客/解决方案抛弃。

您可以尝试在发生点击时使用鼠标offsetX和offsetY，并在该位置模拟双击dblclick，有效地选择文本，然后使用选择API获取他们单击的单词。不会对这封信有所帮助，但可能会发挥作用。

Answer 5

将每个字母附加到span标记内，onClick事件只提取span标记内的字母，并且可以使用span标记中的某些属性保持引用，以跟踪每个元素的位置索引。但是这种方法会多余的。

Answer 6

尝试window.getSelection() ...我不确定它是否适用于所有浏览器，但至少Chrome似乎会创建一个具有所需偏移量的Selection对象。