JavaScript正则表达式移除style标签内所有内容的最优方案

嘿，针对你要移除HTML字符串里整个<style>标签及其内容的需求，这里有两个靠谱的解决方案，你可以根据自己的使用场景来选：

方案1：正则表达式（适合结构简单的HTML） #

如果你的HTML结构比较规整，没有嵌套的<style>标签（这种情况其实很少见），用正则是最快速便捷的方式。

JavaScript代码示例： #

const originalHtml = `<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <style>body p{max-width: 100% !important;height: auto!important;} div{max-width: 100% !important;height: auto!important;}span{max-width: 100% !important;height: auto!important;} h1{max-width:100% !important; height: auto!important;}h2{max-width: 100% !important;height: auto!important;}h3{max-width: 100% !important;height: auto!important;}h4{max-width: 100% !important;height: auto!important;}h5{max-width: 100% !important;height: auto!important;} img{max-width: 100% !important;height: auto!important;}iframe{max-width:100% !important;height: auto!important;} </style><span style="background-color: rgb(68, 68, 255);">#followforfollow #likeforlike yo!</span> <h2></h2> <h3></h3> <h2></h2> <h1></h1><u></u>`;

// 全局匹配所有<style>标签及内部内容，非贪婪模式避免过度匹配
const cleanedHtml = originalHtml.replace(/<style[\s\S]*?<\/style>/gi, '');

console.log(cleanedHtml);

为什么这么写？

• [\s\S]*?能匹配任意字符（包括换行），而且是非贪婪的，这样不会把多个<style>标签之间的内容也一起删掉；gi标志保证全局匹配所有style标签，同时忽略大小写（虽然HTML标签一般是小写，但严谨点总没错）。
• 优点：代码短，执行快；缺点：如果HTML里有不符合规范的嵌套style标签，或者style内容里出现了</style>字符串，正则就会失效。

方案2：DOM解析器（生产环境首选，兼容复杂HTML） #

如果是在生产环境处理HTML，强烈推荐用DOM解析——正则天生就不适合处理HTML这种嵌套结构，而DOM解析器能准确识别所有合法的HTML标签，绝对不会出错。

JavaScript代码示例： #

const originalHtml = `<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <style>body p{max-width: 100% !important;height: auto!important;} div{max-width: 100% !important;height: auto!important;}span{max-width: 100% !important;height: auto!important;} h1{max-width:100% !important; height: auto!important;}h2{max-width: 100% !important;height: auto!important;}h3{max-width: 100% !important;height: auto!important;}h4{max-width: 100% !important;height: auto!important;}h5{max-width: 100% !important;height: auto!important;} img{max-width: 100% !important;height: auto!important;}iframe{max-width:100% !important;height: auto!important;} </style><span style="background-color: rgb(68, 68, 255);">#followforfollow #likeforlike yo!</span> <h2></h2> <h3></h3> <h2></h2> <h1></h1><u></u>`;

// 创建DOMParser实例，把字符串转成DOM树
const parser = new DOMParser();
const doc = parser.parseFromString(originalHtml, 'text/html');

// 找到所有style标签并移除
const styleTags = doc.querySelectorAll('style');
styleTags.forEach(tag => tag.remove());

// 把处理后的DOM树转回HTML字符串
const cleanedHtml = doc.documentElement.innerHTML;

console.log(cleanedHtml);

优势：

不管你的HTML里style标签放在哪里、内容有多复杂，DOM解析器都能精准定位并移除，完全不用担心正则的各种边界情况，鲁棒性拉满。唯一的小缺点就是代码比正则多几行，但这在生产环境的稳定性面前完全不值一提。

如果你用Python处理 #

同样推荐用专业的HTML解析库，比如BeautifulSoup，代码也很简单：

from bs4 import BeautifulSoup

original_html = '''<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <style>body p{max-width: 100% !important;height: auto!important;} div{max-width: 100% !important;height: auto!important;}span{max-width: 100% !important;height: auto!important;} h1{max-width:100% !important; height: auto!important;}h2{max-width: 100% !important;height: auto!important;}h3{max-width: 100% !important;height: auto!important;}h4{max-width: 100% !important;height: auto!important;}h5{max-width: 100% !important;height: auto!important;} img{max-width: 100% !important;height: auto!important;}iframe{max-width:100% !important;height: auto!important;} </style><span style="background-color: rgb(68, 68, 255);">#followforfollow #likeforlike yo!</span> <h2></h2> <h3></h3> <h2></h2> <h1></h1><u></u>'''

soup = BeautifulSoup(original_html, 'html.parser')
# 找到所有style标签并删除
for style in soup.find_all('style'):
    style.decompose()

cleaned_html = str(soup)
print(cleaned_html)

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