解析包含表格行的 HTML 片段-javascript-IT问答社区-解决你的IT疑问

解析包含表格行的 HTML 片段

Austin Wolff 1月前

我从服务器返回了以下响应。这是一个 html 片段。我想用 DOMParser 解析它，如下所示：let responseText = '

文本内容

抱歉，暂无相关信息

我从服务器返回了以下响应。这是一个 html 片段。我想使用 DOMParser 对其进行解析，如下所示：

let responseText = '<div>Text Content</div><tr><td>Cell</td></tr>';
let doc = new DOMParser().parseFromString(`<body><template>${responseText}</template></body>`, 'text/html');
let fragment = doc.body.firstChild.content;

这里 fragment 运行时的变量包含以下 DOM：

#document-fragment
  <div>Text Content</div>
  Cell

我的问题： 我期望它包含 <tr> ，但它没有。如何更改解析代码以使其正确包含元素？

我不被允许更改回复文本。

帖子版权声明 1、本帖标题：解析包含表格行的 HTML 片段
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Austin Wolff在本站《javascript》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

Simpleton 1月前 0 只看Ta

引用 2楼

DomParser 在解析 HTML 时非常严格。您提供的 HTML 示例不符合规范

以下是需要遵循的规则。
HTML 标准

根据该文件，你不应该 <div> 把 <tr>

这个答案也应该有帮助
创建新的 DOM 元素
Exto Logia 1月前 0 只看Ta

引用 3楼
元素 <tr> 只是 <table> , <thead> , <tbody> 或 <tfoot> 。有关更多信息，请参阅下面 MDN 摘录。

尝试将其包装 <tr> 在 a 中 <table> 并使用 createContextualFragment 。
let responseText = '<div>Text Content</div><tr><td>Cell</td></tr>'; responseText = responseText .replace(/<tr>/, '<table>$0') .replace(/<\/tr>/, '$0</table>'); const fragment = document.createRange().createContextualFragment(responseText); const cellContent = fragment.querySelector('td').innerText; console.log(cellContent); // Cell

.as-console-wrapper { top: 0; max-height: 100% !important; }
看：

MDN ~ : 表格行元素 ~ 技术摘要

允许的父元素 <table> （仅当表没有子 <tbody> 元素时，并且即使这样也只能在任何 <caption> , <colgroup> 、和 <thead> 元素之后）；否则，父元素必须是 <thead> , <tbody> 或 <tfoot>
K C 1月前 0 只看Ta

引用 4楼

- 那么您得到的是一个格式错误的 HTML 结构，很可能需要手动解析它，而不是使用 DOM 解析器（它会像浏览器一样尝试“纠正”结构）。