正文

掌握JS去除HTML标签样式的方法

/0 浏览量
0528

在处理HTML内容时，有时我们可能需要提取纯文本内容，而去除其中的HTML标签和样式。JavaScript 提供了多种方法来实现这一目标。以下是一些常用的技巧，以及如何使用它们来去除HTML标签和样式。

使用 innerHTML 和正则表达式

一个简单有效的方法是使用正则表达式来匹配并移除HTML标签。以下是一个示例函数，它接受一个包含HTML的字符串，并返回一个去除所有标签和样式的纯文本字符串。

function removeHTMLTags(htmlString) {
    const tagBody = '(?:[^"\'>]|"[^"]*"|\'[^\']*\')*';
    const tagOrComment = new RegExp(
        '<(?:'
        // Comment body.
        + '!--(?:(?:-*[^->])*--+|-?)'
        // Special "raw text" elements whose content should be elided.
        + '|script\\b' + tagBody + '>[\\s\\S]*?</script\\s*'
        + '|style\\b' + tagBody + '>[\\s\\S]*?</style\\s*'
        // Regular name
        + '|/?[a-z]'
        + tagBody
        + ')>',
        'gi'
    );
    const body = '(?:[^"\'>]|"[^"]*"|\'[^\']*\')*';
    const tagOrCommentBody = new RegExp(
        '<(?:'
        + '!--(?:(?:-*[^->])*--+|-?)'
        + '|script\\b' + body + '>[\\s\\S]*?</script\\s*'
        + '|style\\b' + body + '>[\\s\\S]*?</style\\s*'
        + '|/?[a-z]' + body
        + ')>',
        'gi'
    );
    return htmlString.replace(tagOrComment, '').replace(tagOrCommentBody, '');
}

// 示例
const htmlString = '<p style="color: red;">这是一个<p>带有样式</p>的段落。</p>';
const text = removeHTMLTags(htmlString);
console.log(text); // 输出: 这是一个带有样式的段落。

使用 DOMParser

另一种方法是使用 DOMParser 来解析HTML内容，然后遍历DOM节点并获取纯文本内容。

function removeHTMLTagsUsingDOMParser(htmlString) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlString, 'text/html');
    const text = doc.body.textContent || '';
    return text;
}

// 示例
const htmlString = '<p style="color: red;">这是一个带有样式的段落。</p>';
const text = removeHTMLTagsUsingDOMParser(htmlString);
console.log(text); // 输出: 这是一个带有样式的段落。

使用第三方库

如果你不介意引入额外的依赖，那么使用第三方库如 jsdom 或 sanitize-html 可以提供更加便捷和强大的功能。

例如，使用 sanitize-html 库：

const sanitizeHtml = require('sanitize-html');

function removeHTMLTagsUsingSanitizeHtml(htmlString) {
    return sanitizeHtml(htmlString, { allowedTags: [], allowedAttributes: [] });
}

// 示例
const htmlString = '<p style="color: red;">这是一个带有样式的段落。</p>';
const text = removeHTMLTagsUsingSanitizeHtml(htmlString);
console.log(text); // 输出: 这是一个带有样式的段落。

在上述示例中，sanitize-html 库将移除所有标签和属性。

总结来说，JavaScript 提供了多种方法来去除HTML标签和样式，你可以根据具体需求选择最合适的方法。无论是使用正则表达式、DOM操作还是第三方库，关键是要确保你的方法能够可靠地处理各种HTML结构。

-- 展开阅读全文 --