如何编辑鼠标选择的字符串并放回整个字符串

Question

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

<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>

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

例如： 就像我选择了

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

我希望我的最后一个字符串是

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

任何想法？