拆分光标所在的可内容段落 - Javascript答案

【问题标题】：Split contentable paragraph where is cursor - Javascript拆分光标所在的可内容段落 - Javascript
【发布时间】：2015-04-04 18:06:17
【问题描述】：

我有内容可编辑的 div：

<div id="formatted" contenteditable="true">
    <p>
       Here is some <b>content</b> warpped in paragraph.
    </p>
</div>

<input id="spliter" type="submit" value="spliter">

我想在段落中的某处设置光标，例如在单词“wrapped”之后，然后点击输入“spliter”，在该段落之后需要像这样拆分两个段落：

 <div id="formated" contenteditable="true">
    <p>
       Here is some <b>content</b> 
    </p>
    <p>
       wrapped in paragraph.
    </p>
 </div>

我有这个代码：

jQuery(document).ready(function(){
    jQuery("spliter").click(function(){
        var s = window.getSelection();
        s.modify('extend','backward','paragraph');        
        var before = s.toString(); //here is text before cursor

        s.modify('extend','forward','paragraph');
        var after = s.toString(); //here is text after cursor
    });
});

在光标之前有文本之前的变量“这里是一些内容” 并且在光标“包裹在段落中”之后的文本之后在变量中，所以我可以创建两个新段落并替换为旧段落。

但问题是我还需要这些 b 标签，因为使用这个“toString()”方法我只得到文本但我还需要 html。本段允许的 HTML 为：'b'、'em'、'i'、'strong'、'u'、'p'、'ul'、'li'、'ol'。

知道如何获取 html 或其他方法吗？？？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你可能需要这样的东西。我不确定它是否适用于所有浏览器。

var elem = document.createElement("div");
if (s.rangeCount) elem.appendChild(s.getRangeAt(0).cloneContents());
before = elem.innerHTML;

【讨论】：