Question

可以帮我将documentFragment对象转换为JSON格式吗？我需要它来将documentFragment在消息中发送到iframe。这是我的代码：

  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)
);

documentFragment转换为JSON格式

3 个答案: