簡(jiǎn)單實(shí)用的HTML到UBB轉(zhuǎn)換腳本工具實(shí)現(xiàn)說(shuō)明
更新時(shí)間：2009年11月02日 02:02:11 作者：
你也許是位樂(lè)于分享的技術(shù)人員，盡管你算不上什么技術(shù)高手，但是你都希望把自己所知道的通過(guò)博客與網(wǎng)友分享。為了讓更多人知道你的經(jīng)驗(yàn)，你可能會(huì)努力把博文發(fā)布到專業(yè)論壇。
現(xiàn)在出現(xiàn)一點(diǎn)麻煩：博客編輯器多為支持HTML發(fā)布，而論壇多為支持UBB，這意味著你想把之前發(fā)布在博客的文章直接復(fù)制發(fā)布到論壇是不行的。怎么辦呢？手工一個(gè)個(gè)標(biāo)簽改？這樣顯然太麻煩了，況且懶乃人之本性嘛，哈！我也是位懶人，所以我寫(xiě)了個(gè)工具，可以幫助自己把博客的HTML轉(zhuǎn)換成適合論壇發(fā)布的UBB格式，即使不能完全轉(zhuǎn)換，但已幫我省去很多工作。
因?yàn)楸救艘恢睆氖耊EB前端開(kāi)發(fā)工作，所以我知道HTML語(yǔ)義的重要性，也清楚如何標(biāo)準(zhǔn)編碼，所以我發(fā)布在博客的HTML符合下面幾個(gè)標(biāo)準(zhǔn)，使用這些標(biāo)準(zhǔn)，有利于更成功地實(shí)現(xiàn)HTML 到UBB的轉(zhuǎn)換：
（1）所有標(biāo)簽合法嵌套并正常結(jié)束
（2）小標(biāo)題使用h標(biāo)簽，段落使用p標(biāo)簽
（3）每張博客附圖各占一行并居中，img標(biāo)簽同樣作為一個(gè)新的段落放在p標(biāo)簽中
（4）代碼片段是用博客園編輯器生成的，是一個(gè)div標(biāo)簽包含的內(nèi)容塊
這個(gè)HTML 2 UBB轉(zhuǎn)換工具代碼如下。通過(guò)代碼你可以看到這是利用了正則表達(dá)式重復(fù)替換實(shí)現(xiàn)的，為了優(yōu)化替換速度，我把可能存在大量無(wú)用HTML的內(nèi)容先替換，這樣后面其它方法無(wú)須再替換其中的內(nèi)容，比如由博客園編輯器生成的代碼片段就是要先替換的目標(biāo)，它會(huì)被替換成“[code]這里是代碼片段[/code]”，后面自己再把中間的文字替換成實(shí)際的代碼就行了。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
工具的使用方法是（參考下面附圖）：復(fù)制你發(fā)布到博客之前自己編輯好的HTML代碼放于上文本框，然后再點(diǎn)擊中間的“轉(zhuǎn)換”按鈕，這樣工具就會(huì)在下面文本框生成你要粘貼到論壇的UBB文本，同時(shí)目標(biāo)代碼處于選中狀態(tài)，你復(fù)制即可。
注意：如果你的HTML代碼與我的標(biāo)準(zhǔn)不一樣，轉(zhuǎn)換肯定會(huì)出問(wèn)題的，你可以根據(jù)自己的代碼標(biāo)準(zhǔn)修改這個(gè)工具的部分代碼，使其達(dá)到自己想要的效果。本文只是提供一個(gè)思路。 作者 webflash
因?yàn)楸救艘恢睆氖耊EB前端開(kāi)發(fā)工作，所以我知道HTML語(yǔ)義的重要性，也清楚如何標(biāo)準(zhǔn)編碼，所以我發(fā)布在博客的HTML符合下面幾個(gè)標(biāo)準(zhǔn)，使用這些標(biāo)準(zhǔn)，有利于更成功地實(shí)現(xiàn)HTML 到UBB的轉(zhuǎn)換：
（1）所有標(biāo)簽合法嵌套并正常結(jié)束
（2）小標(biāo)題使用h標(biāo)簽，段落使用p標(biāo)簽
（3）每張博客附圖各占一行并居中，img標(biāo)簽同樣作為一個(gè)新的段落放在p標(biāo)簽中
（4）代碼片段是用博客園編輯器生成的，是一個(gè)div標(biāo)簽包含的內(nèi)容塊
這個(gè)HTML 2 UBB轉(zhuǎn)換工具代碼如下。通過(guò)代碼你可以看到這是利用了正則表達(dá)式重復(fù)替換實(shí)現(xiàn)的，為了優(yōu)化替換速度，我把可能存在大量無(wú)用HTML的內(nèi)容先替換，這樣后面其它方法無(wú)須再替換其中的內(nèi)容，比如由博客園編輯器生成的代碼片段就是要先替換的目標(biāo)，它會(huì)被替換成“[code]這里是代碼片段[/code]”，后面自己再把中間的文字替換成實(shí)際的代碼就行了。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
工具的使用方法是（參考下面附圖）：復(fù)制你發(fā)布到博客之前自己編輯好的HTML代碼放于上文本框，然后再點(diǎn)擊中間的“轉(zhuǎn)換”按鈕，這樣工具就會(huì)在下面文本框生成你要粘貼到論壇的UBB文本，同時(shí)目標(biāo)代碼處于選中狀態(tài)，你復(fù)制即可。
注意：如果你的HTML代碼與我的標(biāo)準(zhǔn)不一樣，轉(zhuǎn)換肯定會(huì)出問(wèn)題的，你可以根據(jù)自己的代碼標(biāo)準(zhǔn)修改這個(gè)工具的部分代碼，使其達(dá)到自己想要的效果。本文只是提供一個(gè)思路。 作者 webflash
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了javascript函數(shù)，幫助大家更好的理解js函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家介紹了TypeScript類型使用示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
13個(gè)簡(jiǎn)單的代碼優(yōu)化方法，可以讓你的代碼在 Chrome 的 V8 JavaScript 引擎編譯/運(yùn)行你的 JavaScript 代碼更加快速2012-07-07
IE瀏覽器不支持getElementsByClassName的解決方法
這篇文章主要介紹了IE瀏覽器不支持getElementsByClassName的解決方法,本文的方法比較完美的解決了這個(gè)問(wèn)題,需要的朋友可以參考下2014-08-08
使用js檢測(cè)瀏覽器是否支持html5中的video標(biāo)簽的方法
這篇文章主要介紹了使用js檢測(cè)瀏覽器是否支持html5中的video標(biāo)簽的方法,需要的朋友可以參考下2014-03-03
Javascript 鼠標(biāo)移動(dòng)上去 滑塊跟隨效果代碼分享
這篇文章主要介紹了Javascript 鼠標(biāo)移動(dòng)上去 滑塊跟隨效果代碼，有需要的朋友可以參考一下2013-11-11
javascript面向?qū)ο蟀b類Class封裝類庫(kù)剖析
一個(gè)從來(lái)沒(méi)有接觸過(guò)javascript的技術(shù)人員，幾小時(shí)內(nèi)就可以寫(xiě)出一個(gè)簡(jiǎn)單有用的程序代碼;想寫(xiě)出高性能的代碼，同樣需要具備一個(gè)高級(jí)程序員的基本素養(yǎng),javascript也是如此2013-01-01
Layui框架的table.render方法是用于渲染表格的核心功能,通過(guò)配置對(duì)象定義表格樣式、列和數(shù)據(jù)源,cols數(shù)組中的每個(gè)對(duì)象通過(guò)field屬性與數(shù)據(jù)源綁定,指定要顯示的數(shù)據(jù)字段,本文給大家介紹Layui?table.render的使用,感興趣的朋友一起看看吧2024-09-09
typescript在node.js下使用別名(paths)無(wú)效的問(wèn)題詳解
這篇文章主要給大家介紹了關(guān)于typescript在node.js下使用別名(paths)無(wú)效問(wèn)題的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-07-07
微信小程序國(guó)際化探索實(shí)現(xiàn)(附源碼地址)
這篇文章主要介紹了微信小程序國(guó)際化探索實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05