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.");
}