在HTML页面中展示文本内容时，浏览器会默认忽略文本中的换行符，同时会将小于号、大于号等特殊字符作为HTML标签的一部分进行解析，导致内容显示不符合预期。要实现原样显示文本、保留换行符并去除转义字符的影响，需要根据不同的使用场景选择合适的方法。
使用pre标签实现原样显示
pre标签是HTML中专门用于预格式化文本的标签，它会保留文本中的所有空格、换行符，并且不会解析文本中的HTML特殊字符，是最直接的原样显示方案。适合展示代码块、日志、用户提交的原始文本等内容。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>pre标签示例</title>
</head>
<body>
<pre>
这是第一行文本
这是第二行文本
<div>这里的内容不会被解析为HTML标签</div>
</pre>
</body>
</html>
上述代码中，pre标签内部的所有换行和空格都会被保留，小于号和大于号也不会被识别为HTML标签的边界，会直接显示在页面上。
使用CSS的white-space属性
如果不想使用pre标签，也可以通过给普通容器标签添加CSS的white-space属性来实现换行符保留的效果，同时配合文本转义处理特殊字符。white-space属性常用取值如下：
- pre：保留空格和换行，不自动换行
- pre-wrap：保留空格和换行，超出容器宽度自动换行
- pre-line：合并连续空格，保留换行，超出宽度自动换行
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>white-space示例</title>
<style>
.text-container {
white-space: pre-wrap;
border: 1px solid #ccc;
padding: 10px;
width: 300px;
}
</style>
</head>
<body>
<div class="text-container" id="content"></div>
<script>
// 原始文本，包含换行和特殊字符
const rawText = '第一行内容n第二行内容n<span>不会被解析的标签</span>';
// 转义HTML特殊字符
function escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
// 将转义后的文本插入容器
document.getElementById('content').textContent = rawText;
</script>
</body>
</html>
这里使用textContent属性赋值，浏览器会自动转义文本中的特殊字符，再结合white-space: pre-wrap的样式，就可以同时实现保留换行和去除转义字符影响的效果。
两种方案的对比
两种常用方案的特点对比如下：
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| pre标签 | 无需额外CSS和JS处理，原生支持原样显示 | 默认不自动换行，可能需要额外设置样式 | 代码块、固定格式的原始文本展示 |
| white-space+转义处理 | 可灵活控制换行、空格的处理规则，样式可定制性强 | 需要处理特殊字符转义，代码量稍多 | 用户输入内容、动态加载的文本展示 |
注意事项
在处理动态文本时，如果直接将包含HTML特殊字符的文本通过innerHTML插入页面，会导致特殊字符被解析，甚至引发XSS安全问题。因此动态内容优先使用textContent或者innerText属性赋值，让浏览器自动处理转义。如果必须保留文本中的部分HTML格式，需要先进行严格的过滤和转义处理，避免安全风险。
另外，当文本中包含大量换行时，使用pre-wrap样式可以让文本在容器宽度不足时自动换行，避免内容溢出容器，提升页面的可读性。