Javascript 显示内容内的div基于文本可编辑

我需要根据contenteditable div文本在contenteditable div中添加div。示例案例：

const ceDiv = document.getElementById('foo')

//and when text in ceDiv ends with {{ i need to show another div in current caret position

就像Facebook提到朋友一样

我现在做的是用div替换{{var}}：

export function findAndReplaceBrackets(string: string): string {
    const bracketReg = /\{{2}(.*?)\}{2}/ig
    const brackets = string.match(bracketReg)
    if (!brackets) return string
    string = string.replace(/<\/?[^>]+(>|$)/g, '') // reset variables in string
    brackets.forEach(variable => {
        string = string.replace(variable, `<span style="
            cursor: pointer;
            background-color: blue;
            color: #ffffff;
            text-transform: uppercase;
            font-size: 13px;
            padding: 1px;
            margin: 0 2px;
            border-radius: 4px
        ">${variable}</span>`)
    })

    return string
}

export函数findandReplaceStorges（string:string）：string{
常量bracketReg=/\{{2}（.*？\}{2}/ig
常量方括号=string.match（方括号reg）
if（！方括号）返回字符串
string=string.replace（//+（>|$）/g'，）//重置字符串中的变量
方括号.forEach（变量=>{
string=string.replace（变量，`${variable}`）
})
返回字符串
}

---

但是这根本不能解决我的问题

你能告诉我输入和预期输出是什么吗？你想告诉我我现在的行为吗？