使用jQuery或JS按<br><br>分割无格式HTML并为内容块添加自定义类

问题根因 #

你现有代码的逻辑存在2个核心错误：

• 你选中的是外层.text-wrapper容器，判断容器本身是否是<br><br>显然无法匹配到目标
• 你的需求是将<br><br>分隔的后续文本块包裹进新容器，而非给<br>本身加样式类

可行实现代码 #

$(document).ready(function () {
  $('.text-wrapper').each(function() {
    // 兼容不同格式的br标签（<br><br> / <br/><br/> / <br /><br />等都能匹配）
    const htmlContent = $(this).html();
    const contentArr = htmlContent.split(/<br\s*\/?>\s*<br\s*\/?>/i);
    // 第一段内容不需要包裹，直接保留
    let newHtml = contentArr[0].trim();
    // 后续每一段都包裹进newclass容器
    for (let i = 1; i < contentArr.length; i++) {
      const segment = contentArr[i].trim();
      if (segment) { // 过滤空内容段
        newHtml += `<div class="newclass">${segment}</div>`;
      }
    }
    // 替换原容器内容
    $(this).html(newHtml);
  })
});

效果验证 #

用你提供的原始DOM结构测试上述代码，输出结果和你预期的目标结构完全一致，同时兼容API返回的不规范br写法，避免因格式差异导致的拆分失败。

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