WYSIWYG编辑器粘贴内容处理：去除标签内样式，仅留空<p>/<span>标签

看起来你遇到的问题是服务器端清理HTML标签内容时，没彻底清除标签里的样式属性对吧？我之前也碰到过类似的情况，WYSIWYG编辑器粘贴的内容经常带一堆冗余的样式，只删字面的"Style:"肯定不够，得把标签的属性整个清掉，同时清空标签内的所有内容才行。

下面给你两种靠谱的解决方案：

方法1：使用DOM解析库（推荐，更可靠） #

正则处理HTML很容易踩坑（比如属性值带特殊符号、嵌套标签等），用专门的HTML解析库能覆盖绝大多数场景，更稳妥。

Python + BeautifulSoup示例 #

from bs4 import BeautifulSoup

def clean_wysiwyg_content(html_content):
    soup = BeautifulSoup(html_content, "html.parser")
    # 遍历所有需要保留的标签（p和span）
    for tag in soup.find_all(["p", "span"]):
        # 清空标签的所有属性（包括style、class等）
        tag.attrs = {}
        # 清空标签内的所有文本和子节点
        tag.clear()
    # 转换回干净的HTML字符串
    return str(soup)

这个方法会把类似 <p style="color:red; font-weight:bold;">粘贴的内容<span>嵌套文本</span></p> 的内容，转换成完全干净的 <p></p>。

Node.js + cheerio示例 #

如果你的服务端用Node.js，可以用cheerio库实现同样的逻辑：

const cheerio = require('cheerio');

function cleanWysiwygContent(htmlContent) {
    const $ = cheerio.load(htmlContent);
    // 选中所有p和span标签
    $('p, span').each((index, element) => {
        // 移除标签的所有属性
        $(element).removeAttr();
        // 清空标签内的所有内容
        $(element).empty();
    });
    return $.html();
}

方法2：正则表达式（适合简单场景） #

如果你的HTML结构非常简单，没有复杂嵌套或特殊属性值，也可以用正则快速处理，但要注意它的局限性：

function cleanWithRegex(htmlContent) {
    // 第一步：清除p/span标签的所有属性
    let cleaned = htmlContent.replace(/<(p|span)\s+[^>]+>/gi, '<$1>');
    // 第二步：清除标签内的所有内容（包括子标签）
    cleaned = cleaned.replace(/<(p|span)>([\s\S]*?)<\/\1>/gi, '<$1></$1>');
    return cleaned;
}

⚠️ 提醒：正则无法处理所有HTML边缘情况，比如属性值里包含 > 或者嵌套的同类型标签，所以复杂场景优先用DOM解析库。

为什么之前的处理失败？ #

你之前的处理只针对了"Style:"这个字面文本，但实际样式是写在标签的style属性里的（比如 <p style="font-size:16px;">），所以只删除"Style:"根本碰不到真正的样式代码，必须直接清除整个属性才行。

内容的提问来源于stack exchange，提问作者Packy