如何在页面加载时使用jQuery将youtubevideourl转换为iframe嵌入代码？

我有一个WYSIWYG textarea，有时用户可以在框中输入youtube url。 在服务器端，有htmlfilter，以防止“有害”代码被保存。

所以相反，我想保持服务器代码不变，并运行一个jQuery文档就绪事件，搜索youtube链接的文本块，并将其转换为iframe嵌入代码。

我想它会以正则表达式为基础，但我对正则表达式非常可怕（在某些时候，我真的需要坐下来研究它们）。

两种类型的YouTube链接：

http://www.youtube.com/watch?v=t-ZRX8984sc 

要么

 http://youtu.be/t-ZRX8984sc 

Answer 1

这个正则表达式将获取URL并用嵌入标记替换它们（根据YouTube目前输出的内容只是一个iframe ）。

 str.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, ''); 

jsFiddle 。

但是，这可能会破坏诸如附带旧学校方法的事件处理程序之类的东西。

它有点复杂，但最好的方法是仅使用文本节点。

应该看起来像这样……

 $('body').contents().each(function() { // Skip non text nodes. if (this.nodeType !== 3) { return true; } // Grab text var matches = this.data.match(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g); if (!matches) { return true; } var iframe = $('', { src: 'http://www.youtube.com/embed/' + matches[1] }); iframe.insertAfter(this); $(this).remove(); }); 

请注意，这将在整个文本节点之后插入。

Answer 2

 var yturl= /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?([\w\-]{10,12})(?:&feature=related)?(?:[\w\-]{0})?/g; var ytplayer= ''; str.replace(yturl, ytplayer); 

确保在WYSIWYG编辑器的组织中正确操作