JavaScript实现HTML转换为纯文本的几种方法

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

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

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

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

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\')">危险链接</a>';
const plainText5 = htmlToTextUsingDOMPurify(htmlString5);
console.log(plainText5); 

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