Javascript 如何编辑鼠标选中的字符串并将其放回整个字符串中

到目前为止，我有以下代码

<div id="allText">
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
  <li>text4</li>
  <li>text5</li>
</div>

<button type="button" id="editButton">Edit</button>

<script>
    $(function(){

      $("#editButton").click(function () {

        var txt = '';
        if (window.getSelection) {
            txt = window.getSelection();
        } else if (window.document.getSelection) {
            txt =window.document.getSelection();
        } else if (window.document.selection) {
            txt = window.document.selection.createRange().text;
        }
        var n = txt.toString();
        n = n.replace("</li><li>","<br>"); 
    //document.getElementById("allText").innerHTML=n; 
        console.log(n);
      });

    });

</script>

文本1
文本2
文本3
文本4
文本5
编辑
$（函数（）{
$（“#编辑按钮”）。单击（函数（）{
var-txt=''；
if（window.getSelection）{
txt=window.getSelection（）；
}else if（window.document.getSelection）{
txt=window.document.getSelection（）；
}else if（窗口、文档、选择）{
txt=window.document.selection.createRange（）.text；
}
var n=txt.toString（）；
n=n.替换（“
”，“
”）；
//document.getElementById（“allText”）.innerHTML=n；
控制台日志（n）；
});
});

我想用鼠标在中间选择一些文本，当我点击编辑按钮时，所选文本将被更新，而其他未选中的文本将保持不变。 我可以得到所选文本并替换为工作，但不知道如何将替换字符串返回到整个字符串的中间。

例如： 就像我选择了

    </li>
<li>text3</li>
<li>

文本3

我希望我的最后一根弦是

<li>text1</li>
<li>text2<br>text3<br>
text4</li>
<li>text5</li>

文本1
text2
text3

文本4
文本5

有什么想法吗？

Selection.toString（）不返回所选内容的html，它只返回文本。因此，在您的示例选择中，n的值类似于“\ntext3\n”。看起来您可能希望利用选择对象的节点属性来操作DOM。也许我能帮上忙