8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

解析包含表格行的 HTML 片段

Austin Wolff 1月前

23 0

我从服务器返回了以下响应。这是一个 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)
  • DomParser 在解析 HTML 时非常严格。您提供的 HTML 示例不符合规范

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

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

    这个答案也应该有帮助
    创建新的 DOM 元素

  • 元素 <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 解析器(它会像浏览器一样尝试“纠正”结构)。

返回
作者最近主题: