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

Question

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

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

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

两种类型的 YouTube 链接:

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

或

http://youtu.be/t-ZRX8984sc

Answer 1

此正则表达式将选取 URL 并将其替换为 embed 标记(根据 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();

});

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