如何使js使用innerHTML在呈现的内容中呈现换行符

Question

Fiddle here - http://jsfiddle.net/kQ3eJ/3/

var string = "This is a & string that has \n new lines in it\u0027s body";

//does not do the newline or unicode
document.getElementById("insertJavascript").innerHTML = string;

//does do the newline and unicode
document.getElementById("insertJavascriptWithPre").innerHTML = '<pre>' + string + '</pre>'; 

//but if i get the string from the HTML to begin with it doesn't work
var htmlString = document.getElementById("htmlWithNewline").textContent;
document.getElementById("insertJsHtmlWithNewline").textContent = htmlString; 

basically the webpage has a element whose innerHTML has newlines in it (data from a JSON) I want to format this data so it's more legible on the front end

As you can see in the fiddle - typing the newlines (\\n) into javascript work, but if the newline is a part of a string that comes from the innerHTML, it does not get formatted correctly.

Is there a way to "unescape" the newlines in the string?

Okay so I tried to string replace the "\\n" with "\\n" and "\\r" with "\\r" and that seems to have worked

var what = htmlString.replace('\\n','\n');
// what = what.replace('\\u','\u');
what = what.replace('\\r','\r');
document.getElementById("a").innerHTML = '<pre>' + what + '</pre>'; 

but it's failing on the unicode replace - I may have to replace the entire unicode block as one?

Answer 1

实际上，它看起来像JSON.parse（）将取消所有\\ n \\ r和\\ u的转义，并允许其在<pre></pre>标记中正确格式化

document.getElementById("foo").innerHTML = '<pre>' + JSON.parse('"' + htmlString + '"') + '</pre>';

Answer 2

There is no need to use JSON.parse for this. By default Javascript will consider the \\n as new line.

Refer the following question.

JavaScript string with new line - but not using \\n