Проверка правильности URL-адреса jQuery Youtube с регулярным выражением

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

В любом теле есть выражение JavaScript Regular для проверки строки URL VIDEO YouTube, указанной ниже. Просто хочу знать, где может быть такой 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');
}

Ответы

Ответ 1

^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+)?$

Ответ 2

ULTIMATE YOUTUBE REGEX

Выбор вишни

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

/**
 * JavaScript function to match (and return) the video Id 
 * of any valid Youtube Url, given as input string.
 * @author: Stephan Schmitz <[email protected]>
 * @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;
}

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

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

  • не соответствует идентификатору видео, содержащему тире (-),
  • не проверяет длину id (v=aa и v=aaaaaaaaaaaaaaaaaa return to valid),
  • и не поддерживает защищенные URL-адреса вообще (http s://youtube.com/watch? valid_params)

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

^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: Конечное регулярное выражение

Затем меня попросили добавить поддержку "специального случая"; короткие URL-адреса youtu.be. Первоначально я не добавлял их, поскольку это не было частью вопроса. Однако теперь я обновил свой ответ с помощью всех возможных "особых случаев". Это означает, что я не только добавил поддержку ссылок 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>

Без схемы с субдоменом (Domain: youtu.be, Path:/)

www.youtu.be/<video:id>

С помощью схемы HTTP без субдомена (Domain: youtu.be, Path:/)

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

С помощью схемы и поддомена HTTP (Domain: youtu.be, Path:/)

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

С помощью схемы HTTPS без субдомена (Domain: youtu.be, Path:/)

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

С помощью схемы HTTPS и субдомена (Domain: youtu.be, Path:/)

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

Без схемы и субдомена (Domain: youtube.com, Path:/embed)

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

Без схемы с субдоменом (Domain: youtube.com, Path:/embed)

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

С помощью схемы HTTP без субдомена (Domain: youtube.com, Path:/embed)

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

С помощью схемы и поддомена HTTP (Domain: youtube.com, Path:/embed)

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

С помощью схемы HTTPS без субдомена (Domain: youtube.com, Path:/embed)

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

С помощью схемы HTTPS и поддомена (Domain: youtube.com, Path:/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

Без схемы с субдоменом (Domain: youtube.com, Path:/v)

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

С помощью схемы HTTP без субдомена (Domain: youtube.com, Path:/v)

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

С помощью схемы и поддомена HTTP (Domain: youtube.com, Path:/v)

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

С помощью схемы HTTPS без субдомена (Domain: youtube.com, Path:/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, Путь:/смотреть)

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, Путь:/смотреть)

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 без субдомена (Domain: youtube.com, Path:/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, путь:/смотреть)

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, Путь:/смотреть)

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, Путь:/смотреть)

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 <[email protected]>
 * @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">

Ответ 3

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

Ответ 4

@eyecatchup ubove имеет excelent regex, но с помощью 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+)?$/

Ответ 5

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

  • Добавить поддержку домена m.youtube.com
  • Добавить поддержку домена 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

Ответ 6

function get_youtube_video_id_from_url(url){
    var code = url.match(/v=([^&#]{5,})/)
    return (typeof code[1] == 'string') ? code[1] : false;
}

Ответ 7

function validYT(url) {
  var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/;
  return (url.match(p)) ? RegExp.$1 : false;
}