How to display breaks in pre tag via formatted json?

Question

I have some json that I want to display in a web page. However, the pre tag is stripping out and honoring the breaks in the output?

How can I display some json as such and keep all the text as is?

NOTE: i don't have control over the syntax. that is what is coming into my service so I'm just taking it and injecting it in the html into a pre.

<div>
    <pre>
        {
        "text:" "testing line breaks<br/>new line"
        }
    </pre>
</div>

Output:

{
 "text:" "testing line breaks
new line"
}

Expected Output:

{
 "text:" "testing line breaks<br/>new line"
}

please checkout this : [Is it possible to use CDATA inside
tag][1] [1]: http://stackoverflow.com/questions/2746803/is-it-possible-to-use-cdata-inside-pre-tag — Gildas.Tambo, Mar 14 '14 at 02:08
@kougiland: i don't have control over the syntax. that is what is coming into my service. — genxgeek, Mar 14 '14 at 02:13

Alain Jacomet Forte · Accepted Answer · 2014-03-14T02:28:04.297

What you basically need to do is escape the HTML. You can use any language that you're using to output the string, but here is an example using native JavaScript and also jQuery:

var data = { data: 'This is not a <br /> new line' }
// Doesn't escape HTML
$('#1').html(JSON.stringify(data) );
// Escapes
$('#2').text(JSON.stringify(data) );
// Escapes
document.getElementById("3").innerText = JSON.stringify(data);
// Doesn't escape
document.getElementById("4").innerHTML = JSON.stringify(data);
// Escapes
document.getElementById("5").innerHTML = JSON.stringify(data).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');

Note: If you don't have access to the way this HTML is generated, you can still fix it with a little Javascript snippet:

// If you can't decode the HTML but you can add a little snippet
var el = document.getElementById("6"); el.innerText = el.innerHTML;

// Using jQuery
var $el = $('#7'); $el.text( $el.html() );

jsFiddle

score 6 · Answer 2 · answered Mar 14 '14 at 02:08

Check out this FIDDLE

var data = {
  "text": "testing line breaks<br/>new line"
};

document.getElementsByTagName("pre")[0].innerText = JSON.stringify(data, null, 2);

Two important things here.

element.innerText will not honor the HTML br tag
JSON.stringify's 3rd argument takes number of spaces to use when pretty printing it

score 1 · Answer 3 · answered Mar 14 '14 at 02:12

1

Start using jsonlint

Issue is syntax the json should look like this

    { "text": "testing line breaks<br\/>new line" }

answered Mar 14 '14 at 02:12

Kyle Marimon

606
6
11

i don't have control over the syntax. that is what is coming into my service. – genxgeek Mar 14 '14 at 02:12

score 1 · Answer 4 · edited Mar 17 '14 at 01:45

1

Just escape “<” as <

<div>
    <pre>
        {
        "text": "testing line breaks &lt;br/> new line"
        }
    </pre>
</div>

JSFIDDLE DEMO

edited Mar 17 '14 at 01:45

gcochard

11,408
1
26
41

answered Mar 14 '14 at 02:12

Gildas.Tambo

22,173
7
50
78

End quote needs to be before the colon – Kyle Marimon Mar 14 '14 at 02:13

How to display breaks in pre tag via formatted json?

4 Answers4

JSFIDDLE DEMO