[JavaScript] 提取網址並打包成網址簿

晚安！好久沒寫Blog了，最近的生活都是玩遊戲玩到12點然後再睡覺睡到12點Orz

昨天寫了這個小工具。輸入純文字 -> Regexp找出所有的http連結 -> 建立一個新視窗，插入iframe與網址列表成網址簿。

下面直接附Code︰（糟糕好像越來越懶了）

HTML部份

<textarea rows="" cols="" id="input" onfocus="this.select()"></textarea> 
<p><button onclick="getUrl();">轉換</button></p> 
<p id="error"></p> 

JavaScript部份

function error(t){ 
    document.getElementById("error").innerHTML=t; 
} 

function parseUrl(url){ 
    console.log(url); 
    // 不支持iframe嵌入，所以另外處理~ 但是如果遇到縮網址就沒辦法了:P 
    if(url.search("youtube.com/watch")>-1){ 
        url="http://www.youtube.com/embed/" 
            +url.split("?v=")[1].split("&")[0]+"?autoplay=1"; 
    }else if(url.search("youtu.be")>-1){ 
        url="http://www.youtube.com/embed/" 
            +url.split("youtu.be/")[1].split("&")[0]+"?autoplay=1"; 
    }else if(url.search("youku.com/v_show/id_")>-1){ 
        url="http://player.youku.com/player.php/sid/" 
            +url.split("id_")[1].split(".html")[0]+"/v.swf" 
    }else if(url.search("nicovideo.jp/watch/")>-1){ 
        url="javascript: document.write('niconico不允許嵌入:P');"; 
    } 
    return url; 
} 

// 入口點~ 
function getUrl(){ 
    var text=document.getElementById("input").value; 
    var urlList=text.match(/https?:\/\/[\x21-\xff]+/ig); 
    // urlList只需要一行JavaScript就可以取得了 
    if(!urlList){ 
        error("無法取得URL"); 
        return; 
    } 
     
    // make window 
    var w=window.open(); 
    w.document.title="網址簿"; 
    var h=document.createElement("div"); 
    h.id="nav"; 
    var b=document.createElement("div"); 
    b.id="main"; 
    var frm=document.createElement("iframe"); 
    frm.id="inFrame"; 
    frm.src=parseUrl(urlList[0]); 
    b.appendChild(frm); 
    var se=document.createElement("select"); 
    se.id="urlList"; 
    se.onchange=function(){ 
        updateFrame(w); 
    }; 
    for(var i=0;i<urlList.length;i++){ 
        var o=document.createElement("option"); 
        o.text=urlList[i]; 
        o.value=parseUrl(urlList[i]); 
        se.appendChild(o); 
    } 
    h.appendChild(se); 
    var btb=document.createElement("button"); 
    btb.innerHTML="Back"; 
    btb.onclick=function(){ 
        selectPrev(w); 
    }; 
    h.appendChild(btb); 
    var btn=document.createElement("button"); 
    btn.innerHTML="Next"; 
    btn.onclick=function(){ 
        selectNext(w); 
    }; 
    h.appendChild(btn); 
    var a=document.createElement("a"); 
    a.id="linkToGo"; 
    a.target="_blank"; 
    a.href=urlList[0]; 
    a.innerHTML="Open in new window"; 
    h.appendChild(a); 
    w.document.body.appendChild(h); 
    w.document.body.appendChild(b); 
    var style=document.getElementsByTagName("style")[0]; 
    w.document.head.appendChild(style.cloneNode(true)); 
    w.document.body.id="jsOutput"; 
    w.onresize=function(){resizeWindow(w)}; 
    resizeWindow(w); 
    frm.contentWindow.focus(); 
} 

function selectPrev(w){ 
    var se=w.document.getElementById("urlList"); 
    se.options[se.selectedIndex-1].selected=true; 
    updateFrame(w); 
    return; 
} 

function selectNext(w){ 
    var se=w.document.getElementById("urlList"); 
    se.options[se.selectedIndex+1].selected=true; 
    updateFrame(w); 
    return; 
} 

function updateFrame(w){ 
    var se=w.document.getElementById("urlList"); 
    var frm=w.document.getElementById("inFrame"); 
    var ff=w.document.createElement("iframe"); 
    ff.id="inFrame"; 
    ff.src=se.options[se.selectedIndex].value; 
    ff.style.height=frm.style.height; 
    frm.parentNode.replaceChild(ff,frm); 
    ff.contentWindow.focus(); 
    var a=w.document.getElementById("linkToGo"); 
    a.href=se.options[se.selectedIndex].text; 
} 

function resizeWindow(w){ 
    var h=w.document.body.clientHeight 
        -w.document.getElementById("nav").clientHeight; 
    w.document.getElementById("inFrame").style.height=h+"px"; 
} 

也可以在範例網找到。Click！