16

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.

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.

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:

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

or

http://youtu.be/t-ZRX8984sc

2 Answers 2

33

This regex will pick up the URLs and replace them with the embed markup (just an iframe according to what YouTube currently outputs).

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.

However, this can mangle things such as event handlers attached with old school methods.

It is a bit more complicated, but the best way 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.

9
  • Alex, that works! One problem, the WYSIWYG editor likes to add divs and br's right up against the url the user posts. It still creates the embed, but adds the div or br onto the video id. Are the youtube video id's always the same length? Perhaps the regex could match to a certain length?
    – Chaddeus
    Aug 24, 2011 at 0:33
  • 1
    @Chad Are, got it. Try putting a word boundary at the end \b or using a character range like [\w-].
    – alex
    Aug 24, 2011 at 0:37
  • 1
    This doesn't account for other URL parameters, would you prefer an edit or a new answer? Please see here. +1 either way, thanks! Apr 16, 2012 at 16:15
  • 1
    the match should read: var matches = /(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?([^& \n]+)/g.exec(this.data) since match() doesn't capture regex groups
    – iBobo
    May 23, 2013 at 10:12
  • 2
    Thanks, I'm using this for NodeBB's YouTube plugin (github.com/psychobunny/nodebb-plugin-youtube) I modified this slightly to work with https links as well: var matches = this.data.match(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g); Nov 20, 2013 at 3:09
4
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);

Ensure proper operation at the organization of WYSIWYG editor

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.