前端开发：JavaScript字符串中换行符的正确渲染方法
在前端开发中，我们经常会遇到需要在页面上展示多行文本内容的情况，比如用户提交的留言、后台返回的长文本描述等。很多时候我们会先通过JavaScript处理字符串，再将其渲染到页面上，这时候如果字符串中包含换行符，很容易出现显示异常的问题。本文将详细介绍JavaScript字符串中换行符的常见处理场景和正确渲染方法。
常见的换行符类型
在操作系统中，换行符的表示方式存在差异：
- Windows系统通常使用
\r\n作为换行符，其中\r是回车符，\n是换行符 - Unix/Linux/macOS系统通常使用
\n作为换行符 - 早期的Mac系统使用
\r作为换行符，现在基本已经统一为\n
在JavaScript字符串中，我们可以直接使用转义字符 \n 来表示换行，例如：
// 包含换行符的字符串 const text = "第一行内容\n第二行内容\n第三行内容"; console.log(text); // 控制台输出会显示为： // 第一行内容 // 第二行内容 // 第三行内容
直接渲染JavaScript字符串换行的问题
如果我们直接将包含 \n 的字符串赋值给DOM元素的文本内容，换行符不会生效，所有内容会显示在同一行。比如下面的例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>换行符渲染测试</title>
</head>
<body>
<div id="content"></div>
<script>
const text = "第一行内容\n第二行内容\n第三行内容";
// 直接设置文本内容，换行符不会生效
document.getElementById("content").textContent = text;
</script>
</body>
</html>运行上面的代码后，页面上的 div 元素会显示“第一行内容第二行内容第三行内容”，所有内容挤在同一行，这是因为HTML默认会忽略文本中的换行符和连续空白字符。
正确的渲染方法
方法一：使用CSS的white-space属性
这是最简单也最常用的处理方式，只需要给渲染文本的容器元素设置 white-space: pre-line 或者 white-space: pre-wrap 样式即可。
两种属性值的区别：
pre-line：合并连续的空白字符，但是保留文本中的换行符pre-wrap：保留连续的空白字符，同时也保留换行符
修改后的示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>换行符渲染测试</title>
<style>
#content {
/* 使用pre-line保留换行符，合并多余空白 */
white-space: pre-line;
/* 如果需要保留连续空白，改用pre-wrap */
/* white-space: pre-wrap; */
border: 1px solid #ccc;
padding: 10px;
width: 300px;
}
</style>
</head>
<body>
<div id="content"></div>
<script>
const text = "第一行内容\n第二行内容\n第三行内容";
document.getElementById("content").textContent = text;
</script>
</body>
</html>这样设置后，页面上的文本就会按照换行符分成三行显示。
方法二：将换行符替换为HTML的<br>标签
如果需要兼容不支持 white-space 属性的旧环境，或者有特殊的结构需求，可以把字符串中的 \n 替换为HTML的换行标签 <br>，然后通过 innerHTML 赋值给容器元素。
注意替换的时候要同时处理 \r\n 和 \n 两种情况，避免出现多余的空行：
// 替换换行符为<br>标签的函数
function formatTextWithBr(text) {
// 先替换\r\n为\n，避免重复处理，再将\n替换为<br>
return text.replace(/\r\n/g, "\n").replace(/\n/g, "<br>");
}
// 使用示例
const rawText = "第一行内容\r\n第二行内容\n第三行内容";
const formattedText = formatTextWithBr(rawText);
// 输出结果："第一行内容<br>第二行内容<br>第三行内容"对应的渲染代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>换行符替换br渲染</title>
</head>
<body>
<div id="content"></div>
<script>
function formatTextWithBr(text) {
return text.replace(/\r\n/g, "\n").replace(/\n/g, "<br>");
}
const rawText = "第一行内容\r\n第二行内容\n第三行内容";
const formattedText = formatTextWithBr(rawText);
document.getElementById("content").innerHTML = formattedText;
</script>
</body>
</html>这种方法需要注意如果使用用户输入的内容，要防范XSS攻击，建议先对内容进行转义处理，只替换换行符，避免恶意HTML代码被执行。
方法三：使用pre标签包裹内容
HTML的 <pre> 标签会保留文本中的空白字符和换行符，本身就有预格式化文本的功能，我们可以直接把内容放到 <pre> 标签中：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>pre标签渲染换行</title>
</head>
<body>
<pre id="content"></pre>
<script>
const text = "第一行内容\n第二行内容\n第三行内容";
document.getElementById("content").textContent = text;
</script>
</body>
</html>不过 <pre> 标签默认会使用等宽字体，而且会保留所有空白字符，如果不需要这些特性，还是更推荐第一种CSS方法。
不同场景的选择建议
根据实际开发需求可以选择不同的方法：
- 如果是普通的多行文本展示，优先使用
white-space: pre-line的CSS方法，兼容性好且实现简单 - 如果需要生成可复制的富文本结构，或者要兼容非常旧的浏览器，可以使用替换
<br>标签的方法 - 如果是展示代码、日志等需要保留所有格式的内容，直接使用
<pre>标签更合适