HTML字符串处理：移除动态class的div首尾标签，保留内部内容

我明白你要做的事情——就是把那个class以c开头的最外层div标签去掉，只保留里面的HTML内容。你之前写的正则出了点小问题，导致整个字符串都被清空了，我来帮你修正，还会给你更可靠的方案。

问题分析 #

你之前的正则/\<div_c.*\>/有两个明显的错误：

1. 把div标签里的空格写成了下划线_，应该是div class而不是div_c；
2. .*是贪婪匹配，会从字符串开头一直匹配到最后一个>，直接把整个开头到结尾的所有内容都匹配掉了，自然替换后就空了。

而且我们需要精准匹配第一个以<div class="c开头的起始标签，以及最后一个对应的</div>结束标签，下面给你两种可行的方案：

方案一：正则表达式（适合无嵌套div的简单场景） #

如果你的div内部没有嵌套其他div标签，用正则就足够了，分两步处理：

var testString = '<div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div>';

// 第一步：移除开头符合条件的div起始标签
var withoutStartTag = testString.replace(/^<div class="c[^>]+>/, '');
// 第二步：移除结尾的</div>结束标签
var result = withoutStartTag.replace(/<\/div>$/, '');

console.log(result); // 输出：<p class="auto">Testing 123...</p>

正则说明： #

• /^<div class="c[^>]+>/：
  • ^确保从字符串开头匹配；
  • [^>]+匹配除了>之外的所有字符，刚好精准匹配到第一个div起始标签的结束位置，不会过度匹配。
• /<\/div>$/：$匹配字符串末尾的</div>，确保只移除最外层的结束标签。

你也可以用一个正则直接捕获中间内容：

var testString = '<div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div>';
var matchResult = testString.match(/^<div class="c[^>]+>(.*)<\/div>$/);
var result = matchResult ? matchResult[1] : testString; // 没匹配到就返回原字符串

console.log(result);

方案二：DOM解析（推荐，适合复杂HTML场景） #

如果你的div内部可能嵌套其他div或者复杂标签，正则很容易出错，这时候用浏览器的DOM解析能力更可靠：

var testString = '<div class="c2029" style="font-size:45px"><p class="auto">Testing <div>nested content</div> 123...</p></div>';

// 创建临时div容器
var tempContainer = document.createElement('div');
tempContainer.innerHTML = testString;

// 找到第一个class以"c"开头的div
var targetDiv = tempContainer.querySelector('div[class^="c"]');

// 提取内部HTML，没找到就返回原字符串
var result = targetDiv ? targetDiv.innerHTML : testString;

console.log(result); // 输出：<p class="auto">Testing <div>nested content</div> 123...</p>

这个方法完全依赖浏览器的HTML解析引擎，能正确处理嵌套标签、特殊字符等各种复杂情况，是最稳妥的选择。

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