Javascript 如何在包含许多html标记的contenteditable div中替换插入符号前的自定义文本？

var input=document.getElementById（“div_id”）；
var username=“TEST”；
input.focus（）；
var selection=window.getSelection（）；
var range=selection.getRangeAt（0）；
var span=document.createElement（'span'）；
setAttribute（'class'，'taged user'）；
span.setAttribute（'id'，55）；
span.innerHTML=用户名；
//var initialText=input.textContent；
//var before_caret=initialText.slice（0，getCaretPosition（输入））；
//插入符号后的变量=initialText.slice（getCaretPosition（输入），initialText.length）；
////var before\u caret=input.textContent；
//console.log（“插入符号前”+插入符号前）；
// *******************************
//这是在插入符号之前最后匹配@某物的正则表达式，它工作得很好。
//变量在插入符号之前下降。替换（/@\w+（？！.@\w+）/g'）；
// *******************************
//input.textContent=插入符号后的+处删除；
//console.log（“插入符号前”+插入符号前）；
range.deleteContents（）；
range.insertNode（span）；
范围。塌陷（假）；
range.insertNode（document.createTextNode（“\u00a0”）；
//光标在最后
范围。塌陷（假）；
selection.removeAllRanges（）；
选择。添加范围（范围）
。标记用户{
颜色：#1e81d6；
字体大小：粗体；
}

第一个人乔、特和埃米莉想去海滩。
在内容可编辑的
div
元素中获取/设置插入符号位置似乎太复杂了

无论如何，我创建了一个工作片段，其中包含了我在这些主题中找到的函数…





…并添加了一个函数
oninput
，以进行所需的替换：

（有关更多详细信息，请参见我的代码中的注释）


var input=document.getElementById（“div_id”）；
var replaced=“@te”//TAKIT：添加了这个变量
var replacer=“@TEST”//TAKIT：重命名此变量
var replacer_标记=[''，]；//TAKIT：在评论后添加
input.focus（）；
//TAKIT：从这些解决方案中添加的功能：
// https://stackoverflow.com/questions/3972014/get-caret-position-in-contenteditable-div
函数GetCaretPosition（元素）{
var caretofset=0；
var doc=element.ownerDocument | | element.document；
var win=doc.defaultView | | doc.parentWindow；
var-sel；
if（typeof win.getSelection！=“未定义”）{
sel=win.getSelection（）；
如果（选择范围计数>0）{
var range=win.getSelection（）.getRangeAt（0）；
var precretange=range.cloneRange（）；
预重排列。选择节点内容（元素）；
precretange.setEnd（range.endContainer，range.endOffset）；
CareTofset=precretange.toString（）.length；
}
}如果（（选择=文件选择）&&sel.type！=“控制”）{
var textRange=sel.createRange（）；
var precarteTextRange=doc.body.createTextRange（）；
PrecretTextRange.moveToElementText（元素）；
setEndPoint（“EndToEnd”，textRange）；
CareTofset=PrecretTextRange.text.length；
}
返回caretofset；
}
// https://stackoverflow.com/questions/36869503/set-caret-position-in-contenteditable-div-that-has-children
功能设置CaretPosition（el、pos）{
//循环遍历所有子节点
for（el.childNodes的变量节点）{
如果（node.nodeType==3）{//我们有一个文本节点
如果（node.length>=pos）{
//最后添加我们的范围
var range=document.createRange（），
sel=window.getSelection（）；
range.setStart（节点、位置）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
return-1；//我们完成了
}否则{
pos-=节点长度；
}
}否则{
pos=设置CareTPosition（节点，pos）；
如果（位置==-1）{
return-1；//无需完成for循环
}
}
}
return pos；//由于递归内容而需要
}
//TAKIT：添加了整个功能
input.oninput=函数（）{
var caretPos=GetCaretPosition（输入）；//获取插入符号位置
if（this.innerHTML.includes（replaced））{//过滤函数的调用
this.innerHTML=this.innerHTML.replace（已替换，replacer_tags.join（replace）+''；//替换
caretPos+=replacer.length-replaced.length+1；//由于字符串长度差异而产生的偏移量
SetCaretPosition（输入，caretPos）；//恢复插入符号位置
}
//console.clear（）；console.log（this.innerHTML）；//用于测试
}
。标记用户{
颜色：#1e81d6；
字体大小：粗体；
}

第一人称@Joe and（加上“te”测试）@和@Emilie想去海滩。
请始终创建一个代码段。这让事情变得容易多了。它帮助我们帮助你！我同意基督人的观点。一旦您添加了HTML（可能还有CSS）来创建一个工作代码段，我很乐意为您提供帮助@基督人。我把这个问题修改成了一个代码段，我想在插入符号在te之后时用TEST替换te。再次感谢。为了确保我们在测试场景上保持一致：将div完全清空，输入
@te
，然后输入空格，然后输入
一些字符
=>您是否得到蓝色的
@test
，然后在div外的常规字符中输入
一些字符
？因为我在潜水舱里找到了蓝色的洞。再次感谢您的支持help@oalkaako我已更新：我更改了不间断空格的空格字符，因为常规空格在行尾时被删除。