HTML内容解析与纯文本提取教程

聖光之護

发布时间：2025-09-28 08:15:29

869人浏览过

来源于php中文网

原创

HTML内容解析与纯文本提取教程

本教程旨在解决如何在JSON对象中嵌入的HTML内容中提取纯文本信息的问题。我们将介绍一种利用浏览器DOM API的简洁高效方法，通过创建临时DOM元素并使用innerText属性，结合正则表达式处理换行符，实现从复杂HTML结构中获取所需纯文本。

引言：JSON中HTML文本的解析需求

在现代web开发中，我们经常会遇到从api响应、用户输入或第三方服务中获取包含html标签的字符串数据。当这些html内容被封装在json对象内部时，我们可能需要将其解析并提取出纯文本信息，以便进行显示、搜索或进一步的数据处理。直接显示带有html标签的文本往往不美观且不符合预期，因此，一种有效的方法是将html结构转换为易于阅读的纯文本格式，同时保留关键的格式信息，如换行。

核心解析策略：利用浏览器DOM进行文本提取

在浏览器环境中，最直接且安全的方式是利用其内置的DOM（文档对象模型）解析能力。我们可以创建一个临时的DOM元素，将HTML字符串作为其innerHTML属性赋值，然后通过访问该元素的innerText属性来获取其渲染后的纯文本内容。innerText属性的优势在于它会自动处理HTML标签，只返回用户可见的文本内容，并尝试保留基本的视觉格式，如段落和换行。

示例代码与详细解析

以下是一个具体的JavaScript示例，展示了如何将给定的HTML片段解析为纯文本，并保留预期的换行符：

// 假设这是从JSON对象中获取的HTML字符串
const htmlContent = `protected

wummie
Independent Faction
woman

SlowlyWastingAway: Deusphage

Member Count: 1
Age: 2 years, 5 months and 6 days
Bank: 0 Regals

Flags:
open | monsters | animals
`; /** * 将HTML字符串解析为纯文本 * @param {string} htmlString 待解析的HTML字符串 * @returns {string} 解析后的纯文本 */ function parseHtmlToPlainText(htmlString) { // 步骤一：创建临时DOM元素 // 使用一个div元素作为容器，它不会被渲染到页面上，仅用于解析 const tempDiv = document.createElement("div"); // 步骤二：注入HTML内容并处理换行符 // 将HTML字符串赋值给innerHTML。 // 注意：innerText对
标签的处理可能因浏览器而异， // 为了确保换行符的准确性，我们先将
替换为\n。 tempDiv.innerHTML = htmlString.replace(//g, "\n"); // 步骤三：提取纯文本 // innerText会自动去除所有HTML标签，并返回可见的文本内容。 return tempDiv.innerText.trim(); // 使用trim()去除首尾可能的空白字符 } const plainText = parseHtmlToPlainText(htmlContent); console.log(plainText); /* 预期输出: protected wummie Independent Faction woman SlowlyWastingAway: Deusphage Member Count: 1 Age: 2 years, 5 months and 6 days Bank: 0 Regals Flags: open | monsters | animals */

代码解析：

IBM Watson

IBM Watson文字转语音

下载

document.createElement("div"): 我们首先在内存中创建一个div元素。这个元素不会被添加到页面的实际DOM树中，因此它不会对页面布局或渲染产生任何影响。它仅仅作为一个临时的容器，用于承载和解析HTML字符串。
*`tempDiv.innerHTML = htmlString.replace(/
\/?>/g, "\n");`**:

innerHTML属性允许我们将一个HTML字符串作为内容插入到tempDiv中。浏览器会自动解析这个HTML字符串，并构建相应的DOM结构。

replace(/
/g, "\n")是一个关键步骤。尽管innerText会尝试保留某些视觉格式，但它对
标签的处理可能不一致或不符合我们的预期（例如，某些浏览器可能不会将其转换为\n）。通过预先将所有
（包括
和
）替换为\n，我们确保了在最终纯文本中换行符的准确性。
tempDiv.innerText.trim():
- innerText属性返回元素及其所有子元素的渲染文本内容，自动剥离所有HTML标签，只留下可见的文本。它还会处理CSS样式（如display: none的元素内容不会被包含）。
- .trim()方法用于移除字符串开头和结尾的空白字符，使输出更加整洁。

注意事项与最佳实践

环境依赖性：此方法依赖于浏览器环境中的document对象。它不能直接在Node.js等非浏览器环境中运行。在Node.js中，您需要使用像jsdom这样的库来模拟浏览器DOM环境，或者使用专门的HTML解析库（如cheerio）。
安全性：使用innerText提取文本比直接操作innerHTML然后尝试手动移除标签要安全得多。innerText不会执行HTML中的脚本，从而降低了XSS（跨站脚本攻击）的风险。然而，如果原始HTML字符串来自不可信的源，仍需谨慎处理，例如避免将其直接插入到页面中。
性能考量：对于非常庞大或复杂的HTML字符串，频繁地创建临时DOM元素并进行解析可能会有性能开销。在处理大量数据时，可以考虑优化策略，例如批量处理或使用更专业的解析器。
格式保留：innerText会尽可能地保留文本的视觉格式，例如段落间的换行。但它不会保留所有HTML的语义信息（如粗体、斜体等），因为目标是纯文本。如果需要保留更丰富的格式，则需要采用不同的策略，例如将HTML转换为Markdown。
替代方案（非浏览器环境）：
- Node.js: 可以使用jsdom库来模拟浏览器环境并使用上述方法，或者使用cheerio库，它提供了一个类似于jQuery的API来解析和操作HTML。
- Python: BeautifulSoup是一个功能强大的库，用于从HTML和XML文件中提取数据。

总结

通过利用浏览器DOM的document.createElement和innerText属性，结合对
标签的预处理，我们可以高效且安全地从JSON对象中嵌入的HTML内容中提取出所需的纯文本信息。这种方法简洁、易于理解和实现，是客户端HTML文本解析的常用且推荐的实践。在非浏览器环境中，开发者可以根据具体需求选择合适的服务器端HTML解析库来完成类似任务。

立即学习“前端免费学习笔记（深入）”；

HTML 中为不同图片设置圆角效果的正确方法

HTML 中为不同图片设置不同圆角效果的完整教程

如何通过 JavaScript 修改 Shadow DOM 中元素的样式

如何消除 HTML5 视频 poster 图片加载后出现的白屏闪烁问题

使用 CSS 动画替代 transitionend 事件避免子元素误触发

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关专题

python开发工具

php中文网为大家提供各种python开发工具，好的开发工具，可帮助开发者攻克编程学习中的基础障碍，理解每一行源代码在程序执行时在计算机中的过程。php中文网还为大家带来python相关课程以及相关文章等内容，供大家免费下载使用。

773

2023.06.15

python打包成可执行文件

本专题为大家带来python打包成可执行文件相关的文章，大家可以免费的下载体验。

684

2023.07.20

python能做什么

python能做的有：可用于开发基于控制台的应用程序、多媒体部分开发、用于开发基于Web的应用程序、使用python处理数据、系统编程等等。本专题为大家提供python相关的各种文章、以及下载和课程。

765

2023.07.25

format在python中的用法

Python中的format是一种字符串格式化方法，用于将变量或值插入到字符串中的占位符位置。通过format方法，我们可以动态地构建字符串，使其包含不同值。php中文网给大家带来了相关的教程以及文章，欢迎大家前来阅读学习。

699

2023.07.31

python教程

Python已成为一门网红语言，即使是在非编程开发者当中，也掀起了一股学习的热潮。本专题为大家带来python教程的相关文章，大家可以免费体验学习。

1405

2023.08.03

python环境变量的配置

Python是一种流行的编程语言，被广泛用于软件开发、数据分析和科学计算等领域。在安装Python之后，我们需要配置环境变量，以便在任何位置都能够访问Python的可执行文件。php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

570

2023.08.04

python eval

eval函数是Python中一个非常强大的函数，它可以将字符串作为Python代码进行执行，实现动态编程的效果。然而，由于其潜在的安全风险和性能问题，需要谨慎使用。php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

579

2023.08.04

scratch和python区别

scratch和python的区别：1、scratch是一种专为初学者设计的图形化编程语言，python是一种文本编程语言；2、scratch使用的是基于积木的编程语法，python采用更加传统的文本编程语法等等。本专题为大家提供scratch和python相关的文章、下载、课程内容，供大家免费下载体验。

751

2023.08.11