Javascript 如何在页面加载时使用 jQuery 将 youtube 视频 url 转换为 iframe 嵌入代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7168987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to convert a youtube video url to the iframe embed code, using jQuery on page load?
提问by Chaddeus
I have a WYSIWYG textarea, and sometimes user's may enter a youtube url into the box. On the server side, there are html filters to prevent "harmful" code from being saved.
我有一个所见即所得的文本区域，有时用户可能会在框中输入一个 youtube 网址。在服务器端，有 html 过滤器可以防止保存“有害”代码。
So instead, I'd like to just keep the server code as-is, and run a jQuery document ready event that searches a block of text for a youtube link, and converts it to the iframe embed code.
因此，相反，我只想保持服务器代码原样，并运行一个 jQuery 文档就绪事件，该事件在文本块中搜索 youtube 链接，并将其转换为 iframe 嵌入代码。
I'd imagine it would be regex based, but I'm absolutely horrid with regex's (at some point, I really need to sit down and study them).
我想它会基于正则表达式，但我对正则表达式绝对感到恐惧（在某些时候，我真的需要坐下来研究它们）。
Two types of youtube links:
两种类型的 YouTube 链接：
http://www.youtube.com/watch?v=t-ZRX8984sc
or
或者
http://youtu.be/t-ZRX8984sc
回答by alex
This regex will pick up the URLs and replace them with the embedmarkup (just an iframeaccording to what YouTube currently outputs).
此正则表达式将选取 URL 并将其替换为嵌入标记（仅iframe根据 YouTube 当前输出的内容）。
str.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="420" height="345" src="http://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>');
However, this can mangle things such as event handlers attached with old school methods.
但是，这可能会破坏诸如附有老式方法的事件处理程序之类的东西。
It is a bit more complicated, but the bestway would be work with text nodes only.
它有点复杂，但最好的方法是仅使用文本节点。
That should look something like this...
那应该看起来像这样......
$('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 = $('<iframe width="420" height="345" frameborder="0" allowfullscreen />', {
src: 'http://www.youtube.com/embed/' + matches[1]
});
iframe.insertAfter(this);
$(this).remove();
});
Note that this inserts after the entire text node.
请注意，这会在整个文本节点之后插入。
回答by X-NicON
var yturl= /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?([\w\-]{10,12})(?:&feature=related)?(?:[\w\-]{0})?/g;
var ytplayer= '<iframe width="640" height="360" src="http://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>';
str.replace(yturl, ytplayer);
Ensure proper operation at the organization of WYSIWYG editor
确保 WYSIWYG 编辑器组织中的正确操作
