簡單實用的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ā)布到論壇是不行的。怎么辦呢？手工一個個標簽改？這樣顯然太麻煩了，況且懶乃人之本性嘛，哈！我也是位懶人，所以我寫了個工具，可以幫助自己把博客的HTML轉(zhuǎn)換成適合論壇發(fā)布的UBB格式，即使不能完全轉(zhuǎn)換，但已幫我省去很多工作。
因為本人一直從事WEB前端開發(fā)工作，所以我知道HTML語義的重要性，也清楚如何標準編碼，所以我發(fā)布在博客的HTML符合下面幾個標準，使用這些標準，有利于更成功地實現(xiàn)HTML 到UBB的轉(zhuǎn)換：
（1）所有標簽合法嵌套并正常結(jié)束
（2）小標題使用h標簽，段落使用p標簽
（3）每張博客附圖各占一行并居中，img標簽同樣作為一個新的段落放在p標簽中
（4）代碼片段是用博客園編輯器生成的，是一個div標簽包含的內(nèi)容塊
這個HTML 2 UBB轉(zhuǎn)換工具代碼如下。通過代碼你可以看到這是利用了正則表達式重復(fù)替換實現(xiàn)的，為了優(yōu)化替換速度，我把可能存在大量無用HTML的內(nèi)容先替換，這樣后面其它方法無須再替換其中的內(nèi)容，比如由博客園編輯器生成的代碼片段就是要先替換的目標，它會被替換成“[code]這里是代碼片段[/code]”，后面自己再把中間的文字替換成實際的代碼就行了。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
工具的使用方法是（參考下面附圖）：復(fù)制你發(fā)布到博客之前自己編輯好的HTML代碼放于上文本框，然后再點擊中間的“轉(zhuǎn)換”按鈕，這樣工具就會在下面文本框生成你要粘貼到論壇的UBB文本，同時目標代碼處于選中狀態(tài)，你復(fù)制即可。
注意：如果你的HTML代碼與我的標準不一樣，轉(zhuǎn)換肯定會出問題的，你可以根據(jù)自己的代碼標準修改這個工具的部分代碼，使其達到自己想要的效果。本文只是提供一個思路。 作者 webflash
因為本人一直從事WEB前端開發(fā)工作，所以我知道HTML語義的重要性，也清楚如何標準編碼，所以我發(fā)布在博客的HTML符合下面幾個標準，使用這些標準，有利于更成功地實現(xiàn)HTML 到UBB的轉(zhuǎn)換：
（1）所有標簽合法嵌套并正常結(jié)束
（2）小標題使用h標簽，段落使用p標簽
（3）每張博客附圖各占一行并居中，img標簽同樣作為一個新的段落放在p標簽中
（4）代碼片段是用博客園編輯器生成的，是一個div標簽包含的內(nèi)容塊
這個HTML 2 UBB轉(zhuǎn)換工具代碼如下。通過代碼你可以看到這是利用了正則表達式重復(fù)替換實現(xiàn)的，為了優(yōu)化替換速度，我把可能存在大量無用HTML的內(nèi)容先替換，這樣后面其它方法無須再替換其中的內(nèi)容，比如由博客園編輯器生成的代碼片段就是要先替換的目標，它會被替換成“[code]這里是代碼片段[/code]”，后面自己再把中間的文字替換成實際的代碼就行了。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
工具的使用方法是（參考下面附圖）：復(fù)制你發(fā)布到博客之前自己編輯好的HTML代碼放于上文本框，然后再點擊中間的“轉(zhuǎn)換”按鈕，這樣工具就會在下面文本框生成你要粘貼到論壇的UBB文本，同時目標代碼處于選中狀態(tài)，你復(fù)制即可。
注意：如果你的HTML代碼與我的標準不一樣，轉(zhuǎn)換肯定會出問題的，你可以根據(jù)自己的代碼標準修改這個工具的部分代碼，使其達到自己想要的效果。本文只是提供一個思路。 作者 webflash
相關(guān)文章
獲取當前月（季度/年）的最后一天（set相關(guān)操作及應(yīng)用）
本文主要介紹了setset相關(guān)操作及應(yīng)用，通過獲取當前月（季度/年）的最后一天具體事例來解析說明，具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
JavaScript實現(xiàn)H5接金幣功能(實例代碼)
這篇文章主要介紹了JavaScript實現(xiàn)H5接金幣功能,本文分步驟通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
這篇文章主要為大家詳細介紹了JavaScript對象的淺拷貝和深拷貝代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
js實現(xiàn)的實時柱狀圖,非常有創(chuàng)意的想法。2008-10-10
Midway 基于 TypeScript 開發(fā)，結(jié)合了面向?qū)ο螅∣OP + Class + IoC）與函數(shù)式（FP + Function + Hooks）兩種編程范式，并在此之上支持了 Web / 全棧 / 微服務(wù) / RPC / Socket / Serverless 等多種場景，這篇文章主要介紹了前端中間件Midway的使用,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)隨機點名程序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
小程序的openid相當重要,它是用戶的唯一標識id,牽扯的支付,登錄,授權(quán)等,下面這篇文章主要給大家介紹了關(guān)于微信小程序獲取用戶openid的相關(guān)資料,需要的朋友可以參考下2022-04-04
位運算符是在數(shù)字底層(即表示數(shù)字的32個數(shù)位)進行操作的,下面這篇文章主要給大家介紹了一些你可能不知道的JavaScript位運算符的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
下面小編就為大家?guī)硪黄狫S 終止執(zhí)行的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起 小編過來看看吧2016-11-11
這篇文章主要為大家詳細介紹了JS組件Bootstrap Table使用方法，具有一定的實用性和參考價值，感興趣的小伙伴們可以參考一下2016-10-10