替换字符串中的所有 YouTube / Vimeo iframe 实例答案

【问题标题】：Replace all instances of YouTube / Vimeo iframe in string替换字符串中的所有 YouTube / Vimeo iframe 实例
【发布时间】：2015-04-09 12:23:33
【问题描述】：

我有一个字符串，其中可能包含一个或多个 YouTube 或 Vimeo iframe 实例。我正在寻找一个 javascript 函数来搜索这个字符串，检测 iframe src 中视频的 ID，然后将 iframe 的现有实例替换为包含在 div 中的 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>

我已经尝试将我的大脑包裹在正则表达式中，即使周围有所有示例，我似乎也无法弄清楚如何做到这一点。

谁有解决办法？

【问题讨论】：

你在什么平台上开发？我之前通过检测 Javascript 中的元素并仅访问它的位来完成此操作，但我不知道它是否对您有帮助。
只是普通的香草js。我不能为此使用 jQuery。
在这种情况下，我可以提供帮助。我会尽快发布答案。
太棒了，谢谢@Sipty！

标签： javascript regex iframe youtube

【解决方案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。他们都是三色堇。

【讨论】：