保留json和Javascript中的文本格式

Question

我有一个我正在使用的api。它返回商店营业时间的列表。

我在php中提取此数据并将其返回JSON以在Javascript中进行解析。

通过查看我调用的php文件中chrome检查元素中实际返回的内容，它会显示如下的JSON：

[{"lat":"33.1682803","lng":"-117.2198359","hours":"Retail Store\r\nSun: 12pm to 5:30pm\r\nMon: Closed\r\nTues: Closed\r\nWed: 11am to 7pm\r\nThurs: 11am to 8pm\r\nFri: 11am to 8pm\r\nSat: 12pm to 5:30pm\r\n\r\nTasting Room\r\nSun: 12pm to 5pm\r\nMon: Closed\r\nTues: Closed\r\nWed: Closed\r\nThurs: 4pm to 8pm\r\nFri: 4pm to 8pm\r\nSat: 12pm to 5pm","phone":"7605994225","name":"Tap House and Homebrew Shop"}]

您可以在上面的JSON中看到它在几小时内保留新行等的格式。

然后我用Javascript解析我的JSON，在HTML 5中显示如下：

var html = "";
            var lat = data[0].lat;
            var lng = data[0].lng;
            var hours = data[0].hours;
            var name = data[0].name;
            if(hours == ""){
                hours = "N/A";
            }
            var phone = data[0].phone;

            //create hours card
            html = "<div class=\"row\"><div class=\"col s12 m6\"><div class=\"card\"> <div class=\"card-content\"><span class=\"card-title black-text\">Hours</span> <p>" + hours +"</p></div><div class=\"card-action\"><a href=\"geo:" + lat + "," + lng + "\">Navigate</a><a href=\"tel:"+ phone + "\" style=\"float:right; \">Call</a </div></div></div></div>";

            $("#replace").replaceWith(html);

当显示操作时间时，它们会混在一起，而不是分别在新行上：