1. 使用 DOMParser
和 textContent
DOMParser
可以将 HTML 字符串解析为 DOM 文档,然后使用 textContent
属性获取纯文本内容。
function htmlToTextUsingDOMParser(html) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
return doc.body.textContent || '';
}
// 示例使用
const htmlString = '<p>这是一段 <strong>HTML</strong> 文本。</p>';
const plainText = htmlToTextUsingDOMParser(htmlString);
console.log(plainText);
2. 创建临时 div
元素
创建一个临时的 div
元素,将 HTML 内容插入其中,然后使用 textContent
属性获取纯文本。
function htmlToTextUsingDiv(html) {
const div = document.createElement('div');
div.innerHTML = html;
return div.textContent || '';
}
// 示例使用
const htmlString2 = '<h1>标题</h1><p>段落内容</p>';
const plainText2 = htmlToTextUsingDiv(htmlString2);
console.log(plainText2);
3. 正则表达式替换
使用正则表达式替换 HTML 标签,从而得到纯文本。不过这种方法有局限性,因为正则表达式很难处理所有复杂的 HTML 标签情况。
function htmlToTextUsingRegex(html) {
return html.replace(/<[^>]*>?/gm, '');
}
// 示例使用
const htmlString3 = '<a href="#">链接</a> 文本';
const plainText3 = htmlToTextUsingRegex(htmlString3);
console.log(plainText3);
以上三种方法各有优缺点,DOMParser
和创建临时 div
元素的方法更可靠,因为它们能正确处理 HTML 实体和嵌套标签;而正则表达式方法简单但不够健壮,仅适用于简单的 HTML 字符串。
除了之前提到的方法,还有其他几种将 HTML 转换为纯文本的方式,下面为你深入介绍:
4. 使用 Element.textContent
(浏览器环境)
如果你在浏览器环境中,可以直接创建一个 div
元素并将 HTML 内容插入其中,然后获取 textContent
属性。这种方法和前面创建临时 div
元素类似,但更简洁。
function htmlToTextUsingElement(html) {
const element = document.createElement('div');
element.innerHTML = html;
return element.textContent;
}
// 示例使用
const htmlString4 = '<span>这是一个 <em>示例</em>。</span>';
const plainText4 = htmlToTextUsingElement(htmlString4);
console.log(plainText4);
5. 使用 DOMPurify
库
DOMPurify
是一个用于净化 HTML 输入的库,它可以帮助你安全地移除 HTML 标签,同时避免 XSS 攻击。在处理不可信的 HTML 输入时,这是一个很好的选择。
首先,你需要安装 DOMPurify
:
npm install dompurify
然后在代码中使用:
import DOMPurify from 'dompurify';
function htmlToTextUsingDOMPurify(html) {
const clean = DOMPurify.sanitize(html, { ALLOWED_TAGS: [] });
return clean;
}
// 示例使用
const htmlString5 = '<a href="#" onclick="alert(\'XSS\')">危险链接</a>';
const plainText5 = htmlToTextUsingDOMPurify(htmlString5);
console.log(plainText5);
6. 使用 JSDOM
(Node.js 环境)
如果你在 Node.js 环境中,可以使用 JSDOM
库来模拟浏览器环境,然后获取纯文本内容。
首先,安装 JSDOM
:
npm install jsdom
然后在代码中使用:
const { JSDOM } = require('jsdom');
function htmlToTextUsingJSDOM(html) {
const dom = new JSDOM(html);
return dom.window.document.body.textContent;
}
// 示例使用
const htmlString6 = '<h2>Node.js 示例</h2><p>这是一个使用 JSDOM 的示例。</p>';
const plainText6 = htmlToTextUsingJSDOM(htmlString6);
console.log(plainText6);
方法对比
DOMParser
和Element.textContent
:适用于浏览器环境,简单易用,能正确处理 HTML 实体和嵌套标签。DOMPurify
:主要用于净化 HTML 输入,在处理不可信的 HTML 时非常有用,能有效防止 XSS 攻击。JSDOM
:适用于 Node.js 环境,模拟浏览器环境来处理 HTML,功能强大但引入了额外的依赖。- 正则表达式:简单快速,但无法处理复杂的 HTML 结构和嵌套标签,容易出错。
根据你的具体需求和使用环境,选择合适的方法来将 HTML 转换为纯文本。