p标签包含table标签时jQuery转换异常问题咨询

安全阿岳

2026-6-22

问题：<p>标签包裹<table>后解析结构异常的原因与解决办法

原始HTML文本

<p>
  <span>
    <table>
      <tbody>
        <tr>
          <td>
            <figure></figure>
          </td>
        </tr>
      </tbody>
    </table>
  </span>
  <br>
</p>

执行的jQuery代码

let string = "<p><span><table><tbody><tr><td><figure></figure></td></tr></tbody></table></span><br></p>";
let html = $.parseHTML("<root>" + string + "</root>");
let strHtml = $(html).html();
console.log(strHtml);

控制台输出结果

<p>
  <span></span>
</p>
<table>
  <tbody>
    <tr>
      <td>
        <figure></figure>
      </td>
    </tr>
  </tbody>
</table>
<br>
<p></p>

可见<table>标签被移出<p>标签，且<table>前后出现空<p>标签，请问该现象是否正常？有无解决办法？

回答

1. 该现象完全正常

这是HTML规范的强制约束导致的：<p>属于短语内容容器，只能包含行内元素（如<span>、<br>），不能嵌套块级元素（如<table>、<div>这类）。

浏览器（包括jQuery的$.parseHTML依赖的DOM解析器）遇到不符合规范的嵌套时，会自动修正结构：

解析到<p>内部的<table>时，会立即闭合当前<p>；
解析完<table>后，为了补全原<p>的闭合逻辑，会自动生成一个空<p>；
原<p>内的<span>因为没有包裹块级元素，会被保留在第一个<p>中。

2. 解决办法

根据需求不同，有两种可行方案：

方案一：替换<p>为合法块级容器
把外层<p>换成<div>这类允许嵌套块级元素的容器，解析后结构会完全保留：

<div>
  <span>
    <table>
      <tbody>
        <tr>
          <td>
            <figure></figure>
          </td>
        </tr>
      </tbody>
    </table>
  </span>
  <br>
</div>

方案二：直接操作字符串（无需DOM解析场景）
如果只是需要保留原始HTML结构、不需要转为DOM节点，跳过$.parseHTML解析步骤，直接输出字符串即可：
```
let string = "<p><span><table><tbody><tr><td><figure></figure></td></tr></tbody></table></span><br></p>";
console.log(string);
```