javascript - 检测 DOM 对象是否可以放置在 SPAN 中

Question

我将任意网页的部分（“从字符 X 到字符 Y”）包装在具有以下约束的 SPAN 中：

1. 我不想破坏任何 DOM 标准（例如，我不想将 DIV 包装在 SPAN 中）。
2. 我想尽量减少创建的 SPAN 的数量（所以仅仅转到可能的最低子级别是不够的）。

在修改 DOM 之前，我需要知道给定对象是否可以合法地包含在 SPAN 中。

例如...

if(child instanceof Text) {
 // Wrap in a SPAN!
}
else {
 // Move along
}

特别是，我需要反映有效 SPAN 内容的 JavaScript 类列表、可能能够提供帮助的方法（jQuery 或 vanilla JS），或者可以实现类似目标的其他解决方案。

Answer 1

span唯一允许phrasing -content。我建议建立一个包含构成短语内容集合的所有元素的小表格并对此进行测试。

这不是一个完美的解决方案，因为一些段落内元素，如a标签也可以包含非短语内容。您可能需要递归地评估元素的内容，确保它们在它们自身中不包含任何内容，然后才允许将它们包装在span标签中。