Regex для извлечения идентификатора домена и видео из URL youtube / vimeo - PullRequest
Новая
       17

Regex для извлечения идентификатора домена и видео из URL youtube / vimeo

12 голосов
/ 04 марта 2012

Я копирую функцию, которая берет URL-адрес YouTube / Vimeo и возвращает сайт, с которого пришло видео (vimeo / YT), а также идентификатор видео.

Вот что у меня есть: http://jsfiddle.net/csjwf/181/

<strong>Result:</strong>
<div id="result"></div>

function parseVideoURL(url) {

    url.match(/^http:\/\/(?:.*?)\.?(youtube|vimeo)\.com\/(watch\?[^#]*v=(\w+)|(\d+)).+$/);
    return {
        provider : RegExp.$1,
        id : RegExp.$1 == 'vimeo' ? RegExp.$2 : RegExp.$3
    }
}

var result = document.getElementById("result");
var video = parseVideoURL("http://www.youtube.com/watch?v=PQLnmdOthmA&feature=feedrec_grec_index");
result.innerHTML = "Provider: " + video.provider + "<br>ID: " + video.id;

var video = parseVideoURL("http://vimeo.com/22080133");

result.innerHTML += "<br>--<br>Provider: " + video.provider + "<br>ID: " + video.id;

Вывод: 

Result:
Provider: youtube
ID: PQLnmdOthmA
--
Provider: vimeo
ID: 2208013

Однако обратите внимание, как для видео vimeo, если URL заканчивается в идентификаторе, последний номер всегда обрезается.Если вы добавите косую черту в конец URL-адреса vimeo, идентификатор будет полностью удален.

Ответы [ 6 ]

14 голосов
/ 04 марта 2012

Для .+$ в конце требуется как минимум один символ после последней цифры, которая записывается в виде строки цифр. Это отрубит одну цифру от того, что захвачено. Есть ли причина, по которой у вас это есть?

Вы можете изменить последний + на * следующим образом: 

/^http:\/\/(?:.*?)\.?(youtube|vimeo)\.com\/(watch\?[^#]*v=(\w+)|(\d+)).*$/

или, что еще лучше, полностью избавьтесь от концевой части, так как она не выглядит так, как нужно: 

/^http:\/\/(?:.*?)\.?(youtube|vimeo)\.com\/(watch\?[^#]*v=(\w+)|(\d+))/

Вот немного более безопасный способ написания вашей функции, которая учитывает любой порядок параметров запроса в URL-адресе YouTube и не помещает в регулярное выражение то, что там не требуется. Код длиннее, но он намного надежнее и гораздо проще добавить больше провайдеров: 

function parseVideoURL(url) {

    function getParm(url, base) {
        var re = new RegExp("(\\?|&)" + base + "\\=([^&]*)(&|$)");
        var matches = url.match(re);
        if (matches) {
            return(matches[2]);
        } else {
            return("");
        }
    }

    var retVal = {};
    var matches;

    if (url.indexOf("youtube.com/watch") != -1) {
        retVal.provider = "youtube";
        retVal.id = getParm(url, "v");
    } else if (matches = url.match(/vimeo.com\/(\d+)/)) {
        retVal.provider = "vimeo";
        retVal.id = matches[1];
    }
    return(retVal);
}

Рабочая версия здесь: http://jsfiddle.net/jfriend00/N2hPj/

3 голосов
/ 08 мая 2014

Вот обновленная версия, которая также работает с URL-адресами youtu.be и youtube.com/embed с использованием кода @jfriend00 и некоторого кода, найденного здесь: РЕГ. JavaScript: Как получить идентификатор видео YouTube из URL?.

РЕДАКТИРОВАТЬ: Обновил мой ответ (и скрипку) с функцией, которая на самом деле работает. : -) 

function parseVideoURL(url) {

    function getParm(url, base) {
            var re = new RegExp("(\\?|&)" + base + "\\=([^&]*)(&|$)");
            var matches = url.match(re);
            if (matches) {
                return(matches[2]);
            } else {
                return("");
            }
        }

        var retVal = {};
        var matches;
        var success = false;

        if ( url.match('http(s)?://(www.)?youtube|youtu\.be') ) {
          if (url.match('embed')) { retVal.id = url.split(/embed\//)[1].split('"')[0]; }
            else { retVal.id = url.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0]; }
            retVal.provider = "youtube";
            var videoUrl = 'https://www.youtube.com/embed/' + retVal.id + '?rel=0';
            success = true;
        } else if (matches = url.match(/vimeo.com\/(\d+)/)) {
            retVal.provider = "vimeo";
            retVal.id = matches[1];
            var videoUrl = 'http://player.vimeo.com/video/' + retVal.id;
            success = true;
        }

      if (success) {
        return retVal;
      }
      else { alert("No valid media id detected"); }
}

И рабочий jsfiddle:http://jsfiddle.net/9n8Nn/3/

Из двух ответов об обмене стеками этот код лучше всего работал для меня в конце.

2 голосов
/ 04 марта 2012

Чтобы упростить ваше регулярное выражение, я бы использовал haystack.indexOf (иглу), чтобы определить, является ли URL vimeo или youtube, а затем применил регулярное выражение для конкретного сайта.Гораздо проще, и позже вы можете добавлять видео сайты без чрезмерного усложнения регулярного выражения.

0 голосов
/ 04 марта 2012

Удалить последнее. и конец соответствия

url.match(/^http:\/\/(?:.*?)\.?(youtube|vimeo)\.com\/(watch\?[^#]*v=(\w+)|(\d+))/);

0 голосов
/ 04 марта 2012

url.match(/^http:\/\/(?:.*?)\.?(youtube|vimeo)\.com\/(watch\?[^#]*v=(\w+).+|(\d+))$/);

0 голосов
/ 04 марта 2012

Последнее число обрезается, потому что в конце вы используете «. +», Что означает «один или несколько символов». Замените + на *, что означает «ноль или более».

...