innerText会丢失换行，因其模拟渲染后用户所见文本，将、<p>等结构及空白符统一压缩为单个空格；应改用textContent结合手动遍历节点插入换行符来还原结构。
用 innerText 提取文本时为什么换行没了
innerText 会把 HTML 中的换行符、多个空格、<br>、<p> 等结构全部“消化”成单个空格或直接忽略，最终返回一整段挤在一起的纯文本。这不是 bug，是它的设计行为：模拟浏览器渲染后用户“看到”的文本，而非源码结构。
常见错误现象：div.innerText 返回 "HelloWorld"，而原始 HTML 是：
<div>Hello<br>World</div>
解决思路：别依赖渲染语义，改用能反映 DOM 结构的方式还原换行。
用 textContent + 手动处理 <br> 和块级标签
textContent 比 innerText 更忠实于源码——它保留所有文本节点内容，但依然不把 <br> 或 <p> 转成换行符，只是原样跳过这些标签。
立即学习“前端免费学习笔记（深入）”；
实操建议：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 遍历所有子节点，对每个
Text节点取nodeValue - 遇到
<br>、<p>、<div>、<li>等块级或换行语义标签时，手动插入"\n" - 注意
<pre>和<code>内部本就应保留原始空白，可跳过额外处理
简短示例（仅处理常见情况）：
function htmlToTextWithBreaks(el) {
let result = '';
for (const node of el.childNodes) {
if (node.nodeType === Node.TEXT_NODE) {
result += node.nodeValue;
} else if (node.tagName === 'BR') {
result += '\n';
} else if (['P', 'DIV', 'LI', 'BLOCKQUOTE'].includes(node.tagName)) {
result += '\n' + htmlToTextWithBreaks(node) + '\n';
} else {
result += htmlToTextWithBreaks(node);
}
}
return result.trim();
}
正则替换 <br> 和闭合标签前加换行太危险
有人想走捷径：先用 innerHTML 取字符串，再用正则把 <br> 替换成 \n。这在简单场景看似可行，但极易出错：
-
<br />、<BR>、<br class="clear">等写法需多模式匹配 - 正则无法识别嵌套结构，
<script><br></script>也会被误换 - 属性值里含
<br>（如title="line<br>break"）会破坏数据
结论：DOM 解析永远比字符串正则更可靠。别绕开 DOM 树去碰 HTML 字符串。
服务端用 cheerio 或 jsdom 时怎么保持换行
Node.js 环境下，cheerio 默认行为和 textContent 类似——不自动映射标签为换行。你需要显式干预：
-
cheerio('br').replaceWith('\n')后再调用.text()（注意：只对自闭合标签有效） - 对块级元素，用
.map((_, el) => cheerio(el).text()).get().join('\n')更稳妥 -
jsdom可以直接用真实 DOM API，推荐走textContent+ 自定义遍历，和浏览器端逻辑一致
真正容易被忽略的是：不同浏览器对 <pre> 里 \r\n 和 \n 的处理不一致，如果原始 HTML 来自 Windows 编辑器，服务端解析时可能需要统一 normalize 换行符。
