当我将 JSON 数据渲染到 html 元素时，return str.replace(/\n\r?/g, " ") 不工作

Question

我有下面这样的 JSON 文件，在 data.json.

里面

{
   "usfood":[
      {
         "fruits":"This is apple.\nWe harvest every Spring."
      }
   ],
   "ukfood":[
      {
         "fruits":"This is melon.\nWe harvest every Winter."
      }
   ]
}

我有下面这样的 HTML，在 index.php.

里面

我有下面这样的 jQuery 代码，在 index.php 的 <script> 标签内。

$(document).on('ready',function(){
 $.getJSON("data.json",function(data) {
   $('#food_description').html(replaceBreak(data['usfood'][0].usfood));
 })
});

function replaceBreak(str){
return str.replace(/\n\r?/g, "<br />");
}

结果：浏览器中的 html 元素显示原始字符串

This is apple.\nWe harvest every Spring.

我猜，问题出在 replaceBreak 函数上。如何改进我的代码以成功将 \n 替换为   ？同时，可能是代码的顺序。

我也试过了return str.replace("\n", " ");return str.replace(/\n/g, " ");

Answer 1

您需要使用展位字符串

return str.replace("\n", "<br />");

当我将 JSON 数据渲染到 html 元素时，return str.replace(/\n\r?/g, "<br />") 不工作

return str.replace(/\n\r?/g, "<br />") is not working, when I render JSON data to html element

json

line-breaks