获取可编辑内容中的输入字符位置

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事件获取2个字符串之间的差，然后您将确切找到最后一个字符的索引。

Answer 2

如果我正确理解了您的需求，那么这个方法就可以了...

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

2-将div的textContent（innerText）放入变量。

3-删除临时跨度。

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