Javascript | HTML 转换为纯文本的方法

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 转换为纯文本。