包裹),但会增加复杂度; 始终验证 fragment 内容,避免因 HTML 错误导致静默失败;
不要对用户输入直接使用 replace + 正则处理 HTML——本例因数据来源可控且结构简单,属安全特例。
总之,面对受限的 HTML 片段,理解规范约束比强行绕过更重要。用 createContextualFragment 配合语义修复,是兼顾简洁性与可靠性的最佳实践。
let responseText = 'Text Content| Cell |
';
// 安全包裹:仅匹配顶层 标签(避免误伤嵌套场景)
responseText = responseText
.replace(/
)/gi, '');
const fragment = document.createRange().createContextualFragment(responseText);
// 现在可正常查询表格元素
console.log(fragment.querySelector('tr')); //
| Cell |
console.log(fragment.querySelector('td').textContent); // "Cell"
console.log(fragment.querySelectorAll('div').length); // 1