如何从HTML代码提取文本并保留换行-html教程-PHP中文网

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

innertext会丢失换行，因其模拟渲染后用户所见文本，将、等结构及空白符统一压缩为单个空格；应改用textcontent结合手动遍历节点插入换行符来还原结构。

如何从html代码提取文本并保留换行

用 `innerText` 提取文本时为什么换行没了

innerText 会把 HTML 中的换行符、多个空格、 、 等结构全部“消化”成单个空格或直接忽略，最终返回一整段挤在一起的纯文本。这不是 bug，是它的设计行为：模拟浏览器渲染后用户“看到”的文本，而非源码结构。

常见错误现象：div.innerText 返回 "HelloWorld"，而原始 HTML 是：

<div>Hello<br>World</div>

解决思路：别依赖渲染语义，改用能反映 DOM 结构的方式还原换行。

用 `textContent` + 手动处理 ` ` 和块级标签

textContent 比 innerText 更忠实于源码——它保留所有文本节点内容，但依然不把   或  转成换行符，只是原样跳过这些标签。

实操建议：

遍历所有子节点，对每个 Text 节点取 nodeValue
遇到  、、<div>、<code><li> 等块级或换行语义标签时，手动插入 "\n"
注意 <pre class="brush:php;toolbar:false;"></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();
}