HTML清除格式常用方法有哪些

本文系统介绍了清除HTML富文本格式的多种实用方法，涵盖前端JavaScript（如textContent提取纯文本、正则替换移除style/class属性、DOM操作清理空标签）、现代浏览器API巧用（结合innerHTML与换行符保留基础结构），以及更安全可靠的库级方案（如DOMPurify配置白名单净化）和服务端处理（如PHP的strip_tags函数），帮助开发者在Word粘贴、编辑器迁移或表单提交等高频场景中高效剥离冗余样式与危险标签，兼顾简洁性与安全性——无论你是需要一行代码快速去格式，还是构建生产级内容净化流程，这里都有即学即用的解决方案。

在处理HTML内容时，经常会遇到需要清除富文本中的格式（如字体、颜色、对齐方式等）或去除多余标签的情况。这在从Word粘贴内容、编辑器间数据迁移或提交表单时尤为常见。以下是几种实用的HTML富文本格式清除方法。

使用JavaScript去除HTML标签和样式

通过正则表达式或DOM操作可以有效清除HTML中的内联样式和无用标签。

1. 基础去标签方法：仅保留纯文本或基本结构（如段落、换行）。

function stripHtml(html) {
  let temp = document.createElement('div');
  temp.innerHTML = html;
  return temp.textContent || temp.innerText || '';
}

该方法将HTML字符串插入临时元素，再提取文本内容，自动剥离所有标签。

2. 保留部分标签，清除样式：若需保留p、br、strong等基础标签，可使用正则替换style、class等属性。

function cleanHtml(html) {
  // 移除 style, class, 属性
  html = html.replace(/<[^>]*?(style|class|align|face)[^>]*>/gi, '');
  // 清理空标签
  html = html.replace(/<([^>]+)>\s*<\/\1>/g, '');
  return html;
}

利用浏览器原生API简化处理

借助 textContent 和 innerHTML 的特性，能快速实现格式剥离。

例如，在富文本编辑器中获取纯内容：

const editor = document.getElementById('editor');
const plainText = editor.textContent; // 完全无格式文本

如果希望保留换行但去掉样式，可结合换行符处理：

const cleanText = editor.innerHTML
  .replace(/<br>/gi, '\n')
  .replace(/<p>(.*)<\/p>/gi, '$1\n')
  .replace(/<[^>]+>/g, '');

服务端或库级解决方案

对于更复杂的场景，推荐使用成熟工具库或后端过滤。

1. 使用 DOMPurify + 配置清除样式：

import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize(dirty, {
  ALLOWED_TAGS: ['p', 'br', 'strong', 'em'],
  ALLOWED_ATTR: [] // 不允许任何属性，清除style/class等
});

2. 后端过滤（PHP示例）：使用 strip_tags 限制允许标签。

$clean = strip_tags($html, '<p><br><strong><em>');

基本上就这些常用方法。根据实际需求选择客户端即时清理还是服务端统一处理，关键是明确要保留哪些结构，去掉哪些冗余样式与标签。操作不复杂，但容易忽略细节导致残留样式问题。

今天关于《HTML清除格式常用方法有哪些》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于html的内容请关注golang学习网公众号！