documentFragment转换为JSON格式

Question

你能帮我把documentFragment对象转换成JSON格式吗？我需要它向iframe发送documentFragment的信息。这是我的密码：

  var range = window.getSelection().getRangeAt(0);
  var fragment = range.cloneContents(); 
 console.log(JSON.stringify(fragment));

但是它不工作(输出空对象{} )。

Answer 1

JSON用于数据对象，而不是文档片段。

您可能需要HTML字符串，而不是：

var range = window.getSelection().getRangeAt(0);
var fragment = range.cloneContents();

// convert to html by appending the fragment to a DOM element and then read the element's innerHTML:
var div = document.createElement('div');
div.appendChild(fragment);
console.log(div.innerHTML);

Answer 2

如果您想要JSON格式，只需先获得innerHTML，然后使用JSON.stringify将其转换为json字符串：

var range = window.getSelection().getRangeAt(0);
var fragment = range.cloneContents(); 

var div = document.createElement('div');
div.appendChild(fragment);
var selectedText = div.innerHTML;

console.log(
   JSON.stringify({ text: selectedText })
)

Answer 3

var range = window.getSelection().getRangeAt(0);
var fragment = range.cloneContents(); 

var text = "";

// Get all the elements as text
for (i in fragment.children) {
    text += fragment.children[i].outerHTML || "";
}

// JSON format
var json = JSON.stringify({text: text});

// JSON text
console.log(json);

// JSON text to HTML
console.log(
    $(JSON.parse(json).text)
);