在网页开发过程中，经常需要将包含HTML5标签的内容转换为纯文本格式，去掉所有的标签、属性和样式信息，只保留其中的文字内容。这种转换在内容抓取、数据清洗、文本展示等场景中非常实用。
利用DOM原生属性转换
浏览器提供了原生的DOM属性，可以直接获取元素内的纯文本内容，不需要手动处理标签，是最简便的转换方式。
innerText属性
innerText会获取元素内所有渲染出来的文本内容，会自动忽略隐藏元素的文本，同时会保留换行和空格的渲染效果。
// 假设页面上有如下HTML结构
// <div id="htmlContent">
// <h3>标题</h3>
// <p>这是一段<strong>HTML5</strong>内容</p>
// <p style="display:none">隐藏的文本</p>
// </div>
const htmlElement = document.getElementById('htmlContent');
// 获取纯文本内容
const textContent = htmlElement.innerText;
console.log(textContent);
// 输出结果：
// 标题
// 这是一段HTML5内容
// 隐藏的p标签内容不会被包含
textContent属性
textContent会获取元素内所有子节点的文本内容，包括隐藏元素的文本，不会考虑样式渲染的影响，获取的是原始文本节点内容。
const htmlElement = document.getElementById('htmlContent');
const textContent = htmlElement.textContent;
console.log(textContent);
// 输出结果会包含所有子节点的文本，包括隐藏元素的文本，换行和空格会保留原始节点间的间隔
手动处理字符转义转换
如果没有DOM环境，比如在Node.js后端场景，需要手动处理HTML5字符转义，将标签和特殊字符替换为对应的文本形式。
基础标签去除
可以通过正则表达式匹配并替换掉所有的HTML标签，得到纯文本。
function htmlToText(htmlStr) {
// 先替换换行标签为换行符
let text = htmlStr.replace(/<brs*/?>/gi, 'n');
// 替换段落标签为换行
text = text.replace(/</p>/gi, 'n');
// 去除所有其他HTML标签
text = text.replace(/<[^>]+>/g, '');
// 处理HTML实体转义
text = text.replace(/ /g, ' ');
text = text.replace(/</g, '<');
text = text.replace(/>/g, '>');
text = text.replace(/&/g, '&');
text = text.replace(/"/g, '"');
return text.trim();
}
const htmlStr = '<div><h3>标题</h3><p>内容</p></div>';
console.log(htmlToText(htmlStr));
// 输出：标题
// 内容
两种转换方式对比
以下是两种转换方式的特性对比，方便开发者根据场景选择：
| 转换方式 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| innerText/textContent | 浏览器前端环境 | 实现简单，无需手动处理复杂标签和实体 | 依赖DOM环境，无法在后端使用 |
| 手动字符转义 | Node.js后端、无DOM环境 | 不依赖浏览器环境，通用性强 | 复杂HTML场景处理难度大，容易遗漏特殊实体 |
注意事项
- 如果需要保留原始的换行和空格格式，优先选择textContent属性，innerText的换行效果受CSS样式影响。
- 手动转义时需要注意处理所有HTML实体，避免特殊字符显示异常。
- 如果HTML内容包含脚本标签，转换前建议先移除脚本内容，避免执行恶意代码。
实际开发中，前端场景优先使用原生DOM属性转换，后端场景可以根据HTML复杂度选择手动转义或者使用专门的HTML解析库处理，提升转换的准确性。
HTML5文本转换字符转义innerTexttextContent修改时间：2026-06-19 23:06:24