如何用JavaScript/jQuery将<br>标签替换为</p><p>标签？

需求场景 #

需要将自动生成的HTML结构：

<div class="content__main">
    <p>This is some text<br>
    This is another line<br>
    Third line goes here<br>
    How about one more</p>
</div>

转换为：

<div class="content__main">
    <p>This is some text</p>
    <p>This is another line</p>
    <p>Third line goes here</p>
    <p>How about one more</p>
</div>

原代码失效原因 #

你的代码未生效存在两个核心问题：

• jQuery对象误用字符串方法：$('.content__main')是jQuery集合对象，不能直接调用字符串的replace()方法，必须先获取元素的HTML内容再操作。
• 正则表达式错误：/<br>\*/g中的\*是匹配字面量星号，而非匹配任意数量的后续内容，正确的正则应匹配<br>或<br/>这类标签写法，即/<br\s*\/?>/g。

解决方案 #

jQuery 实现

$(function(){
    const $main = $('.content__main');
    // 提取原有p标签内的内容
    const innerContent = $main.find('p').html();
    // 将所有<br>标签替换为</p><p>，再包裹成完整的p标签序列
    const newContent = `<p>${innerContent.replace(/<br\s*\/?>/g, '</p><p>')}</p>`;
    // 替换容器内容
    $main.html(newContent);
});

原生JavaScript 实现

document.addEventListener('DOMContentLoaded', function(){
    const mainEl = document.querySelector('.content__main');
    const pEl = mainEl.querySelector('p');
    
    // 按<br>标签拆分内容，生成独立的p标签
    const lineElements = pEl.innerHTML.split(/<br\s*\/?>/)
        .map(line => `<p>${line.trim()}</p>`)
        .join('');
    
    mainEl.innerHTML = lineElements;
});

两种方案均先提取原p标签内的文本内容，将<br>分割的段落转换为独立的<p>标签，最终替换容器内的原有结构，确保输出符合预期。

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