簡單實用的HTML到UBB轉(zhuǎn)換腳本工具實現(xiàn)說明

更新時間：2009年11月02日 02:02:11 作者：

你也許是位樂于分享的技術(shù)人員，盡管你算不上什么技術(shù)高手，但是你都希望把自己所知道的通過博客與網(wǎng)友分享。為了讓更多人知道你的經(jīng)驗，你可能會努力把博文發(fā)布到專業(yè)論壇。

現(xiàn)在出現(xiàn)一點麻煩：博客編輯器多為支持HTML發(fā)布，而論壇多為支持UBB，這意味著你想把之前發(fā)布在博客的文章直接復(fù)制發(fā)布到論壇是不行的。怎么辦呢？手工一個個標(biāo)簽改？這樣顯然太麻煩了，況且懶乃人之本性嘛，哈！我也是位懶人，所以我寫了個工具，可以幫助自己把博客的HTML轉(zhuǎn)換成適合論壇發(fā)布的UBB格式，即使不能完全轉(zhuǎn)換，但已幫我省去很多工作。

因為本人一直從事WEB前端開發(fā)工作，所以我知道HTML語義的重要性，也清楚如何標(biāo)準(zhǔn)編碼，所以我發(fā)布在博客的HTML符合下面幾個標(biāo)準(zhǔn)，使用這些標(biāo)準(zhǔn)，有利于更成功地實現(xiàn)HTML 到UBB的轉(zhuǎn)換：

（1）所有標(biāo)簽合法嵌套并正常結(jié)束
（2）小標(biāo)題使用h標(biāo)簽，段落使用p標(biāo)簽
（3）每張博客附圖各占一行并居中，img標(biāo)簽同樣作為一個新的段落放在p標(biāo)簽中
（4）代碼片段是用博客園編輯器生成的，是一個div標(biāo)簽包含的內(nèi)容塊

這個HTML 2 UBB轉(zhuǎn)換工具代碼如下。通過代碼你可以看到這是利用了正則表達(dá)式重復(fù)替換實現(xiàn)的，為了優(yōu)化替換速度，我把可能存在大量無用HTML的內(nèi)容先替換，這樣后面其它方法無須再替換其中的內(nèi)容，比如由博客園編輯器生成的代碼片段就是要先替換的目標(biāo)，它會被替換成“[code]這里是代碼片段[/code]”，后面自己再把中間的文字替換成實際的代碼就行了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML 2 UBB</title> <style type="text/css"> * {margin:0; padding:0} #layout {width:800px; margin:10px auto} textarea {width:800px; height:250px; font-size:12px} input {width:800px; height:30px; margin:10px 0} </style> </head> <body> <div   class="nvuwdp2"   id="layout"> <textarea id="inputCode"></textarea> <input type="button" id="transform" value="【轉(zhuǎn)換】" onclick="transform()" /> <textarea id="outputCode"></textarea> </div> <script type="text/javascript"> function transform() {     var html = document.getElementById('inputCode').value;          html = html.replace(/\n/g,'');     html = html.replace(/<div.*?>(.+?)<\/div>/ig,'[    DISCUZ_CODE_0    ]\n\n');     html = html.replace(/<p.*?>(.+?)<\/p>/ig,'$1\n\n');     html = html.replace(/<br\/?>/ig,'\n\n');     html = html.replace(/<a.+?href="(.+?)".*?>(.+?)<\/a>/ig,'[url=$1]$2[/url]');     html = html.replace(/<img.+?src="(.+?)".*?>/ig,'[align=center][img]$1[/img][/align]');     html = html.replace(/<strong>(.+?)<\/strong>/ig,'[b]$1[/b]');     html = html.replace(/<h\d>(.+?)<\/h\d>/ig,'[size=3][b]$1[/b][/size]\n\n');          document.getElementById('outputCode').value = html;     document.getElementById('outputCode').select(); } </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

工具的使用方法是（參考下面附圖）：復(fù)制你發(fā)布到博客之前自己編輯好的HTML代碼放于上文本框，然后再點擊中間的“轉(zhuǎn)換”按鈕，這樣工具就會在下面文本框生成你要粘貼到論壇的UBB文本，同時目標(biāo)代碼處于選中狀態(tài)，你復(fù)制即可。