-1

I am trying to get Video ID from entered youtube url with regular expression.

Below is the Regular expression I am using :

/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/

But It's coming back as

Uncaught SyntaxError: Invalid regular expression: //^.*(youtu.be/|v/|u/w/|embed/|watch?v=|&v=|?v=)([^#&?]*).*//: Nothing to repeat

Why?

Below is my code:

function PreviewVideo() {
var self = this;
this.links = $(".videoPreview");

this.bindEvents = function () {
    self.links.on("click", self.fireModal);
};
this.getYoutubeId = function (url) {

    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match && match[2].length == 11) {
        return match[2];
    } else {
        return false;
    }
};
this.fireModal = function (e) {
    e.preventDefault;
    var $this = $(this);
    var videoField = $this.data("video");
    var videoURL = $(videoField).val();

    if (videoURL === "") {
        $("body").append(UI.toast({level: "danger", time: 5000, html: "<h4>No video URL found</h4>", dismissable: true, position: "top-right"}));
    } else {
        var videoID = self.getYoutubeId(videoURL);
        if (videoID) {
            UI.modal({title: "Video preview", body: '<iframe width="560" height="315" src="//www.youtube.com/embed/' + videoID + '" frameborder="0" allowfullscreen></iframe>'})
        } else {
            $("body").append(UI.toast({level: "danger", time: 5000, html: "<h4>Invalid URL</h4>", dismissable: true, position: "top-right"}));
        }
    }
};

this.bindEvents();

}

Krupali Chavda
  • 19
  • 1
  • 2
  • the `/` after `youtube.be` is considered the end of the regex. You have to escape it. – Fabian Klötzl Mar 06 '17 at 17:26
  • @FabianKlötzl: It was escaped, the code just wasn't marked up properly. – T.J. Crowder Mar 06 '17 at 17:27
  • Welcome to Stack Overflow! Please take the [tour], have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) Please show your **actual code** creating the regular expression. Since you didn't use correct formatting when posting your question, we can't be sure that the above really is what you're using. – T.J. Crowder Mar 06 '17 at 17:28
  • 1
    The expression in the error message looks different than the one you posted. Are you sure you are using that one? Is the expression contained in a string literal my any chance? It look like you are doing `new RegExp('/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/')` (the double slashes in the error message and the missing escape characters are a strong indicator for that). That won't work. You should be using a regular expression literal instead: `/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/`. – Felix Kling Mar 06 '17 at 17:28
  • Re formatting: When you were asking your question, there was a big orange **How to Format** box to the right of the text area with useful info, an entire toolbar of formatting aids, a **[?]** button giving formatting help, *and* a preview area located between the text area and the Post Your Question button (so that you'd have to scroll past it to find the button, to encourage you to look at it) showing what your post would look like when posted. Making your post clear, and demonstrating that you took the time to do so, improves your chances of getting good answers. – T.J. Crowder Mar 06 '17 at 17:29
  • This is the code snippet: – Krupali Chavda Mar 06 '17 at 17:30
  • this.getYoutubeId = function (url) { var regExp = "/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/"; var match = url.match(regExp); if (match && match[2].length == 11) { return match[2]; } else { return false; } }; – Krupali Chavda Mar 06 '17 at 17:30
  • @KrupaliChavda: See my previous comment. Remove the quotation marks. Use a *regex literal* not a string. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions to learn more about regular expressions in JavaScript. – Felix Kling Mar 06 '17 at 17:31
  • I did try that before Felix, but then it's error on "|" symbol, "Uncaught SyntaxError: Unexpected token |" – Krupali Chavda Mar 06 '17 at 17:35
  • @KrupaliChavda: Then you must have some other error. `/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^‌​#\&\?]*).*/;` is a valid regex literal. Maybe you forget to escape the first `/` ? – Felix Kling Mar 06 '17 at 17:36
  • Escaping first character didn't make any difference, same error for | – Krupali Chavda Mar 06 '17 at 17:42
  • Again, the expression you have posted is correct as it is. If it doesn't work for you then you need to post a *complete* example. We can only help you so much with the information you provide. See [mcve] for guidance. – Felix Kling Mar 06 '17 at 18:29

1 Answers1

2

As you can see from the error message, the regular expression that is somehow produced by your code is not valid:

//^.*(youtu.be/|v/|u/w/|embed/|watch?v=|&v=|?v=)([^#&?]*).*//

The reason for this is that you put the whole regex literal inside a string:

var regExp = "/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^‌​#\&\?]*).*/";

This cannot work, partly because \ is also the escape charter in string literals, so when you write &v=|\?v=, what is passed to the regex engine is &v=|?v= (and |? is not valid).

Simply use the regex literal:

var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^‌​#\&\?]*).*/;
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143