获取contenteditable中的输入字符位置

Question

我在Angular 6项目中有一个contenteditale div

<div contenteditable="true" (input)="checkContent($event)"></div>

当用户输入一个字符时，我希望得到该字符的位置。

我实际上要做的是检查输入字符之前是否有'@‘，如果有，则计算'@’和输入字符之间的字符数

示例(考虑大写字符是最后输入的字符)：

hellO // postion = 4
hello World // postion = 6
Hello world // postion = 0

现在，我可以使用event.data从组件中获取输入的字符

checkContent(event: any){
    console.log(event.data);
}

如何获取最后输入的字符的位置？

Answer 1

如何使用keydown和keyup事件来获取两个字符串之间的差异，然后您将准确地找到最后一个字符的索引。

Answer 2

如果我没弄错你想要什么，那么这就行了.

1-在光标位置插入一个临时跨度(带有id)，其中包含您永远不会键入的字符(我使用十六进制7F)。

2-将div的textContent (innerText)放入一个变量中。

3-删除临时跨度。

4-使用Variable.search(/\x7F/) (在我的示例中)来获取当前字符的位置。