如何在HTML中正确替换换行符 为Unicode字符以实现换行显示

嘿，我懂你现在的困扰——把多行字符串塞进HTML里，空格换成 成功了，但换行怎么都搞不定对吧？其实问题出在浏览器对HTML里空白字符的处理逻辑上，不是你替换Unicode的方式错了～

为什么直接替换Unicode换行符没用？ #

在普通的HTML元素（比如<div>、<p>）里，浏览器会自动把换行符（LF/U+000A）、回车符（CR/U+000D）、换页符这些空白字符合并成一个空格，根本不会渲染成换行。所以哪怕你把\n换成对应的Unicode转义字符，浏览器也不会买账。

两种靠谱的解决方案 #

1. 把换行符替换成HTML换行标签 <br>

既然浏览器不认原生换行，那我们就给它认识的HTML标签！你可以在替换空格的基础上，把所有换行相关的字符都换成<br>：

let str = 'line first \n line-second-preceded-with-a-few-spaces';
// 处理所有Unicode换行终止符：LF、CR、FF、VT
let htmlStr = str.replace(/[\n\r\f\v]/g, '<br>').replace(/ /g, '&nbsp;');
// 然后把htmlStr插入到HTML中即可

如果你的字符串里只有LF（\n），也可以简化成replace(/\n/g, '<br>')，但上面的正则能覆盖所有Unicode标准里的换行终止符，更稳妥。

2. 用CSS white-space 属性保留原格式

如果你不想折腾字符串替换，直接用CSS控制元素的空白字符渲染规则更省心。给承载字符串的HTML元素加上white-space: pre-wrap;样式，这样浏览器会自动保留换行和空格，完全不用替换：

<!-- 示例：把字符串插入到这个div里 -->
<div style="white-space: pre-wrap;">
  line first 
 line-second-preceded-with-a-few-spaces
</div>

这个方法的好处是完全保留原字符串的格式，不需要做任何字符串处理，适合需要展示原始文本格式的场景。

额外小提示 #

如果你的字符串是要放到<pre>标签里，那原生换行本来就会生效，但<pre>默认会用等宽字体，而且空格也会保留，这时候可能连 都不需要替换～

内容的提问来源于stack exchange，提问作者Malvinka