如何使用Javascript移除包裹在img标签外层的p标签

正则实现（和原PHP逻辑完全对齐） #

原PHP正则中的i（不区分大小写）和U（非贪婪匹配）对应到JavaScript中，需要将.*改为非贪婪模式的.*?，同时添加i（不区分大小写）和g（全局匹配所有符合项）修饰符，反向引用从\1改为$1格式，最终实现代码如下：

function removePWrapForImg(htmlStr) {
  const matchReg = /<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/gi;
  return htmlStr.replace(matchReg, '$1$2$3');
}

使用示例 #

const rawHtml = `
<p>普通段落不受影响</p>
<p><img src="demo.png" alt="测试图片" /></p>
<p>
  <a href="https://example.com">
    <img src="demo2.png" alt="带链接的图片" />
  </a>
</p>
`;
const processedHtml = removePWrapForImg(rawHtml);
console.log(processedHtml);

更稳定的DOM解析实现（推荐） #

正则处理HTML存在边界场景匹配错误的隐患，如果你是在浏览器环境下使用，推荐通过DOM操作实现，兼容性和准确性更高：

function removePWrapForImg(htmlStr) {
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = htmlStr;
  // 遍历所有p标签
  tempContainer.querySelectorAll('p').forEach(pEl => {
    // 匹配仅包含img（可选被a标签包裹）的p标签
    const innerContent = pEl.innerHTML.trim();
    if (/^(<a[^>]*>)?\s*<img[^>]*>\s*(<\/a>)?$/i.test(innerContent)) {
      // 用内部节点替换外层p标签
      pEl.replaceWith(...pEl.childNodes);
    }
  });
  return tempContainer.innerHTML;
}

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