Pages

2013-02-21

JavaScript Regex應用實例 - Youtube影片網址擷取

我對於網頁應用的JavaScript(以下簡稱JS)一直沒投注很大的心力,因為覺得JS語言結構較鬆散又沒有源碼保護,雖然半天就能學會該程式語言,但深入投資下去就知道細節痛苦,因此只是用它來簡單為表單欄位作選取處理,或搜尋網上別人的Sample語法,來完成自己的工作需求就好了。

網頁表單程式裏,面對User輸入的字串往往需要作格式化處理,雖然知道JS有Regex物件能有效處理這類需求,但一直懶得去看那種又怪又亂的蝌蚪文,總是簡單使用String函式搜尋/取代字串而己。不過隨著程式邏輯複雜了,無法容忍自己使用這種偷雞的編程作法,因此抽空看了一下JS RegEx的語法。我對於JS語言的正規學習是N年前的事了,後來發現新式的JS語法變得不太一樣,因此建議大家重新複習這語言,有經驗的人大概1小時內就能補回失去的進度。

網上很多JS語言的教學網,但整體感覺就像JS語言,都很鬆散又隨便,我發現w3cschool這網站最適合有經驗的人複習JS語言。而且它提供一個線上測試的程式,很方便測試JS的效果。扯了一大堆JS歷史而不進主題,主要還是覺得JS不太值得投資(個人偏見),遇到需求網上搜尋別人的Sample Code,再用JS正規語法改寫這樣就好了。只是發現很多人寫的JS語法還是舊思維不優美,自己若仍繼承在危樓之上而不思正源解決,日後勢必會造成嚴重的維護負擔。

進入主題,此文章範例需求是讓User貼入Youtube影片的網址,利用JS把影片的Key值抽取出來。然而Youtube URL常見有3種格式,因此需要建立3種Regex Pattern來比對輸入字串並擷取Key值。這JS解決方案若仍採用字串搜尋/擷取函式是挺對自己青春不夠負責任的作法,因為任何需求項目具有重複性(loop)的話,就該正規面對並結構化地妥善解決。

	
var url = document.getElementById("ctrlVideoUrl").value;
var key = document.getElementById("ctrlVideoKey").value;


// Youtube URL (Samples).
var arrUrl = [
'http://www.youtube.com/watch?v=gWwOmf8N9gY&feature=player_embedded',
'<iframe width="640" height="360" src="http://www.youtube.com/embed/gWwOmf8N9gY?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>',
'http://youtu.be/gWwOmf8N9gY'
];


// Youtube RegEx Patterns. (Key值為word(英數+底線)及-符號)
var arrRegex = [
/v=(\[\w-]+)/,
/\/embed\/([\w-]+)/,
/\/youtu.be\/([\w-]+)/
];


// Matching
var arrFound = null;
for (var i = 0; i < arrRegex.length; i++) {
var arrFound = arrRegex[i].exec(url);
if (arrFound != null) {
break;
}
}


// Result
if (arrFound != null) {
alert("Matched, the value = " + arrFound[1]); // Key='gWwOmf8N9gY’
}
else {
alert("Sorry, Youtube URL is invald or not supported yet.");
}

W3CSchool TryIt

Post a Comment