Question

小提琴 - 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;

基本上网页有一个元素，其innerHTML中有换行符（来自JSON的数据）我想格式化这些数据，以便它在前端更清晰

正如您在小提琴中看到的那样 - 在javascript工作中输入换行符（\ n），但如果换行符是来自innerHTML的字符串的一部分，则它的格式不正确。

有没有办法去＆＃34; unescape＆＃34;字符串中的换行符？

好的，所以我试着用字符串替换＆＃34; \ n＆＃34;用＆＃34; \ n＆＃34;和＆＃34; \ r＆＃34;用＆＃34; \ r＆＃34;这似乎有效了

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

但它在unicode替换上失败 - 我可能不得不将整个unicode块替换为一个？

Answer 1

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

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

Answer 2

没有必要使用JSON.parse。默认情况下，Javascript会将\n视为新行。

参考以下问题。

JavaScript string with new line - but not using \n

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

2 个答案: