Проверка URL jQuery Youtube с помощью регулярных выражений - PullRequest
Новая
       27

Проверка URL jQuery Youtube с помощью регулярных выражений

39 голосов
/ 03 июня 2010

Я знаю, что здесь ответили на множество вопросов https://stackoverflow.com/questions/tagged/youtube+regex,, но я не смог найти вопрос, похожий на меня.

Любое тело имеет регулярное выражение JavaScript для проверки строки URL-адреса YouTube VIDEO, указанной ниже. Просто хочу узнать, где такой URL возможен 

http://www.youtube.com/watch?v=bQVoAWSP7k4
http://www.youtube.com/watch?v=bQVoAWSP7k4&feature=popular
http://www.youtube.com/watch?v=McNqjYiFmyQ&feature=related&bhablah
http://youtube.com/watch?v=bQVoAWSP7k4

- обновление 1-- - обновление 2 -

Этот работал почти нормально, но не удалось для URL http://youtube.com/watch?v=bQVoAWSP7k4 

var matches = $('#videoUrl').val().match(/http:\/\/(?:www\.)?youtube.*watch\?v=([a-zA-Z0-9\-_]+)/);
if (matches) {
    alert('valid');
} else {
    alert('Invalid');
}

Ответы [ 7 ]

178 голосов
/ 25 апреля 2012

ULTIMATE YOUTUBE REGEX

Сбор вишни

Поскольку объяснение становится все длиннее и длиннее, я помещаю окончательный результат вверху. Не стесняйтесь копировать + вставлять, и продолжайте свой путь. Для подробного объяснения прочитайте «полный рассказ» ниже. 

/**
 * JavaScript function to match (and return) the video Id 
 * of any valid Youtube Url, given as input string.
 * @author: Stephan Schmitz <eyecatchup@gmail.com>
 * @url: https://stackoverflow.com/a/10315969/624466
 */
function ytVidId(url) {
  var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
  return (url.match(p)) ? RegExp.$1 : false;
}

Полная история

Регулярное выражение Амаргоша выглядит хорошо, на первый взгляд. Но это:

  1. не соответствует идентификаторам видео, которые содержат тире (-),
  2. не проверяет длину идентификатора (v=aa и v=aaaaaaaaaaaaaaaaaa возвращаются, чтобы быть действительными),
  3. и не соответствует защищенным URL-адресам вообще (http s : //youtube.com/watch? Valid_params)

Чтобы соответствовать https, символу тире и проверять длину идентификатора, это было мое первоначальное предложение относительно модифицированной версии регулярного выражения Амаргоша:

^https?:\/\/(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$

ОБНОВЛЕНИЕ 1: URL-адреса и строки

После того, как я разместил вышеупомянутый шаблон, меня спросили: "Что, если URL похож на это;
youtube.com/watch?gl=US&hl=en-US&v=bQVoAWSP7k4 "?

Прежде всего, обратите внимание, что это вовсе не URL . URL-адреса, соответствующие RFC должны начинаться со схемы! ;)

В любом случае, чтобы соответствовать любой строке , которая указывает на ссылку на видео YouTube, я обновил свой ответ, чтобы исключить требуемую схему URL. Итак, мое второе предложение было следующим:

^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$

ОБНОВЛЕНИЕ 2: окончательное регулярное выражение

Тогда меня попросили добавить поддержку «особого случая»; youtu.be короткие URL. Первоначально я не добавлял их, поскольку это не было частью вопроса. Однако теперь я обновил свой ответ: все возможные "особые случаи" . Это означает, что я добавил не только поддержку ссылок youtu.be, но и пути запросов "/ v" и "/embed".

Итак, позвольте мне представить: мое последнее и окончательное регулярное выражение на Youtube:

^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$

Какие строки совпадают?

Теперь этот шаблон будет работать для любых строк, отформатированных следующим образом:

Без схемы и субдомена (Домен: youtu.be, Путь: /) 

youtu.be/<video:id>

Без схемы, с поддоменом (Домен: youtu.be, Путь: /) 

www.youtu.be/<video:id>

С HTTP-схемой, без поддоменов (домен: youtu.be, путь: /) 

http://youtu.be/<video:id>

С HTTP-схемой и поддоменом (домен: youtu.be, путь: /) 

http://www.youtu.be/<video:id>

С использованием схемы HTTPS, без субдомена (домен: youtu.be, путь: /) 

https://youtu.be/<video:id>

Со схемой HTTPS и поддоменом (домен: youtu.be, путь: /) 

https://www.youtu.be/<video:id>

Без схемы и субдомена (Домен: youtube.com, Путь: / embed) 

youtube.com/embed/<video:id>   
youtube.com/embed/<video:id>&other_params

Без схемы, с поддоменом (Домен: youtube.com, Путь: / embed) 

www.youtube.com/embed/<video:id>   
www.youtube.com/embed/<video:id>&other_params

С HTTP-схемой, без субдомена (домен: youtube.com, путь: / embed) 

http://youtube.com/embed/<video:id>   
http://youtube.com/embed/<video:id>&other_params

С HTTP-схемой и поддоменом (домен: youtube.com, путь: / embed) 

http://www.youtube.com/embed/<video:id>   
http://www.youtube.com/embed/<video:id>&other_params

С HTTPS-схемой, без субдомена (Домен: youtube.com, Путь: / embed) 

https://youtube.com/embed/<video:id>   
https://youtube.com/embed/<video:id>&other_params

со схемой HTTPS и поддоменом (домен: youtube.com, путь: / embed) 

https://www.youtube.com/embed/<video:id>   
https://www.youtube.com/embed/<video:id>&other_params

Без схемы и субдомена (Домен: youtube.com, Путь: / v) 

youtube.com/v/<video:id>   
youtube.com/v/<video:id>&other_params

Без схемы, с поддоменом (Домен: youtube.com, Путь: / v) 

www.youtube.com/v/<video:id>   
www.youtube.com/v/<video:id>&other_params

С HTTP-схемой, без субдомена (домен: youtube.com, путь: / v) 

http://youtube.com/v/<video:id>   
http://youtube.com/v/<video:id>&other_params

С HTTP-схемой и поддоменом (домен: youtube.com, путь: / v) 

http://www.youtube.com/v/<video:id>   
http://www.youtube.com/v/<video:id>&other_params

С использованием схемы HTTPS, без субдомена (домен: youtube.com, путь: / v) 

https://youtube.com/v/<video:id>   
https://youtube.com/v/<video:id>&other_params

Со схемой HTTPS и поддоменом (домен: youtube.com, путь: / v) 

https://www.youtube.com/v/<video:id>   
https://www.youtube.com/v/<video:id>&other_params

Без схемы и субдомена (Домен: youtube.com, Путь: / watch) 

youtube.com/watch?v=<video:id>   
youtube.com/watch?v=<video:id>&other_params   
youtube.com/watch?other_params&v=<video:id> 
youtube.com/watch?other_params&v=<video:id>&more_params

Без схемы, с поддоменом (Домен: youtube.com, Путь: / watch) 

www.youtube.com/watch?v=<video:id>   
www.youtube.com/watch?v=<video:id>&other_params   
www.youtube.com/watch?other_params&v=<video:id>  
www.youtube.com/watch?other_params&v=<video:id>&more_params

С использованием схемы HTTP, без субдомена (домен: youtube.com, путь: / watch) 

http://youtube.com/watch?v=<video:id>   
http://youtube.com/watch?v=<video:id>&other_params   
http://youtube.com/watch?other_params&v=<video:id>   
http://youtube.com/watch?other_params&v=<video:id>&more_params

С HTTP-схемой и поддоменом (домен: youtube.com, путь: / watch) 

http://www.youtube.com/watch?v=<video:id>   
http://www.youtube.com/watch?v=<video:id>&other_params   
http://www.youtube.com/watch?other_params&v=<video:id>   
http://www.youtube.com/watch?other_params&v=<video:id>&more_params

С HTTPS-схемой, без субдомена (домен: youtube.com, путь: / watch) 

https://youtube.com/watch?v=<video:id>   
https://youtube.com/watch?v=<video:id>&other_params   
https://youtube.com/watch?other_params&v=<video:id>   
https://youtube.com/watch?other_params&v=<video:id>&more_params

Со схемой HTTPS и поддоменом (домен: youtube.com, путь: / watch) 

https://www.youtube.com/watch?v=<video:id>   
https://www.youtube.com/watch?v=<video:id>&other_params   
https://www.youtube.com/watch?other_params&v=<video:id>
https://www.youtube.com/watch?other_params&v=<video:id>&more_params

ФУНКЦИОНАЛЬНОЕ ИСПОЛЬЗОВАНИЕ

Самый простой способ использовать шаблон - заключить его в такую ​​функцию, как эта: 

/**
 * JavaScript function to match (and return) the video Id
 * of any valid Youtube Url, given as input string.
 * @author: Stephan Schmitz <eyecatchup@gmail.com>
 * @url: https://stackoverflow.com/a/10315969/624466
 */
function ytVidId(url) {
  var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
  return (url.match(p)) ? RegExp.$1 : false;
}

// for example snippet only!
document.body.addEventListener('click', function(e) {
    if (e.target.className == 'yt-url' && 'undefined' !== e.target.value) {
        var ytId = ytVidId(e.target.value);
        alert(e.target.value + "\r\nResult: " + (!ytId ? 'false' : ytId));
    }
}, false);
<!-- Click the buttons to probe URLs -->
<input type="button" value="https://www.youtube.com/watch?v=p-e2G_VcTms&feature=g-logo&context=G29aead6FOAAAAAAABAA" class="yt-url">
<input type="button" value="https://www.youtube.com/latest" class="yt-url">

Если тип значения результата функции должен быть логическим значением, просто замените RegExp.$1 на true. Вот и все.

Последнее замечание о длине видео идентификатора : Кто-то спросил, имеют ли идентификаторы фиксированную длину 11 символов? а если это может измениться в будущем?

Лучшим ответом на этот вопрос, вероятно, является также единственное "официальное" утверждение, которое я нашел здесь и которое говорит: "Я не вижу нигде в документации, где мы официально использовать стандартную длину 11 символов для идентификаторов видео YouTube. Это одна из тех вещей, где у нас есть текущая реализация, и она может оставаться такой же до бесконечности. Но мы не предлагаем никаких официальных обязательств по этому поводу, поэтому действуйте по своему усмотрению риск. "

20 голосов
/ 03 июня 2010 
^http:\/\/(?:www\.)?youtube.com\/watch\?v=\w+(&\S*)?$

//if v can be anywhere in the query list

^http:\/\/(?:www\.)?youtube.com\/watch\?(?=.*v=\w+)(?:\S+)?$
4 голосов
/ 30 июня 2010

Нельзя сопоставить id-часть с \ w +, так как она не содержит тире (-). [a-zA-Z0-9 _-] + было бы более правильным.

2 голосов
/ 28 ноября 2013

@ eyecatchup ubove имеет превосходное регулярное выражение, но с помощью regexper.com я видел, что его регулярное выражение передаст любой URL-адрес YouTube, где параметр? v имеет значение любого слова или - знак повторяется 11 раз. Но YouTube специально ограничивает идентификатор видео 11 символами, поэтому исправление его регулярного выражения будет 

/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((.|-){11})(?:\S+)?$/

сравните визуализацию своего регулярного выражения 

http://www.regexper.com/#/%5E%28?:https?:%5C/%5C/%29?%28?:www%5C.%29?%28?:youtu%5C.be%5C/%7Cyoutube%5C.com%5C/%28?:embed%5C/%7Cv%5C/%7Cwatch%5C?v=%7Cwatch%5C?.%2b&v=%29%29%28%28%5Cw%7C-%29%7B11%7D%29%28?:%5CS%2b%29?$/

и мое исправление 

http://www.regexper.com/#%2F%5E(%3F%3Ahttps%3F%3A%5C%2F%5C%2F)%3F(%3F%3Awww%5C.)%3F(%3F%3Ayoutu%5C.be%5C%2F%7Cyoutube%5C.com%5C%2F(%3F%3Aembed%5C%2F%7Cv%5C%2F%7Cwatch%5C%3Fv%3D%7Cwatch%5C%3F.%2B%26v%3D))((%5Ba-zA-Z0-9%5D%7C-)%7B11%7D)(%3F%3A%5CS%2B)%3F%24%2F

как изменение предела из 11 символов, изменяющегося в будущем, тогда текущее регулярное выражение будет означать, что любое слово или - должно быть повторено ровно 11 раз, к этому моему исправлению будет 

/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11,})(?:\S+)?$/
1 голос
/ 29 мая 2015

Улучшение для регулярного выражения @ eyecatchUp:

  1. Добавить поддержку домена m.youtube.com
  2. Добавить поддержку домена youtube-nocookie.com от @ Nijikokun 
^(?:https?:\/\/)?(?:(?:www|m)\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$

Regexper: 

http://regexper.com/#%5E(%3F%3Ahttps%3F%3A%5C%2F%5C%2F)%3F(%3F%3A(%3F%3Awww%7Cm)%5C.)%3F(%3F%3Ayoutu%5C.be%5C%2F%7Cyoutube(%3F%3A-nocookie)%3F%5C.com%5C%2F(%3F%3Aembed%5C%2F%7Cv%5C%2F%7Cwatch%5C%3Fv%3D%7Cwatch%5C%3F.%2B%26v%3D))((%5Cw%7C-)%7B11%7D)(%3F%3A%5CS%2B)%3F%24
0 голосов
/ 07 октября 2013 
function validYT(url) {
  var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/;
  return (url.match(p)) ? RegExp.$1 : false;
}
0 голосов
/ 28 мая 2013 
function get_youtube_video_id_from_url(url){
    var code = url.match(/v=([^&#]{5,})/)
    return (typeof code[1] == 'string') ? code[1] : false;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...