簡單實用的HTML到UBB轉換腳本工具實現說明

2019-11-21 01:01:23

字體：大中小

來源：轉載

供稿：網友

現在出現一點麻煩：博客編輯器多為支持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   class="iwvjtn8m0"   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(//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需刷新才能執行]

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