Saltar al contenido

Validación de URL de Youtube de jQuery con expresiones regulares

Solución:

EL ÚLTIMO REGEX DE YOUTUBE

cosecha de la cereza

Debido a que la explicación es cada vez más larga, coloco el resultado final en la parte superior. Siéntase libre de copiar + pegar y seguir su camino. Para obtener una explicación detallada, lea “la historia completa” debajo.

/**
 * 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;
}

La historia completa

La expresión regular de Amarghosh se ve bien, a primera vista. Pero:

  1. no coincide con los ID de video que incluyen guiones (-),
  2. no valida la longitud de la identificación (v=aa y v=aaaaaaaaaaaaaaaaaa volver a ser válido),
  3. y no coincide en absoluto con las URL seguras (https: //youtube.com/watch? valid_params)

Para que coincida con https, el carácter de guión y para validar la longitud de la identificación, esta fue mi sugerencia inicial de una versión modificada de la expresión regular de Amarghosh:

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

ACTUALIZACIÓN 1: URL frente a cadenas

Después de publicar el patrón anterior, me preguntaron: “¿Y si el URL es así;
youtube.com/watch?gl=US&hl=en-US&v=bQVoAWSP7k4“?

En primer lugar, tenga en cuenta que este no es un URL en absoluto. ¡Las URL compatibles con RFC deben comenzar con el esquema! 😉

De todos modos, para que coincida con cualquier tipo de cuerda que indica que se refiere a un video de YouTube, actualicé mi respuesta para excluir el esquema de URL que se requiere. Entonces mi segunda sugerencia fue la siguiente:

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

ACTUALIZACIÓN 2: La expresión regular definitiva

Luego se me pidió que agregara soporte para un “caso especial”; los YouTube URL cortas. Inicialmente no agregué estos, ya que no era específicamente parte de la pregunta. Sin embargo, actualicé mi respuesta ahora con todos posible “casos especiales”. Esto significa que no solo he agregado soporte para enlaces youtu.be, sino también las rutas de solicitud “/ v” y “/ embed”.

Entonces, puedo presentar: Mi expresión regular de Youtube final y definitiva:

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

¿Qué cadenas coinciden?

Ahora, este patrón funcionará para cualquier cadena, con el siguiente formato:

Sin esquema y subdominio (Dominio: youtu.be, Ruta: /) 

youtu.be/<video:id>

Sin esquema, con subdominio (Dominio: youtu.be, Ruta: /) 

www.youtu.be/<video:id>

Con esquema HTTP, sin subdominio (Dominio: youtu.be, Ruta: /)

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

Con esquema HTTP y subdominio (Dominio: youtu.be, Ruta: /)

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

Con esquema HTTPS, sin subdominio (Dominio: youtu.be, Ruta: /)

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

Con esquema HTTPS y subdominio (Dominio: youtu.be, Ruta: /)

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

Sin esquema y subdominio (Dominio: youtube.com, Ruta: / incrustar) 

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

Sin esquema, con subdominio (Dominio: youtube.com, Ruta: / embed) 

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

Con esquema HTTP, sin subdominio (Dominio: youtube.com, Ruta: / embed)

http://youtube.com/embed/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Con esquema HTTP y subdominio (dominio: youtube.com, ruta: / embed)

http://www.youtube.com/embed/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Con esquema HTTPS, sin subdominio (Dominio: youtube.com, Ruta: / embed)

https://youtube.com/embed/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Con esquema HTTPS y subdominio (dominio: youtube.com, ruta: / embed)

https://www.youtube.com/embed/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Sin esquema y subdominio (Dominio: youtube.com, Ruta: / v) 

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

Sin esquema, con subdominio (Dominio: youtube.com, Ruta: / v) 

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

Con esquema HTTP, sin subdominio (Dominio: youtube.com, Ruta: / v)

http://youtube.com/v/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Con esquema HTTP y subdominio (dominio: youtube.com, ruta: / v)

http://www.youtube.com/v/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Con esquema HTTPS, sin subdominio (Dominio: youtube.com, Ruta: / v)

https://youtube.com/v/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Con esquema HTTPS y subdominio (Dominio: youtube.com, Ruta: / v)

https://www.youtube.com/v/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Sin esquema y subdominio (Dominio: youtube.com, Ruta: / 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

Sin esquema, con subdominio (Dominio: youtube.com, Ruta: / 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

Con esquema HTTP, sin subdominio (Dominio: youtube.com, Ruta: / 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

Con esquema HTTP y subdominio (dominio: youtube.com, ruta: / 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

Con esquema HTTPS, sin subdominio (Dominio: youtube.com, Ruta: / 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

Con esquema HTTPS y subdominio (dominio: youtube.com, ruta: / 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

USO FUNCIONAL

La forma más fácil de usar el patrón es envolverlo en una función como esta:

/**
 * 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 + "rnResult: " + (!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">

Si el tipo de valor de resultado de la función debe ser un valor booleano, simplemente reemplace RegExp.$1 por true. Eso es todo.

Una nota final sobre la duración de la identificación del video: ¿Uno preguntó si los identificadores tienen una longitud fija de 11 caracteres? y si pudiera cambiar en el futuro?

La mejor respuesta a esa pregunta es probablemente también la única declaración “oficial” que he encontrado aquí y que dice: “No veo en ninguna parte de la documentación donde nos comprometamos oficialmente con una longitud estándar de 11 caracteres para los ID de video de YouTube. Es una de esas cosas en las que tenemos una implementación actual, y puede permanecer así indefinidamente. Pero estamos no ofreciendo ningún compromiso oficial con eso, así que proceda bajo su propio riesgo “.

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

No puede hacer coincidir la parte de identificación con w +, ya que no incluye el carácter de guión (-). [a-zA-Z0-9_-]+ sería algo más correcto.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)

Tags : / / / / /

Utiliza Nuestro Buscador

Preguntas Relacionadas:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *