如何在页面加载时使用jQuery将youtube视频url转换为iframe嵌入代码

How to convert a youtube video url to the iframe embed code, using jQuery on page load?

本文关键字：转换 url 视频 youtube iframe 代码 jQuery 加载      更新时间：2023-09-26

我有一个所见即所得的文本区域，有时用户可能会在框中输入youtube url。在服务器端，有html过滤器来防止；有害的"；代码无法保存。

因此，我只想保持服务器代码的原样，并运行一个jQuery文档就绪事件，该事件在一段文本中搜索youtube链接，并将其转换为iframe嵌入代码。

我想它会是基于正则表达式的，但我对正则表达式非常反感(在某个时候，我真的需要坐下来研究它们(。

两种类型的youtube链接：

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

或

http://youtu.be/t-ZRX8984sc

此正则表达式将拾取URL并将其替换为嵌入标记(根据YouTube当前输出的内容，仅为iframe(。

str.replace(/(?:http:'/'/)?(?:www'.)?(?:youtube'.com|youtu'.be)'/(?:watch'?v=)?(.+)/g, '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');

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 = $('<iframe width="420" height="345" frameborder="0" allowfullscreen />', {
        src: 'http://www.youtube.com/embed/' + matches[1]
    });
    iframe.insertAfter(this);
    $(this).remove();
});

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

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/$1" frameborder="0" allowfullscreen></iframe>';
str.replace(yturl, ytplayer);

确保所见即所得编辑器组织的正确操作

相关文章：