Replace \n with <br> in JSON string

Question

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;

Answer 1

Try this.

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

or this

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

Answer 2

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