单击时确定HTML元素中字符的位置索引

Question

我有一个HTML元素,里面只有可见文本.这个例子是一个<div>元件,但也可以是一个<span>,<p>或其他DOM元素.

<div>This is a simple example.</div>

单击时,我可以获得光标在div表面上的位置,但是我需要在单击时确定最近的字符和/或其索引在div.innerHTML字符串中的位置.

我在这里的 SVG文本实体的"getCharNumAtPosition"方法中找到了类似的实现.

是否可以在JavaScript中使用HTML实现这样的功能？

(如果解决方案可以在大多数现代浏览器中移植,使用大多数书面语言,并且基于相对稳定的标准,以便以后不会出现问题,那么解决方案将非常有用.)

Answer 1

$('div').click( function () {
  getSelectionPosition (); 
});


function getSelectionPosition () {
  var selection = window.getSelection();
  console.log(selection.focusNode.data[selection.focusOffset]);
  alert(selection.focusOffset);
}

这适用于"点击",以及大多数浏览器的"范围".(selection.type = "caret"/ selection.type = "range").

selection.focusOffset()为您提供内部节点中的位置.如果元素嵌套在例如内部<b>或<span>标签中,它将为您提供内部元素内部的位置,而不是全部文本,或多或少.我无法"选择"带有focusOffset"插入符号"类型的子标记的第一个字母(单击,而不是范围选择).当您单击第一个字母时,它会在标记开头加1之前给出最后一个元素的位置.当您单击第二个字母时,它会正确地为您提供"1".但我没有找到一种方法来访问子元素的第一个元素(偏移0).这个"选择/范围"的东西看起来很麻烦(或者对我来说非常不直观).^^

但是没有嵌套元素的使用非常简单!(适合你的工作<div>)

这是一个小提琴

重要编辑2015-01-18:

由于下面给出的原因,这个答案在被接受时会有效,但现在不再有效.其他答案现在最有用.

• 马修的一般答案
• Douglas Daseeco提供的工作示例.

Firefox和Chrome都调试了window.getSelection()行为.可悲的是,这个用例现在没用了.(阅读文档,IE 9及更高版本的行为应相同).

现在,字符的中间用于决定偏移量.这意味着单击一个角色可以返回2个结果.第一个字符为0或1,第二个字符为1或2,等等.

我更新了JSFiddle示例.

请注意,如果您调整窗口大小(Ctrl+鼠标),则Chrome上的行为非常糟糕,只需点击一下即可.