您當前位置：首頁 > web前端 > htmlcss > 實用簡單的HTML轉UBB腳本工具代碼

實用簡單的HTML轉UBB腳本工具代碼

來源：程序員人生發布時間：2014-04-29 18:35:31 閱讀次數：2717次

　　你也許是位樂于分享的技術人員，盡管你算不上什么技術高手，但是你都希望把自己所知道的通過博客與網友分享。為了讓更多人知道你的經驗，你可能會努力把博文發布到專業論壇。現在出現一點麻煩：博客編輯器多為支持HTML發布，而論壇多為支持UBB，這意味著你想把之前發布在博客的文章直接復制發布到論壇是不行的。怎么辦呢?手工一個個標簽改?這樣顯然太麻煩了，況且懶乃人之本性嘛，哈!我也是位懶人，所以我寫了個工具，可以幫助自己把博客的HTML轉換成適合論壇發布的UBB格式，即使不能完全轉換，但已幫我省去很多工作。

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

　　(1)所有標簽合法嵌套并正常結束

　　(2)小標題使用h標簽，段落使用p標簽

　　(3)每張博客附圖各占一行并居中，img標簽同樣作為一個新的段落放在p標簽中

　　(4)代碼片段是用博客園編輯器生成的，是一個div標簽包含的內容塊

　　這個HTML 2 UBB轉換工具代碼如下。通過代碼你可以看到這是利用了正則表達式重復替換實現的，為了優化替換速度，我把可能存在大量無用HTML的內容先替換，這樣后面其它方法無須再替換其中的內容，比如由博客園編輯器生成的代碼片段就是要先替換的目標，它會被替換成“[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 id="layout"><textarea id="inputCode"></textarea><input type="button" id="transform" value="點擊轉換" onclick="transform()" /><textarea id="outputCode"></textarea></div><script type="text/javascript">function transform(){ var html = document.getElementById('inputCode').value; html = html.replace(//g,''); html = html.replace(/<div.*?>(.+?)</div>/ig,'[ DISCUZ_CODE_0 ]'); html = html.replace(/<p.*?>(.+?)</p>/ig,'$1'); html = html.replace(/<br/?>/ig,''); html = html.replace(/(.+?)</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(/<hd>(.+?)</hd>/ig,'[size=3][b]$1[/b][/size]'); document.getElementById('outputCode').value = html; document.getElementById('outputCode').select();}</script></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' title="liehuo.net" target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

　　工具的使用方法是：復制你發布到博客之前自己編輯好的HTML代碼放于上文本框，然后再點擊中間的“轉換”按鈕，這樣工具就會在下面文本框生成你要粘貼到論壇的UBB文本，同時目標代碼處于選中狀態，你復制即可。

　　注意：如果你的HTML代碼與我的標準不一樣，轉換肯定會出問題的，你可以根據自己的代碼標準修改這個工具的部分代碼，使其達到自己想要的效果。本文只是提供一個思路。

　　網友情提示：如果您經常使用此類工具，我們為您準備了在線工具，請訪問：http://tool.liehuo.net/tool/Html_Ubb.asp

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 充分利用免費資源不花錢也能做好網絡營銷

下一篇 基于jQuery的幻燈插件:中等級封裝類sGallery 1.0

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

實用簡單的HTML轉UBB腳本工具代碼