HTML空白字符包含空格、制表符、换行符等多种类型，其处理机制贯穿浏览器渲染、DOM解析和编码转换多个环节，不同环节的处理规则存在差异，理解这些规则是前端开发的基础能力。
浏览器渲染阶段的空白字符处理规则
浏览器在渲染HTML内容时，会对连续的空白字符进行合并处理，这是最常见的空白字符处理场景。默认情况下，HTML文档中多个连续的空格、制表符、换行符，在渲染时会被合并为一个空格显示。
这种合并规则仅适用于普通文本节点，当元素设置white-space样式属性时，规则会发生变化：
normal：默认值，连续空白字符合并为一个，文本自动换行nowrap：合并连续空白字符，文本不自动换行pre：保留所有空白字符和换行，类似<pre>标签的默认行为pre-wrap：保留空白字符，文本自动换行pre-line：合并连续空白字符，保留换行符，文本自动换行
以下是一个样式影响空白字符渲染的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.normal-text {
white-space: normal;
}
.pre-text {
white-space: pre;
}
</style>
</head>
<body>
<div class="normal-text">
这 里 有 多个 空格
</div>
<div class="pre-text">
这 里 有 多个 空格
</div>
</body>
</html>
DOM解析中的空白字符节点
在DOM解析阶段，浏览器会严格按照HTML内容生成节点，空白字符也会作为文本节点存在，这和渲染阶段的合并规则并不冲突。当使用childNodes属性获取元素子节点时，空白字符会生成对应的文本节点。
比如下面的HTML结构：
<ul id="list">
<li>第一项</li>
<li>第二项</li>
</ul>
ul元素和li元素之间的换行、缩进空白字符，会被解析为文本节点，此时document.getElementById('list').childNodes的长度会是5，包含3个li元素和2个空白文本节点。
如果只需要获取元素节点，可以使用children属性，该属性只会返回元素类型的子节点，自动过滤空白文本节点。也可以通过遍历childNodes判断节点类型，过滤掉nodeType为3且内容全是空白字符的节点：
// 过滤空白文本节点
function filterEmptyTextNodes(parentNode) {
const result = [];
const childNodes = parentNode.childNodes;
for (let i = 0; i < childNodes.length; i++) {
const node = childNodes[i];
// 文本节点且内容全是空白字符则跳过
if (node.nodeType === 3 && /^s*$/.test(node.textContent)) {
continue;
}
result.push(node);
}
return result;
}
HTML编码中的空白字符处理实践
在HTML编码场景中，空白字符可以通过实体编码表示，常见的空白字符实体如下：
| 字符 | 实体编码 | 说明 |
|---|---|---|
| 空格 | | 不换行空格，不会被浏览器合并 |
| 换行 | | 对应ASCII的换行符 |
| 制表符 | 	 | 对应ASCII的制表符 |
当需要在HTML中保留多个连续空格不被合并时，可以使用 替代普通空格，比如：
<p>这 里有三个不合并的空格</p>
在动态生成HTML内容的场景中，如果内容包含用户输入的空白字符，需要注意转义处理，避免XSS风险的同时保证空白字符的正确显示。如果用户输入的内容需要作为纯文本展示，应该将<、>、&等字符转义，同时根据需求决定是否保留空白字符：
// 转义HTML特殊字符并保留空白字符
function escapeHtmlKeepSpace(text) {
const div = document.createElement('div');
div.appendChild(document.createTextNode(text));
return div.innerHTML;
}
常见实践注意事项
在实际开发中，处理空白字符可以遵循以下原则：
- 布局相关的空白尽量通过CSS的
margin、padding属性控制，不要依赖HTML中的多余空格 - 获取DOM节点时优先使用
children属性，避免空白文本节点带来的干扰 - 需要保留固定格式的文本内容时，使用
white-space: pre或者<pre>标签，配合实体编码处理特殊空白字符 - 动态拼接HTML字符串时，对用户输入的内容做转义处理，防止空白字符引发的解析异常
理解HTML空白字符在渲染、DOM、编码三个环节的处理差异，能够帮助开发者快速定位和解决空白字符相关的问题，写出更健壮的前端代码。