появилась такая проблема, реализовываю сейчас функционал упоминаний пользователей и вот когда пользователь вводит ключевой символ например # и появляется список пользователей. После выбора одного из пользователей вставляется ссылка на него в поле div со свойством contentEditable. но и при этом остаётся старый текст, например я начал набирать в поле #mok выбрал пользователя с именем Дмитрий и получилось #mokДмитрий. Знатоки, внимание, вопрос. Как удалить последние n символов до решётки в поле, пишу на react, фрагменты кода прилагаю ниже.
Это сам контейнер
<div
id="conten"
className={styles.input}
onInput={InputHandler}
data-placeholder="Введите текст..."
contentEditable
>
</div>
Ниже функции обработчики
const handleInsertGame = (name: string, link: string) => {
var el = document.getElementById("conten")
console.log(el?.innerText.replace(/\s+/g, ' ').split(' ').pop())
const selection = window.getSelection();
const range = selection?.getRangeAt(0);
range?.deleteContents()
const newElement = document.createElement('span');
newElement.innerHTML = `<a href="games/${link}">${name}</a>`;
range?.insertNode(newElement);
};
const InputHandler = (e: any) => {
const text = e.target.innerHTML
const textw = e.target.innerText
console.log('Текст из поля', textw)
// console.log(text)
setCommentText(text)
if (textw && textw.includes('#')) {
const lastWord = textw.replace(/\s+/g, ' ').split(' ').pop()
if (lastWord[0] === '#') {
setSearchQuery(lastWord.trim().substring(1))
setFilter(lastWord.trim().substring(1));
if (games_store.searchedGames.length > 0) {
setIsShow(true)
}
// console.log(filter)
return;
}
}
}
Средний
