如何捕获在 contenteditable div 内被点击的特定字符答案

【问题标题】：How to capture specific the character that was clicked on inside of a contenteditable div如何捕获在 contenteditable div 内被点击的特定字符
【发布时间】：2016-09-01 14:20:57
【问题描述】：

我正在寻找一种方法来在用户在contenteditable div 内单击特定字符（或文本中的字符索引）后捕获它。仅提供一个示例，请考虑以下 HTML：

<div contenteditable="true">
    Hello world
</div>

假设用户在“o”和“r”之间右击，有没有办法知道，使用 JavaScript？

我想Selection API 会涵盖这一点，但到目前为止我的所有询问都没有产生任何结果。

感谢您能给我的任何帮助。

【问题讨论】：

标签： javascript html dom selection

【解决方案1】：

你可以看到插入符号的位置，我在这里为你做了一个小sn-p。看看它。 enter code herehttp://codepen.io/19sthil80/pen/pEooVR

【讨论】：

正是我想要的！谢谢。

【解决方案2】：

你总是可以做这样的事情。 Codepen Link

我已经设置了一个警报，以便您可以看到它确实知道您点击了什么，如果您点击 Hello 和 World 之间的空格，它也知道。

var div = document.getElementById("div");

函数点击化（e）{ var arr = (typeof e.innerText !== 'undefined') ？ e.innerText.split("") : e.textContent.split(""), 最大值 = arr.length，我 = 0, 模板 = "$c", 结果 = "";

for (; i < max; i += 1) {
    result += template.replace("$c", arr[i]);
}

e.innerHTML = result;

}

clickify(div);

【讨论】：