javascript - 用字符串替换所有YouTube/Vimeo iframe实例

Question

我有一个字符串，其中可能包含一个或多个YouTube或Vimeo iframe实例。我正在寻找一个JavaScript函数，可搜索该字符串，检测iframe src中视频的ID，然后用包裹在div中的iframe替换iframe的现有实例。

因此输入为:

<p>Interesting text, great, fantastic.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/EShfC-uhlv8" frameborder="0" allowfullscreen></iframe>
<p>Another great thing</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/umiN04tPpl0" frameborder="0" allowfullscreen></iframe>

输出:

<p>Interesting text, great, fantastic.</p>
<div class="iframe-container">
  <iframe src="https://www.youtube.com/embed/EShfC-uhlv8?html5=1" frameborder="0" allowfullscreen></iframe>
</div>
<p>Another great thing</p>
<div class="iframe-container">
  <iframe src="https://www.youtube.com/embed/umiN04tPpl0?html5=1" frameborder="0" allowfullscreen></iframe>
</div>

即使围绕着所有示例，我都试图将我的大脑包裹在regexp上，但我似乎还是不知道该怎么做。

有人有解决方案吗？

Answer 1

直接复制/粘贴我将要引用的工作会给我带来麻烦，因此希望对方法进行解释就足够了。 (如果不是，请告诉我。)

假设您不了解iframe的名称，只需放下 getElementsByTagName(iframe) ，然后使用从iframe收集所有信息的循环遍历结果数组，即可使用 innerHTML 来创建替换元素。此替换元素将使您将时髦的iframe包裹在所需的任何内容中。最后，我们使用 replaceChild(replacement, original) ，您已设置好。

例如，这是我创建替换元素的方式:

var replacement = document.createElement("replacement");
replacement.innerHTML = 
"<div class=iframe-container>" 
    + "<iframe src=https://www.youtube.com/embed/EShfC-uhlv8?html5=1 frameborder=0 allowfullscreen></iframe>"
+ "</div>"

用更简单的话来说-编写代码，就像在.html文件中一样。

您可以做的另一件棘手的事情是将ID添加到所有元素中，然后使用 getElementById 遍历它们，但这似乎是很多额外的工作，除非您是正在开发页面并可以ID验证iframe的人。

让我知道事情的后续!如果有什么不清楚的地方，那是可以理解的，考虑到我以所有这些格式编写的格式，请让我知道，我会帮助您。

PS:我知道这里很多人不喜欢 innerHTML。他们都是紫罗兰。