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

24 阅读3分钟

1. 使用 DOMParsertextContent

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); 

方法对比

  • DOMParserElement.textContent:适用于浏览器环境,简单易用,能正确处理 HTML 实体和嵌套标签。
  • DOMPurify:主要用于净化 HTML 输入,在处理不可信的 HTML 时非常有用,能有效防止 XSS 攻击。
  • JSDOM:适用于 Node.js 环境,模拟浏览器环境来处理 HTML,功能强大但引入了额外的依赖。
  • 正则表达式:简单快速,但无法处理复杂的 HTML 结构和嵌套标签,容易出错。

根据你的具体需求和使用环境,选择合适的方法来将 HTML 转换为纯文本。