单击时确定HTML元素中字符的位置索引 [英] Determine the position index of a character within an HTML element when clicked

问题描述

我有一个HTML元素，里面只有可见的文本.本示例是一个<div>元素，但它可能是一个<span>，<p>或其他DOM元素.

I have an HTML element with only visible text inside. This example is a <div> element, but it could be a <span>, <p>, or other DOM element.

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

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

When clicked, I can get the position of the cursor on the surface of the div, but I need to determine the position of the nearest character and/or its index into the div.innerHTML string at the time of the click.

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

I found a similar implementation in the "getCharNumAtPosition" method in SVG text entities here.

是否可以在与HTML一起使用的JavaScript中实现这样的功能?

Is it possible to implement such a function in JavaScript that works with HTML?

(如果解决方案可以跨大多数现代浏览器移植，使用大多数书面语言并且基于相对稳定的标准，那么解决方案将非常有用.)

(Solutions would be most useful if they are portable across most modern browsers, work with most written languages, and are based on relatively stable standards so that they will not become buggy later.)

推荐答案

$('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").

This works with "click", as well as with a "range" for most browsers. (selection.type = "caret" / selection.type = "range").

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

selection.focusOffset() gives you the position in the inner node. If elements are nested, within <b> or <span> tags for example, it will give you the position inside the inner element, not the full text, more or less. I'm unable to "select" the first letter of a sub tag with focusOffset and "caret" type (click, not range select). When you click on the first letter, it gives the position of the last element before the start of tag plus 1. When you click on the second letter, it correctly gives you "1". But I didn't find a way to access the first element (offset 0) of the sub element. This "selection/range" stuff seems buggy (or very non-intuitive to me). ^^

但是没有嵌套元素的使用非常简单！ (与您的<div>正常工作)

But it's quite simple to use without nested elements! (Works fine with your <div>)

这是一个小提琴

由于以下原因，此答案在被接受后可以重新使用，但现在不再可用.现在其他答案最有用.

• 马修的一般答案
• 道格拉斯·达西斯科(Douglas Daseeco)提供的工作示例.

Firefox和Chrome都调试了window.getSelection()行为.可悲的是，现在对于该用例来说，它是没有用的. (阅读文档时，IE 9及更高版本的行为应相同).

Both Firefox and Chrome debugged window.getSelection() behavior. Sadly, it is now useless for this use case. (Reading documentation, IE 9 and beyond shall behave the same).

现在，使用字符的中间位置确定偏移量.这意味着单击一个字符可以返回2个结果.第一个字符为0或1，第二个字符为1或2，等等.

Now, the middle of a character is used to decide the offset. That means that clicking on a character can give back 2 results. 0 or 1 for the first character, 1 or 2 for second, etc.

我更新了 JSFiddle示例.

请注意，如果您调整窗口的大小( Ctrl +鼠标)，则在Chrome上某些点击的行为是错误的.

Please note that if you resize the window (Ctrl + mouse), the behavior is quite buggy on Chrome for some clicks.

这篇关于单击时确定HTML元素中字符的位置索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！