javascript - json 文件中的换行问题

Question

我从系统中导出数据并获取该内容 block ，如何删除换行符，使其成为一行。

我尝试了各种方法，例如“jsonData.replace(/[\r\n]+/g, '\n\n');”，但似乎没有任何效果。

{"pageUrl":"/about","name":"About Us","content":"\n    \n        \n        
\n    
About
\n        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n    \n"}

这是完整的代码，上面只是json文件中的一项

function list_pages(){
    var access_token = BCAPI.Helper.Site.getAccessToken();
    var request = $.ajax({
        url: "/webresources/api/v3/sites/current/pages?fields=pageUrl,name,content",
        type: "GET",
        connection: "keep-alive",
        contentType: "application/json",
        headers: {
            "Authorization": $.cookie('access_token')
        }
    });
    request.done(function (msg) {
        var myJSONString = JSON.stringify(msg.items);
        **var myEscapedJSONString = myJSONString.replace(/[\r\n]/g, '');**
        $( "#results" ).append( myEscapedJSONString );
    })
    request.fail(function (jqXHR) {
        console.log("Request failed.");
        console.log("Error code: " + jqXHR.status);
        console.log("Error text: " + jqXHR.statusText);
        console.log("Response text: " + jqXHR.responseText);
    })
   }

Answer 1

更新答案:

您对问题的编辑完全改变了它。你正在做replace关于 JSON.stringify 的结果，这将永远生成问题中的 JSON(字符串中包含实际的回车符和/或换行符)。

在评论中，您说过您的目标是查看格式化的 JSON 数据。为此:

• 告诉 JSON.stringify通过添加 null, n 来格式化它调用电话，其中 n是你想要缩进的程度。例如:JSON.stringify(msg.items, null, 4) .
• 替换&与 &和<与 < (按顺序)。
• 输出到具有 pre 之一的元素其 white-space 的设置CSS 设置(例如 pre 元素，但您也可以使用 CSS 来完成)

所以:

var htmlToDisplay = jsonData
    .replace(/&/g, "&")
    .replace(/</g, "&lt;");

...然后将其放入 white-space: pre 的元素中.

示例:

var msg = {
  items: [
    {
      pageUrl: "/about",
      name: "About Us",
      content: "\n    \n        \n        \n    About\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit..."
    }
  ]
};
var jsonData = JSON.stringify(msg.items, null, 4);
var htmlToDisplay = jsonData
    .replace(/&/g, "&")
    .replace(/</g, "&lt;");
$("#results").append(htmlToDisplay);

#results {
  white-space: pre;
  font-family: monospace;
}

<div id="results"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

white-space还有其他设置你可以尝试，比如pre-wrap :

var msg = {
  items: [
    {
      pageUrl: "/about",
      name: "About Us",
      content: "\n    \n        \n        \n    About\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit..."
    }
  ]
};
var jsonData = JSON.stringify(msg.items, null, 4);
var htmlToDisplay = jsonData
    .replace(/&/g, "&")
    .replace(/</g, "&lt;");
$("#results").append(htmlToDisplay);

#results {
  white-space: pre-wrap;
  font-family: monospace;
}

<div id="results"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<小时/>

原始答案:

您不想用换行符替换那些无效的换行符；你想用任何东西替换它们:

jsonData = jsonData.replace(/[\r\n]/g, '');

let jsonData = document.getElementById("the-json").textContent;
jsonData = jsonData.replace(/[\r\n]/g, '');
console.log(JSON.parse(jsonData));

<script id="the-json" type="text/json">{"pageUrl":"/about","name":"About Us","content":"\n    \n        \n        
\n    
About
\n        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n    \n"}</script>