快捷導(dǎo)航

JavaScript實(shí)現(xiàn)HTML轉(zhuǎn)換為純文本的幾種方法

更新時(shí)間：2025年05月08日 14:32:29 作者：夢(mèng)幻星辰吧

本文主要介紹了六種將HTML轉(zhuǎn)換為純文本的方法,包括使用DOMParser、創(chuàng)建臨時(shí)div元素、正則表達(dá)式替換、Element.textContent（瀏覽器環(huán)境）、DOMPurify庫(kù)和JSDOM庫(kù),每種方法都有其優(yōu)缺點(diǎn),選擇合適的方法取決于具體需求和使用環(huán)境,需要的朋友可以參考下

1. 使用 DOMParser 和 textContent

DOMParser 可以將 HTML 字符串解析為 DOM 文檔，然后使用 textContent 屬性獲取純文本內(nèi)容。

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. 創(chuàng)建臨時(shí) div 元素

創(chuàng)建一個(gè)臨時(shí)的 div 元素，將 HTML 內(nèi)容插入其中，然后使用 textContent 屬性獲取純文本。

function htmlToTextUsingDiv(html) {
    const div = document.createElement('div');
    div.innerHTML = html;
    return div.textContent || '';
}

// 示例使用
const htmlString2 = '<h1>標(biāo)題</h1><p>段落內(nèi)容</p>';
const plainText2 = htmlToTextUsingDiv(htmlString2);
console.log(plainText2);

3. 正則表達(dá)式替換

使用正則表達(dá)式替換 HTML 標(biāo)簽，從而得到純文本。不過(guò)這種方法有局限性，因?yàn)檎齽t表達(dá)式很難處理所有復(fù)雜的 HTML 標(biāo)簽情況。

function htmlToTextUsingRegex(html) {
    return html.replace(/<[^>]*>?/gm, '');
}

// 示例使用
const htmlString3 = '<a href="#" rel="external nofollow"  rel="external nofollow" >鏈接</a> 文本';
const plainText3 = htmlToTextUsingRegex(htmlString3);
console.log(plainText3);

以上三種方法各有優(yōu)缺點(diǎn)，DOMParser 和創(chuàng)建臨時(shí) div 元素的方法更可靠，因?yàn)樗鼈兡苷_處理 HTML 實(shí)體和嵌套標(biāo)簽；而正則表達(dá)式方法簡(jiǎn)單但不夠健壯，僅適用于簡(jiǎn)單的 HTML 字符串。

除了之前提到的方法，還有其他幾種將 HTML 轉(zhuǎn)換為純文本的方式，下面為你深入介紹：

4. 使用 Element.textContent（瀏覽器環(huán)境）

如果你在瀏覽器環(huán)境中，可以直接創(chuàng)建一個(gè) div 元素并將 HTML 內(nèi)容插入其中，然后獲取 textContent 屬性。這種方法和前面創(chuàng)建臨時(shí) div 元素類(lèi)似，但更簡(jiǎn)潔。

function htmlToTextUsingElement(html) {
    const element = document.createElement('div');
    element.innerHTML = html;
    return element.textContent;
}

// 示例使用
const htmlString4 = '<span>這是一個(gè) <em>示例</em>。</span>';
const plainText4 = htmlToTextUsingElement(htmlString4);
console.log(plainText4);

5. 使用 DOMPurify 庫(kù)

DOMPurify 是一個(gè)用于凈化 HTML 輸入的庫(kù)，它可以幫助你安全地移除 HTML 標(biāo)簽，同時(shí)避免 XSS 攻擊。在處理不可信的 HTML 輸入時(shí)，這是一個(gè)很好的選擇。

首先，你需要安裝 DOMPurify：

npm install dompurify

然后在代碼中使用：

import DOMPurify from 'dompurify';

function htmlToTextUsingDOMPurify(html) {
    const clean = DOMPurify.sanitize(html, { ALLOWED_TAGS: [] });
    return clean;
}

// 示例使用
const htmlString5 = '<a href="#" rel="external nofollow"  rel="external nofollow"  onclick="alert(\'XSS\')">危險(xiǎn)鏈接</a>';
const plainText5 = htmlToTextUsingDOMPurify(htmlString5);
console.log(plainText5);

6. 使用 JSDOM（Node.js 環(huán)境）

如果你在 Node.js 環(huán)境中，可以使用 JSDOM 庫(kù)來(lái)模擬瀏覽器環(huán)境，然后獲取純文本內(nèi)容。

首先，安裝 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>這是一個(gè)使用 JSDOM 的示例。</p>';
const plainText6 = htmlToTextUsingJSDOM(htmlString6);
console.log(plainText6);

方法對(duì)比

DOMParser 和 Element.textContent：適用于瀏覽器環(huán)境，簡(jiǎn)單易用，能正確處理 HTML 實(shí)體和嵌套標(biāo)簽。
DOMPurify：主要用于凈化 HTML 輸入，在處理不可信的 HTML 時(shí)非常有用，能有效防止 XSS 攻擊。
JSDOM：適用于 Node.js 環(huán)境，模擬瀏覽器環(huán)境來(lái)處理 HTML，功能強(qiáng)大但引入了額外的依賴(lài)。
正則表達(dá)式：簡(jiǎn)單快速，但無(wú)法處理復(fù)雜的 HTML 結(jié)構(gòu)和嵌套標(biāo)簽，容易出錯(cuò)。

根據(jù)你的具體需求和使用環(huán)境，選擇合適的方法來(lái)將 HTML 轉(zhuǎn)換為純文本。

以上就是JavaScript實(shí)現(xiàn)HTML轉(zhuǎn)換為純文本的幾種方法的詳細(xì)內(nèi)容，更多關(guān)于JavaScript HTML轉(zhuǎn)文本的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: