如何使用JS批量移除HTML段落内嵌套CSS并解决内容重复问题

原有代码问题排查 #

• 你使用textContent提取内容，会自动剥离所有HTML标签（包括你要保留的<br>换行标签），最终输出自然没有换行
• 只匹配了第一个.coh-paragraph元素的内容，却删除了页面中所有.coh-paragraph元素，最后仅新增一个段落，自然会出现内容丢失、重复的问题
• 硬编码逐个替换CSS规则，通用性极低，只要出现新的选择器就无法匹配，且替换逻辑没有考虑空格、换行等格式差异，很容易匹配失败

修正后代码 #

你可以直接用正则批量匹配所有嵌套的CSS规则块，不需要硬编码每个选择器，同时直接操作元素的innerHTML保留原有换行标签：

$(document).ready(function(){
  // 匹配所有CSS规则块的正则：适配类选择器、伪类、嵌套属性、注释等场景
  const cssRuleReg = /(\.[a-zA-Z0-9_\-]+(\s*:\:[a-zA-Z]+|\s*:\s*[a-z]+(\([^)]+\))?)?\s*{[^}]+})/g
  // 遍历所有内容段落
  $('.coh-paragraph').each(function(){
    let originHtml = $(this).html()
    // 移除所有CSS规则块
    let cleanedHtml = originHtml.replace(cssRuleReg, '')
    // 可选：移除多余的空行和连续的换行标签
    cleanedHtml = cleanedHtml.replace(/(<br>\s*){3,}/g, '<br><br>').replace(/&nbsp;/g, ' ')
    // 直接写回原元素，不需要删除重建
    $(this).html(cleanedHtml)
  })
});

实现说明 #

• 正则会自动匹配所有以.开头的CSS类选择器（包含:hover、::before这类伪类/伪元素规则），从选择器后的{匹配到对应的闭合}，整块删除
• 直接操作原元素的innerHTML，原有<br>、文本格式都会完整保留
• 遍历所有.coh-paragraph元素处理，不会出现内容丢失、重复的问题
• 不需要额外新增/删除元素，性能更高，也不会破坏原有的DOM结构

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