如何使用JS驗證YouTube網址

我想遍歷列表項目onload並檢測他們是否擁有YouTube網址並使用來自iframe中網址的視頻ID。這是我到目前爲止已經完成，但它不工作：如何使用JS驗證YouTube網址

$('li').each(function() { 
 
    var url = $(this).text(); 
 
    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   
 
     $(this).find('.videoObject').attr('src', 'https://www.youtube.com/embed/' + match[2] + '?autoplay=0&enablejsapi=1').show(); 
 
    } else { 
 
     // Do anything for not being valid 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    foo 
 
    <iframe class="videoObject" src=""></iframe> 
 
    </li> 
 
    <li> 
 
    bar 
 
    <iframe class="videoObject" src=""></iframe> 
 
    </li> 
 
    <li> 
 
    foo https://www.youtube.com/watch?v=Vr3ya_uPmxg 
 
    <iframe class="videoObject" src=""></iframe> 
 
    </li> 
 
</ul>

jsFiddle

來源

2017-02-13 babusi

我用我[一些谷歌（http://stackoverflow.com/questions/2964678/jquery-youtube-url-validation-with-regex） – evolutionxbox

是否有問題與您的代碼？ –

可能重複[jQuery的YouTube網址驗證與正則表達式]（http://stackoverflow.com/questions/2964678/jquery-youtube-url-validation-with-regex） – evolutionxbox

我更喜歡你創建虛擬A元素，那麼你就可以訪問一些有用的DOM方法解析它的值爲href，例如hostname，,pathname,search,hash等。然後，更容易驗證url部分。我寫了一個小功能，它返回：

假如果URL不是YouTube網址，
空字符串如果是YouTube網址，但沒有視頻ID
字符串編號。

var links = 
 
    ['https://youtube.com/watch?v=01jcwGApTWA', 
 
    'https://youtube.com/watch?v=01jcwGApTWA&t', 
 
    'https://youtu.be/01jcwGApTWA?t=31', 
 
    'https://www.youtube.com/watch?v=Ujqdle7CvIU&spfreload=10', 
 
    'https://www.youtube.com/watch?v=nQ9ww9E_1C4', 
 
    'https://www.youtube.com/embed/nQ9ww9E_1C4', 
 
    'https://www.youtube.com/embed/nQ9ww9E_1C4?autoplay=1', 
 
    'https://www.youtube.com/embed/nQ9ww9E_1C4?playlist=XGSy3_Czz8k&loop=1', 
 
    'https://www.youtube.com', 
 
    'http://anothersite.com']; 
 

 
function isYoutube(getURL){ 
 
\t if(typeof getURL!=='string') return false; 
 
\t var newA = document.createElement('A'); 
 
\t newA.href = getURL; 
 
\t var host = newA.hostname; 
 
\t var srch = newA.search; 
 
\t var path = newA.pathname; 
 
\t 
 
\t if(host.search(/youtube\.com|youtu\.be/)===-1) return false; 
 
\t if(host.search(/youtu\.be/)!==-1) return path.slice(1); 
 
\t if(path.search(/embed/)!==-1) return /embed\/([A-z0-9]+)(\&|$)/.exec(path)[1]; 
 
\t var getId = /v=([A-z0-9]+)(\&|$)/.exec(srch); 
 
\t if(host.search(/youtube\.com/)!==-1) return !getId ? '':getId[1]; 
 
\t 
 
} 
 

 
console.log(isYoutube(links[0])); 
 
console.log(isYoutube(links[1])); 
 
console.log(isYoutube(links[2])); 
 
console.log(isYoutube(links[3])); 
 
console.log(isYoutube(links[4])); 
 
console.log(isYoutube(links[5])); 
 
console.log(isYoutube(links[6])); 
 
console.log(isYoutube(links[7])); 
 
console.log(isYoutube(links[8])); 
 
console.log(isYoutube(links[9]));

來源

2017-02-13 12:14:01

如何使用JS驗證YouTube網址

回答

相關問題