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

Question

我有一个 contenteditable 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属性(property)。 innerHTML 来自 Element界面，同时 textContent是 Node 的一部分界面。 DocumentFragment 继承自 Node，但不是 Element。

这意味着您可以附加整个片段，因为它是一个节点:

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>