获取#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

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

该片段有子节点，并且这些节点具有属性，因此您只需从所有子节点中outerHTML获取outerHTML

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

需要该map.call部分是因为虽然片段具有属性childNodes，但childNodes没有map方法。

Answer 2

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>