Question

我正在尝试使用正则表达式输入youtube网址中的视频ID。

以下是我正在使用的正则表达式：

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

但它会以

的形式回归

Uncaught SyntaxError：无效的正则表达式：//^.*(youtu.be/|v/|u/w/|embed/|watch?v=|&v=|?v=)([^#&?]*).*//：无需重复

为什么？

以下是我的代码：

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

}

Answer 1

从错误消息中可以看出，代码以某种方式生成的正则表达式无效：

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

这样做的原因是你将整个正则表达式文字放在一个字符串中：

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

这不起作用，部分原因是\也是字符串文字中的转义章程，因此当您编写&v=|\?v=时，传递给正则表达式引擎的内容是&v=|?v=（和{{ 1}}无效）。

只需使用正则表达式文字：

|?

无效的正则表达式 - 无需重复 - Javascript

1 个答案: