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

Question

我有一个WYSIWYG textarea,有时用户可以在框中输入youtube url.在服务器端,有html过滤器可以防止"有害"代码被保存.

因此,我希望保持服务器代码不变,并运行jQuery文档就绪事件,搜索youtube链接的文本块,并将其转换为iframe嵌入代码.

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

两种类型的YouTube链接:

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

要么

http://youtu.be/t-ZRX8984sc

Answer 1

此正则表达式将获取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/$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();

});

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