用Unicode替换\ n以正确显示html中的新行

Question

我有一个多行字符串：

let str = 'line first \n     line-second-preceded-with-a-few-spaces';

我想将其注入HTML代码。我设法用替换了所有空格，但replace(/ /g, '\u00a0')我也想这样做，\n但是Wikipedia中提到的Unicode值似乎都不起作用。

Unicode标准定义了一些字符，符合标准的应用程序应将其识别为行终止符：

LF:    Line Feed, U+000A
VT:    Vertical Tab, U+000B
FF:    Form Feed, U+000C
CR:    Carriage Return, U+000D
CR+LF: CR (U+000D) followed by LF (U+000A)
NEL:   Next Line, U+0085
LS:    Line Separator, U+2028
PS:    Paragraph Separator, U+2029

{str.replace(/ /g, '\u00a0').replace(/(?:\r\n|\r|\n)/g, '\u000a')}

这样做的正确方法是什么？

Answer 1

您可以\n用换行符替换，<br/>然后innerHTML像添加

let str = 'line first \n     line-second-preceded-with-a-few-spaces';
str = str.replace(/ /g, '\u00a0');
str = str.split("\n").join("<br/>")
document.getElementById("d").innerHTML = str;

<div id="d"></div>

或者您使用replace(/\n/g, "<br/>");。这也将做同样的事情

let str = 'line first \n     line-second-preceded-with-a-few-spaces';
str = str.replace(/ /g, '\u00a0').replace(/\n/g, "<br/>");
document.getElementById("d").innerHTML = str;

<div id="d"></div>

或者，您也可以将包含\n和的字符串包装" "在pre标记中，以将其视为换行符和空格

let str = 'line first \n     line-second-preceded-with-a-few-spaces';

document.getElementById("d").innerHTML = `<pre>${str}</pre>`;

<div id="d"></div>

注意：pre元素应用于具有影响内容含义的印刷格式的文本，例如诗歌，ASCII艺术，笔录，当然还有计算机代码