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-entify iframes。

让我知道它是怎么回事！如果有任何不清楚的地方，这是可以理解的，考虑到我所写的所有这些格式，请告诉我，我会帮助。

PS：我知道很多人不喜欢innerHTML。他们都是三色紫罗兰。

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

1 个答案: