documentFragment converting to JSON format

Question

Can you please help me to convert documentFragment object to JSON format? I need it to send documentFragment in message to iframe. This is my code:

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

But it is not working (outputs empty object {} ).

You can only JSON.stringify objects, a `DocumentFragment` is not an object. Have a look at https://gist.github.com/sstur/7379870 — msanford, Dec 19 '18 at 14:32

score 1 · Accepted Answer · answered Dec 19 '18 at 14:24

1

JSON is for data objects, not document fragments.

You probably want the HTML string instead:

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

answered Dec 19 '18 at 14:24

Daniel Beck

20,653
5
38
53

Thank you, but i need to append documentFragment into text editor placed in iframe. So i need to send documentFragment like this: iframe.contentWindow.postMessage({"selectedText": JSON.stringify(fragment)}, '*'); – Мария Ольховая Dec 19 '18 at 14:40
You can't. JSON can't represent document fragments. You can convert the HTML back into a document fragment inside the iframe, if necessary. – Daniel Beck Dec 19 '18 at 14:45

score 0 · Answer 2 · answered Dec 19 '18 at 14:30

0

If you want it in JSON format, simply get the innerHTML first and then convert it to a json string using 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 })
)

answered Dec 19 '18 at 14:30

chrisg86

11,548
2
16
30

Why would you wrap an HTML string in JSON? What purpose would that serve? – Daniel Beck Dec 19 '18 at 14:45
Not sure, ask OP. – chrisg86 Dec 19 '18 at 14:46
1

The question is basically an XY problem -- OP wants a transport format, and is just trying to use the wrong one for the job (JSON instead of HTML). This answer just wraps the right format inside the wrong one. – Daniel Beck Dec 19 '18 at 14:49
From the information given, I cannot tell if JSON is the right format for this job. OP asked specifically for it. You can still send it to the iframe using `iframe.contentWindow.postMessage(JSON.stringify({"text": selectedText}), '[DOMAIN]')` – chrisg86 Dec 19 '18 at 14:57
He wants to move a document fragment from a window to an iframe. JSON can't represent document fragments so is obviously the wrong format for the job. You could postMessage the HTML string just as easily without the pointless JSON wrapper you've added. – Daniel Beck Dec 19 '18 at 15:00

score 0 · Answer 3 · answered Dec 19 '18 at 14:52

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 converting to JSON format

3 Answers3