获取#document-fragment的innerHTML而不是textContent

Question

我有一个令人满意的p标签。 当提取来自p标签的内容并将其插入另一个标签时，原始的所有标记都将丢失。 有没有办法保存标记？

请注意，如果插入符号是段落中的第i个位置， 则从该位置开始提取字符直到结束 。

 function select() { var el = document.getElementById('p'); el.focus(); var sel = window.getSelection(); var selRange = sel.getRangeAt(0); var range = selRange.cloneRange(); range.selectNodeContents(el); range.setStart(selRange.endContainer, selRange.endOffset); document.getElementById('other').innerHTML = (range.extractContents().textContent); // return range.extractContents().textContent; } 

 p { background-color: #eee; } .red { color: red; } 

 <p id="p" contenteditable="true">This is <i>a</i> <span class="red">paragraph</span> <b>with</b> lots of markup.</p> <p id="other"></p> <button onclick="select()">SELECT</button> 

Answer 1

range.extractContents()返回DocumentFragment 。

DocumentFragment没有innerHTML属性。 innerHTML来自Element接口，而textContent是Node接口的一部分。 DocumentFragment继承自Node ，但不继承Element 。

这意味着你可以只追加整个片段，因为它是一个Node ：

 function select() { var el = document.getElementById('p'); el.focus(); var sel = window.getSelection(); var selRange = sel.getRangeAt(0); var range = selRange.cloneRange(); range.selectNodeContents(el); range.setStart(selRange.endContainer, selRange.endOffset); //document.getElementById('other').innerHTML = (range.extractContents().textContent); var frag = range.extractContents(); var i; var node; var other = document.getElementById('other'); other.innerHTML = ''; other.appendChild(frag); } 

 p { background-color: #eee; } .red { color: red; } 

 <p id="p" contenteditable="true">This is <i>a</i> <span class="red">paragraph</span> <b>with</b> lots of markup.</p> <p id="other"></p> <button onclick="select()">SELECT</button> 

Answer 2

如需进一步参考，如果有人确实需要提取片段的innerHTML。

该片段具有子节点，并且具有outerHTML属性，因此您必须从所有childNodes获取outerHTML

const fragment = range.extractContents();
const htmlContent = [].map.call(fragment.childNodes, x => x.outerHTML).join('')

需要map.call部分，因为尽管片段具有childNodes属性，但childNodes没有map方法。

Answer 3

你的意思不是这样吗？

document.getElementById('other').innerHTML = el.innerHTML;

你的javascript就像下面这样简单：

function select() {
    var el = document.getElementById('p');
    el.focus();

    document.getElementById('other').innerHTML = el.innerHTML;
}

---

编辑：

嘿，你投了我的答案，但你能解释你想要实现的目标吗？ 我在上面写的代码你可以看到在这个jsfiddle工作： https ：//jsfiddle.net/936zuzky/1/

你想保存原始标记 - 它已保存，所以你想要实现什么？