如何在文本框中验证客户端的 youtube url答案

【问题标题】：How to validate youtube url in client side in text box如何在文本框中验证客户端的 youtube url
【发布时间】：2015-04-28 10:00:49
【问题描述】：

我必须创建一个文本框，它只允许您管视频的网址。

为了处理服务器端的验证，我使用below code

$rx = '~
    ^(?:https?://)?              # Optional protocol
     (?:www\.)?                  # Optional subdomain
     (?:youtube\.com|youtu\.be)  # Mandatory domain name
     /watch\?v=([^&]+)           # URI with video id as capture group 1
     ~x';

$has_match = preg_match($rx, $url, $matches);

我一直在为客户端验证寻找相同的解决方案。我发现了 <input type="url"> here 但它似乎只适用于 html5 浏览器。

是否可以使用文本框进行客户端验证，以便与所有浏览器兼容？

谢谢

【问题讨论】：

Hitesh，如果有人为你工作，你应该标记为三个答案中的任何一个，以便其他人可以信任。
很难选择哪一个是正确的！！！ @innomanik 和您的答案似乎都按我的预期工作。给我一些时间，我会接受正确的答案。

标签： javascript regex html validation youtube

【解决方案1】：

转义正则表达式中存在的所有正斜杠，然后将修改后的正则表达式放在 / 分隔符中，不带任何空格或注释行，您不需要添加 x 修饰符。

var re = /^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/watch\?v=([^&]+)/m;

【讨论】：

【解决方案2】：

这是验证 youtube url 的代码-

function validateYouTubeUrl()
{
    var url = $('#youTubeUrl').val();
        if (url != undefined || url != '') {
            var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;
            var match = url.match(regExp);
            if (match && match[2].length == 11) {
                // Do anything for being valid
                // if need to change the url to embed url then use below line
                $('#ytplayerSide').attr('src', 'https://www.youtube.com/embed/' + match[2] + '?autoplay=0');
            }
            else {
                // Do anything for not being valid
            }
        }
}

小提琴网址： https://jsfiddle.net/cpjushnn/12/

【讨论】：

哇！您甚至添加了如何更改 url 以嵌入 url ...如果可能，请提供 jsfiddle。谢谢
@hitesh，刚刚也添加了小提琴网址，尝试一下并标记为答案，如果是这样的话......
if (match && match[2].length == 11) {...这背后的逻辑我不明白...你能解释一下...谢谢
@Prateek，这意味着该部分应匹配列表中不存在的单个字符，即 #、& 和 ?因为这些字符在 URL 中具有特殊含义/用途。你可以在这里玩更多 - regex101.com/r/pN5hU5/1
简洁版：/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=|\?v=)([^#&?]*).*/

【解决方案3】：

查看这个工作示例：

function matchYoutubeUrl(url) {
    var p = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
    if(url.match(p)){
        return url.match(p)[1];
    }
    return false;
}

更新小提琴：http://jsfiddle.net/3ouq9u3v/13/

【讨论】：

它按预期工作，我很高兴你添加了工作链接.. 非常感谢
感谢分享 RegExp 属性已被弃用的信息，但我很惊讶微软为什么没有提到这一点。我现在更新了我的解决方案。

【解决方案4】：

结合这里的答案和一些修改，我想出了这个正则表达式：

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

这将匹配任何格式，但如果 id 长度超过 11 个字符，则会不匹配。还可以使用“？”添加开始视频标签最后的部分。

你可以通过粘贴into this来测试它

【讨论】：

【解决方案5】：

再次更新。在我看来，到目前为止，我已经确定了 6 种情况可以满足（我编造了这些名称）：

普通网址

https://www.youtube.com/watch?v=12345678901

分享网址

https://youtu.be/12345678901

分享网址与开始时间

https://youtu.be/12345678901?t=6

手机浏览器网址

https://m.youtube.com/watch?v=12345678901&list=RD12345678901&start_radio=1

长网址

https://www.youtube.com/watch?v=12345678901&list=RD12345678901&start_radio=1&rv=smKgVuS

带有开始时间的长网址

https://www.youtube.com/watch?v=12345678901&list=RD12345678901&start_radio=1&rv=12345678901&t=38

我最初根据 Jitendras 的答案提供了一个扩展的答案，因为这似乎有一些差距。例如，如果您在末尾添加字符，则使用较短的共享 URL（例如 https://youtu.be/abcdefgh_ij），Jitendras 没有捕捉到它。此外，如果用户在已经存在错误的情况下删除了文本字段中的值，则不会将其删除。

但是，我假设原始发帖人实际上想在 iframe 嵌入中使用 URL，而这里的答案都不适用于此。嵌入的url格式不同，需要处理。

以下是我正在执行的操作，以获取用户输入、对其进行验证、将其替换为格式正确的可嵌入 url，然后将其分配给 iframe 以在 UI 上显示。

可能对某人有好处....

    function validateVideoLink() {
        var UserInputField = document.getElementById("UserInputField");
        var InputFieldText = UserInputField.value;
        var FieldValidationPara = document.getElementById("FieldValidationPara");
        
        if ((InputFieldText.includes("watch?v=") || InputFieldText.includes("https://m.youtube") || InputFieldText.includes("watch?app=desktop&v=")) && !InputFieldText == "") {
            var endOfString = InputFieldText.split(/=(.*)/)[1];
            var stringLength = endOfString.length;
        
            var p = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
            if (!InputFieldText.match(p)) {
                FieldValidationPara.style.display = 'block';
                document.getElementById('CardDynamicVideo').src = '';
            } else {
                FieldValidationPara.style.display = 'none';
                var processedUrl = processVideoUrl(InputFieldText, true);
                document.getElementById('CardDynamicVideo').src = processedUrl;
                $("#UserInputField").val(processedUrl);
            }
        
            if (stringLength > 11) {
                FieldValidationPara.style.display = 'block';
                document.getElementById('CardDynamicVideo').src = '';
            }

        } else if (InputFieldText.includes("embed") && !InputFieldText== "") {

        //This else if block is needed in case the user adds extra characters on the end of the correctly processed embed url.

            var endOfString = InputFieldText.split('/')[4];
            var stringLength = endOfString.length;
            console.log('StringLength: ' + stringLength);
    
            var p = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
            if (!InputFieldText.match(p)) {
                FieldValidationPara.style.display = 'block';
                document.getElementById('CardDynamicVideo').src = '';
            } else {
                FieldValidationPara.style.display = 'none';
                var processedUrl = processVideoUrl(InputFieldText, true);
                document.getElementById('CardDynamicVideo').src = processedUrl;
                $("#UserInputField").val(processedUrl);
            }
    
            if (stringLength > 11) {
                FieldValidationPara.style.display = 'block';
                document.getElementById('CardDynamicVideo').src = '';

       } else if (InputFieldText.includes("tu.be") && !InputFieldText == "") {

            var endOfString = InputFieldText.split('/')[3];
            var stringLength = endOfString.length;
        
            var p = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
            if (!InputFieldText.match(p)) {
                FieldValidationPara.style.display = 'block';
                document.getElementById('CardDynamicVideo').src = '';
            } else {
                FieldValidationPara.style.display = 'none';
                document.getElementById('CardDynamicVideo').src = VideoLinkText;
                var processedUrl = processVideoUrl(InputFieldText, false);
                document.getElementById('CardDynamicVideo').src = processedUrl;
                $("#UserInputField").val(processedUrl);
            }
        
            if (stringLength > 11) {
                FieldValidationPara.style.display = 'block';
            document.getElementById('CardDynamicVideo').src = '';
            }

      } else {

            var p = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
            if (!InputFieldText.match(p) && !InputFieldText == "") {
                FieldValidationPara.style.display = 'block';
            document.getElementById('CardDynamicVideo').src = '';
            } else {
                FieldValidationPara.style.display = 'none';
            document.getElementById('CardDynamicVideo').src = InputFieldText;
            }
        }
    }
    
function processVideoUrl(rawUrl, fullUrl) {

    if (fullUrl) {
        var processed = rawUrl.replace('watch?v=', 'embed/')
        if (processed.includes("https://m.youtube")) {
            processed = rawUrl.replace('m.youtube', 'www.youtube');
            if (processed.includes("&list=")) {
                processed = processed.split('&list=')[0];
                return processed;
                console.log('Processed 1: ' + processed);
            }
        } else if (processed.includes("watch?app=desktop&v=")) {
            processed = rawUrl.replace('watch?app=desktop&v=', 'embed/');
            if (processed.includes("&list=")) {
                processed = processed.split('&list=')[0];
                return processed;
                console.log('Processed 1: ' + processed);
            }
        } else if (processed.includes("&list=")) {
            processed = processed.split('&list=')[0];
            return processed;
            console.log('Processed 1: ' + processed);
        }
        console.log('Processed 2: ' + processed);
        return processed;
    } else {
        var processed = rawUrl.replace('https://youtu.be/', 'https://www.youtube.com/embed/')
        if (processed.includes("?t=")) {
            processed = processed.split('?t=')[0];
            return processed;
        }

        console.log('Processed 3: ' + processed);
        return processed;
    }
}

以及对应的HTML：

<iframe class="embed-responsive-item" src="" id="CardDynamicVideo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<div class="row">
    <input asp-for="YouTubeLink" class="form-control" id="UserInputField" onkeypress="validateVideoLink()" onkeyup="validateVideoLink()">
</div>
<div class="row">
    <p class="font-danger hide" id="FieldValidationPara">That is not a valid YouTube Link</p>
</div>

注意 1：仍有一些边缘情况需要解决。例如，如果您输入一些奇怪的 watch?v= 或 tu.be 组合，它还不会处理它们。但我认为以上内容作为一个起点已经足够扎实了。

注意 2：请注意您用于测试的视频。 YouTube 不允许嵌入带有受版权保护的背景音乐的视频，它们将显示为不可用。

【讨论】：