2

I have a function to grab text data as JSON, which then is stringified. I'm trying to display this data in a modal in my web application, however the string appears in the HTML like this:

{"body":"---\nbl_playout_user: BLplayout\n\n# Playout config values\nbl_playout_image_drive_mount: '\\Paparazzi\Images'\nbl_playout_image_path: 'I:'\nbl_playout_machine_role: Primary\nbl_playout_network_name: ABC1\nbl_playout_stand_alone_mode: 0\nbl_playout_run_mode: HD\nbl_playout_format: AJA\nbl_playout_resolution: 720P\nbl_playout_logo_override: ABC\nbl_playout_default_header: BottomLine\nbl_playout_sponsor_on: 15000\nbl_playout_sponsor_off: 60000\nbl_playout_media_ball_on: 15000\nbl_playout_media_ball_off: 15000\nbl_playout_page_engine_working_directory: '{{ bl_templates_root_dir }}\SC14_Templates'\nbl_playout_schema_file_path: '{{ bl_templates_root_dir }}\SC14_Templates\BLMaster.xsd'\nbl_playout_default_swatch_path: '{{ bl_templates_root_dir }}\SC14_Templates\003_BtmLn_deliverable_ele\still_ele\RDBL_GENERIC_SWATCH.png'\nbl_playout_default_logo_path: '{{ bl_templates_root_dir }}\SC14_Templates\003_BtmLn_deliverable_ele\still_ele\default_team_logo.png'\n"}

I would like the instances of \n to be replaced with a <br> so it shows up properly in the HTML, however my function doesn't seem to be doing the trick. Any ideas as to why? I'm very stumped. 

var stringData = JSON.stringify(data);
stringData = stringData.replace(new RegExp('\r?\n','g'), '<br />');
return stringData;
Improve this question
12
  • Can't you use a pre element? BTW, posting an image instead of data is less than ideal. Commented Oct 3, 2016 at 18:18
  • 2
    Can you elaborate a bit? Do you want to show the encoded \n inside the string values as line breaks? That would be weird since strings in JSON cannot contain literal line breaks. Or do you want to convert literal line breaks between, e.g. object properties. What is your desired output? Commented Oct 3, 2016 at 18:22
  • I would like the var stringData to show up in the HTML as a key/val pair, where each part of the string with a semicolon corresponds to a key/val pair. At the end of the key/val pair, I want a line break so each key/val is on a singular line. Commented Oct 3, 2016 at 18:24
  • You probably mean a colon : instead of a semicolon. Commented Oct 3, 2016 at 18:25
  • As @squint said, you should put the value inside a <pre> tag instead. Commented Oct 3, 2016 at 18:25

2 Answers 2

Reset to default
8

Try this.

stringData = stringData.replace(new RegExp("\\\\n", "g"), "<br />");

or this 

stringData = stringData.replace(/\\n/g, "<br />");
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This is all you need: stringData = stringData.replace(/\\n/g, '<br />');
The OP clarified their question. What you are proposing is not what they want. It would replace every occurrence of the character sequence \n, not line breaks.
@FelixKling: I'm actually unsure about that now. There's only a single key/value pair in the JSON, and the value of that pair is a string with escape sequences in it.
@squint: yeah, the OP's new comment helps.
0

based on comments and building on other answer..

var json = JSON.parse(stringData);
json.body = body = json.body.replace(/\n/g, "<br />");

// and then if you needed it in a string you can do this again
stringData = JSON.stringify(json);
Improve this answer

1 Comment

var doo = JSON.parse(JSON.stringify(pageText)); var extra = doo.replace(/(?:\r\n|\r|\n)/gm, "<br>"); this doesn't break any cross-origin rules for the browser and I guess now I will set it to the innerHtml of an element for jsPdf...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.