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, используя JSON.stringify:

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