jQuery Youtube URL 正则表达式验证

在前端开发中，我们经常需要验证用户输入数据的格式。本文将介绍如何使用正则表达式验证 Youtube 视频链接是否合法，并提供基于 jQuery 的实现示例代码。

验证规则

Youtube 视频链接有多种格式，下面是一些常见的链接格式：

• https://www.youtube.com/watch?v=xxxxxxxxxxx
• https://youtu.be/xxxxxxxxxxx
• https://www.youtube.com/embed/xxxxxxxxxxx

其中 xxxxxxxxxxx 表示视频 ID，由 11 个字符组成。

我们需要编写正则表达式来验证这些链接是否符合规则。

正则表达式

下面是用于匹配上述链接格式的正则表达式：

/^https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})$/

这个正则表达式分为三个部分，分别对应上述三种常见的链接格式。其中视频 ID 使用了字符集 [a-zA-Z0-9_-]，只包含字母、数字及下划线和减号。

实现代码

接下来我们将使用 jQuery 编写一个函数，验证用户输入的字符串是否符合以上规则。

function isValidYoutubeUrl(url) {
  var regex = /^https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})$/;
  return regex.test(url);
}

该函数接收一个字符串参数 url，如果符合规则则返回 true，否则返回 false。

下面是一个使用示例：

var url = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
if (isValidYoutubeUrl(url)) {
  console.log('链接合法');
} else {
  console.log('链接不合法');
}

总结

本文介绍了如何使用正则表达式验证 Youtube 视频链接是否合法，并提供了基于 jQuery 的实现示例代码。在实际开发中，我们可以根据这个思路编写更复杂的验证逻辑，提高用户输入数据的准确性和安全性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26370