可接受空输入的 JS YouTube 正则表达式答案

【问题标题】：JS YouTube Regex With Empty input acceptable可接受空输入的 JS YouTube 正则表达式
【发布时间】：2018-07-14 12:21:12
【问题描述】：

我有一个嵌入代码的 youtube 输入，我希望能够让用户不必输入 youtube 嵌入。但是我对如何更改我的正则表达式以接受一个空字段感到困惑......如果用户未能通过正则表达式，我设置了错误，如果用户通过正则表达式则没有错误，所以我想会有一个简单的修复接受空输入值的正则表达式。

任何人都可以从下面的代码中看到我将如何实现这一点...

感谢您的任何建议。

function checkyoutube() {


var youtube = $("#youtubevalue").val();


//var youtubeReg =/^[a-zA-Z][a-zA-Z0-9-+&%#=?<>()£~_\.*@$!, \r\n]{0,300}$/;
  var youtubeReg =/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((.|-){11})(?:\S+)?$/;

    if(!youtubeReg.test(youtube)) { localStorage.setItem('error', 'true');
        $("#youtubefooter").text("Example https://youtu.be/12KxXnFbwbU"), $( "#youtubevalue" ).addClass( "errorclass" ), $( "#youtubevalue" ).removeClass( "noerrorclass");
                    }  

    if(youtubeReg.test(youtube)) { localStorage.setItem('error', 'false');
        $("#youtubefooter").text("URL Is Good, Thanks!"), $( "#youtubevalue" ).addClass( "noerrorclass" ), $( "#youtubevalue" ).removeClass( "errorclass");
                    } 



var youtubeB = document.getElementById('youtubevalue');

(var regex= LOTS / OF / BAD / WORDS;)'EDITED FOR STACK'
youtubeB.value=youtubeB.value.replace(regex, "****");   


};

【问题讨论】：

标签： javascript regex youtube

【解决方案1】：

您可以使用非捕获组(?:.....)? 使正则表达式可选?

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

var youtubeReg = /^(?:(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((.|-){11})(?:\S+)?)?$/;
var strings = [
  'https://youtu.be/12KxXnFbwbU',
  '',
  'https://youtu'
];
strings.forEach((s) => {
  console.log(s + ' ==> ' + youtubeReg.test(s));
});

【讨论】：

【解决方案2】：

必须用正则表达式完成吗？如果没有，您可以简单地修剪输入并检查它是否为空，如果为空则它是好的，如果不应用正则表达式。

见下面代码

function checkyoutube() {

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

var youtube = $("#youtubevalue").val();
 //checking for length here after trimming 
if(youtube.trim().length==0||youtubeReg.test(youtube)) { localStorage.setItem('error', 'false');
    $("#youtubefooter").text("URL Is Good, Thanks!"), $( "#youtubevalue" ).addClass( "noerrorclass" ), $( "#youtubevalue" ).removeClass( "errorclass");
                } 
else{//skipped testing for regex again here
localStorage.setItem('error', 'true');
    $("#youtubefooter").text("Example https://youtu.be/12KxXnFbwbU"), $( "#youtubevalue" ).addClass( "errorclass" ), $( "#youtubevalue" ).removeClass( "noerrorclass");
}




var youtubeB = document.getElementById('youtubevalue');

(var regex= LOTS / OF / BAD / WORDS;)'EDITED FOR STACK'
youtubeB.value=youtubeB.value.replace(regex, "****");   


};

【讨论】：