Получить вводимую позицию символа в contenteditable

Question

У меня есть contenteditale div в моем проекте Angular 6

<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

Если я правильно понимаю, что вы хотите, то это работает ...

1 - Вставьте временный интервал (с идентификатором) в позицию курсора, которая содержит символ, который вы никогда не наберете (я использую шестнадцатеричный код)7F).

2 - Получить textContent (innerText) вашего div в переменную.

3 - Удалить временный интервал.

4 - Использовать Variable.search (/ \ x7F /) (в моем примере), чтобы получить позицию текущего символа.

Answer 2

Как насчет использования событий keydown и keyup для получения разницы между 2 строками, тогда вы точно найдете индекс последнего символа.