documentFragment 转换为 JSON 格式

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 格式

documentFragment converting to JSON format

javascript

json

documentfragment