如何在文本选择范围内获取所有的<img>标签？

Question

我已经找了一段时间，但似乎没有简单的方法来实现这个。jQuery没有任何帮助，它似乎完全缺乏对选择或DOM范围的支持。我希望的东西应该像$.selection.filter('img')这样简单，但似乎只能通过手动枚举范围内的元素和浏览器实现不一致性（尽管ierange在这里有所帮助）才能实现。还有其他捷径吗？

- Vladimir Panteleev

---

很抱歉，这似乎是你需要针对每个浏览器解决的问题... - Assaf Lavie

你需要对标签做什么？修改它们？还是只读取？如果只是读取，那么在innerHTML上进行正则表达式搜索就可以了。 - ariel

Answer 1

var fragment = getSelection().getRangeAt(0).extractContents();

选择中的节点将被移除并返回到一个 DocumentFragment 中，您现在可以像访问任何元素一样访问 fragment 的 childNodes。

- Delan Azabani

---

几点说明：首先，你漏掉了cloneContents()中的括号。其次，变量名有误导性，因为结果对象是一个“文档片段”而不是“范围”。第三，在此片段中的任何图像都将是原始范围中找到的那些图像的克隆品，因此可能无用。第四，这在IE中不起作用。 - Tim Down

@Tim Down，抱歉，有点晚了；）。对于第1、2和3点，我已经修复了你提到的问题（非常感谢）。至于第四点，根据您的IE受众的重要性（企业内部），我可以说“做IE hax”或“那又怎样？” - Delan Azabani

如下所述，extractContents会修改文档，这不是一个理想的副作用。最终我使用了以下代码：var d = document.createElement("div"); d.appendChild(window.getSelection().getRangeAt(0).cloneContents()); var img = $("img", d);。由于我不需要修改元素，我也可以使用bortao的正则表达式建议。 - Vladimir Panteleev

Answer 2

$("img", window.getSelection().getRangeAt(0).extractContents());

不幸的是，您必须使用上述IERange库来支持IE 6/7/8。

值得注意的是：DOM范围将在IE9中实现，并且有关于HTML5中新选择API的讨论

- Josh Stodola

---

似乎不起作用。生成的对象的size()始终为零。此外，extractContents会修改文档（它将Range的内容“移动”到DocumentFragment中）。 - Vladimir Panteleev

Answer 3

它似乎完全缺乏选择或DOM范围的支持。

是的，原因在于IE不支持选择和DOM范围。您可以在IE的非标准“TextRange”对象之上构建一个抽象层，但由于TextRanges公开的接口极其糟糕，所以它很难、很慢、很复杂，足以成为一个完整的库。例如，参见this one。

- bobince

---

OP在问题中提到了IERange。 - Tim Down

嗯，奇怪...我本来以为那里没有！ - bobince

在轻松一点的话题上，这是不是意料之外的？IE支持任何现代技术吗？你好，XHTML？有人在吗？;) - Delan Azabani

IE9支持XHTML！所以我们将能够在十年内使用它。哇哦！ - bobince