製作HTML unicode轉換程式

7 / 14, 2012 HTML , JS , 架站技巧 , 站長自製 , 網路

只要是網頁設計師,一定會知道HTML的unicode,一個為了避免字元顯示錯誤而設計的東西,現在網路上轉換工具一堆,不過有人想過來"自己做"一個嗎?如果有但做不出來,那這篇文章看就對了!如果沒有,那來看看這篇文章,當做練功吧!


最開始應該先做出網站基本架構:

<html>
<head>
<title>HTML unicode轉換</title>
</head>
<body>
</body>
</html>

覺得我在開玩笑,連這種東西都要教嗎?不,我很認真,因為小弟希望剛開始學html的人也看得懂,所以從最基本教起~
接著要製作輸入資料的輸入框,及顯示結果框框,請在<body>後,</body>前輸入:

<form action="#" id="conv" name="conv">
要轉換的文字: <br/>
<textarea id="str" cols="50" rows="5" onchange="convert();" onblur="convert();"></textarea><br/>
<br/>轉換後的文字: <br/>
<textarea id="result" cols="50" rows="5" onfocus="convert();"></textarea><br/>
<input type="button" value="轉換" onclick="convert();" onkeypress="convert"/>
</form>

儲存後打開看看,應該會看到2輸入框,一個轉換按鈕,如果沒有,請確定程式複製沒有錯
註:如果有看到錯誤通知,那是正常的,主程式完成後就會消失了
可是現再按轉換毫無反應,所以要開始設計主程式了,因為這次小弟要用JS來做,因此先在<head>之後,</head>之前(但不要在<title>與</title>之間)加入以下語法

<script type="text/javascript">
</script>

必須先建造一個function並且叫做convert,請在<script type="text/javascript">和</script>之間加入以下程式碼

function convert()
{
}

然後做一個讀取輸入框資料的語法,並且做一個判斷式,判斷輸入資料中是否有特殊符號(&<>等~),如果有就先轉換,沒有就轉換成unicode
請在{和}之間加入程式碼:

 str = document.conv.str.value;
result = "";
for(i = 0 ; i < str.length ; i++) {
c = str.charAt(i);
if((' ' <= c && c <= '~') || (c == '\r') || (c == '\n')) {
if(c == '&') {
cstr = "&amp;";
} else if(c == '<') {
cstr = "&lt;";
} else if(c == '>') {
cstr = "&gt;";
} else {
cstr = c.toString();

因為unicode前面要加上&#,後面要加上;,所以把轉換結果加上&#及;,並且顯示在第二個輸入框
請在上面程式碼後面加入下面程式碼

 } else {
cstr = "&#" + c.charCodeAt().toString() + ";";
}
result = result + cstr;
}
document.conv.result.value = result;
document.conv.result.focus();
document.conv.result.select();
return 0;

}

儲存後並開啟,輸入"哈囉",按下"轉換",如果下面的輸入框有出現"&#21704;&#22217;",代表程式可以運做了!很簡單吧!(才怪哩)
如果上面的介紹看不懂,也可以直接複製做好的程式碼:

<html>
<head>
<title>HTML unicode轉換</title>
<script type="text/javascript">
function convert()
{
str = document.conv.str.value;
result ="";
for(i =0 ; i < str.length ; i++) {
c = str.charAt(i);
if((''<= c && c <='~') || (c =='\r') || (c =='\n')) {
if(c =='&') {
cstr ="&amp;";
} elseif(c =='<') {
cstr ="&lt;";
} elseif(c =='>') {
cstr ="&gt;";
} else {
cstr = c.toString();
}
} else {
cstr ="&#"+ c.charCodeAt().toString() +";";
}
result = result + cstr;
}
document.conv.result.value = result;
document.conv.result.focus();
document.conv.result.select();
return0;

}
</script>
</head>
<body>
<form action="#" id="conv" name="conv">
要轉換的文字: <br/>
<textarea id="str" cols="50" rows="5" onchange="convert();" onblur="convert();"></textarea><br/>
<br/>轉換後的文字: <br/>
<textarea id="result" cols="50" rows="5" onfocus="convert();"></textarea><br/>
<input type="button" value="轉換" onclick="convert();" onkeypress="convert"/>
</form>
</body>
</html>

關於恢復方法請看下一頁

  • zkm

    [或直接放到Google收尋(更快!)]

    是 搜尋 嗎?


    • 直接用google收尋unicode就會自動變成中文