Как преобразовать URL-адрес YouTube в код вставки iframe, используя jQuery для загрузки страницы?

У меня есть текстовое поле WYSIWYG, и иногда пользователь может ввести URL-адрес youtube в поле. На стороне сервера есть html-фильтры, которые предотвращают сохранение "вредного" кода.

Поэтому вместо этого я хочу просто сохранить код сервера как есть и запустить событие готовности документа jQuery, которое ищет блок текста для ссылки на youtube и преобразует его в код вставки iframe.

Я бы предположил, что это будет regex based, но я абсолютно ужасен с регулярным выражением (в какой-то момент мне действительно нужно сесть и изучить их).

Два типа ссылок на YouTube:

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

или

http://youtu.be/t-ZRX8984sc

Ответ 1

Это регулярное выражение будет отображать URL-адреса и заменять их разметкой embed (только 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();

});

Обратите внимание, что это вставляет после всего текста node.

Ответ 2

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);

Обеспечьте правильную работу при организации редактора WYSIWYG