【图】UBB 转换函数演示

UBB代码对于经常上论坛的朋友来说是最熟悉不过了。这里我不多说了，关于怎么实现UBB转换，不了解的朋友请看这里正则表达式在ＵＢＢ论坛中的应用。

经典论坛的UBB转换我觉得是处理的非常好的，研究了一下它的转换结果[因为没有源码:)]，做了下面的演示。转换结果基本上觉得象了。

主要是针对[code][html]这两个标签的处理，其他的UBB标签还是一般的处理方法。

（本文来源于图老师网站，更多请访问http://m.tulaoshi.com）

下面是分别用javascript和vbscript实现的演示。自己做论坛的朋友，如果想实现类似经典论坛的运行代码框可以看看这种转换。

欢迎大家输入尽量多格式的UBB进行测试，多多指出错误。

（本文来源于图老师网站，更多请访问http://m.tulaoshi.com）

javascript:

运行代码框
<style.CodeSamp {PADDING-RIGHT: 0.5em; MARGIN-TOP: 1em; PADDING-LEFT: 0.5em; FONT-SIZE: 8p; MARGIN-BOTTOM: 1em; PADDING-BOTTOM: 0.5em; MARGIN-LEFT: 0pt; PADDING-TOP: 0.5em; FONT-FAMILY: "Courier New"; BACKGROUND-COLOR: #eeeeee;width: 480px;overflow:hidden;border: 1px solid #888888;}textarea {border-width: 1; border-color: #000000;font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";}</style<TEXTAREA name=phx cols=65 rows=12[i][b][color=blue]blue[/color][/b][/i][html][color=red]test[/color][/html][html][code]test[/code][/html][code][html]test[/html][/code]</textarea<br<button onclick=show.innerHTML=UBBCode(phx.value,"html")转换</button<br<div id=show style="border:1 solid skyblue;width=500;font-size: 12px;FONT-FAMILY: 'Tahoma', 'MS Shell Dlg';"</div<scriptstrIcons = "1" //允许笑脸转换strSmile="1" //同上ImgName="em"picurl="pic/"function UBBCode(content,html){st=new Date().getTime()content=content.replace(/[(/)?phx_code]/ig,"{$1phx_code}");content=content.replace(/[(/)?phx_html]/ig,"{$1phx_html}");content="[phx_code]"+content+"[/phx_code]"; content=content.replace(/([code]([sS]+?)[/code])/ig,"[/phx_code]$1[phx_code]");content=content.replace(/[phx_code]([sS]*?)[/phx_code]/ig,function($1,$2){if(html=="html"){return(HTMLCode($2));}else{return(trans($2));}});content=content.replace(/[code](rn)?([sS]+?)[/code]/ig,function($1,$2,$3){return("<PRE class=CodeSamp"+DvbbsHtmlAn($3)+"</PRE")});content=content.replace(/{(/)?phx_code}/ig,"[$1phx_code]");content=content.replace(/{(/)?phx_html}/ig,"[$1phx_html]");alert('共耗时 '+eval(new Date().getTime()-st)+' ms');return(content);}function HTMLCode(content){content="[phx_html]"+content+"[/phx_html]"; content=content.replace(/([html]([sS]+?)[/html])/ig,"[/phx_html]$1[phx_html]");content=content.replace(/[phx_html]([sS]*?)[/phx_html]/ig,function($1,$2){return(trans($2))});content=content.replace(/[html]([sS]+?)[/html]/ig,function($1,$2){return("<span<TEXTAREA cols=95 rows=12"+hencode($2)+"</TEXTAREA<br<INPUT onclick=runCode() type=button value=运行代码[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]</span")});return(content);}function hencode(fString){ //简单模拟server.htmlencode ASP中不用这个fString = fString.replace(/&/ig,"&") fString = fString.replace(//ig,">")//fString = fString.replace(/</ig,"<")//<return fString;}function DvbbsHtmlAn(fString){if(fString=="")return("");fString=hencode(fString)fString = fString.replace(/t/ig,"   ")//TabfString = fString.replace(/"/ig,""")//"fString = fString.replace(/'/ig,"'")//'fString = fString.replace(/r/ig,"")//回车是一个13+10fString = fString.replace(/nn/ig,"<P")//fString = fString.replace(/n/ig,"<BR")//换行fString = fString.replace(/x20/ig," ")//空格return(fString);}function trans(strContent){var re;strContent=DvbbsHtmlAn(strContent);re=/[IMG](.+?)[/IMG]/ig;strContent=strContent.replace(re,"<a href=$1 targ </article> </section> <section class="article-more"> <div class="rel mask-box"> <div class="content-mask"></div> <div class="content-more js-content-more">展开更多 <span>（<span class="cont-remain">50</span>%）</span> <i class="icon-arrow"></i> </div> </div> <div class="gg show-pageup" data-id="pageup"></div> <div class="soshm-box"> <div class="soshm-title"><span>分享</span></div> <div id="soshm-box"></div> </div> <div class="gg show-pagedown" data-id="pagedown"></div> <div id="wechat"></div> </section><section class="section you-like"> <header class="section-header"> <h3 class="section-title">猜你喜欢</h3> <div class="section-toolbar"> <a class="section-more" href="javascript:;" title="查看更多相关文章"> <span></span> <span></span> <span></span> </a> </div> </header> <div id="bd-recommend"></div> <div class="article-list"> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160129/1483526.html" title="UBB 转换函数演示">UBB 转换函数演示</a></h4> <div class="article-item-meta"> <a href="/diannao/" title="电脑网络">电脑网络</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160129/1483526.html" title="UBB 转换函数演示"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201601/29/49160bb08ec1079e920b682ee1fb6319_thumb_189.jpg" alt="UBB 转换函数演示"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160219/1605823.html" title="UBB 转换函数演示 (经典论坛)">UBB 转换函数演示 (经典论坛)</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160219/1605823.html" title="UBB 转换函数演示 (经典论坛)"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/9d294940730a5619fa22cd51ff2b4d78_thumb_189.jpg" alt="UBB 转换函数演示 (经典论坛)"></a> </div> </div> <div class="gg" data-id="content1"></div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20171117/2766281.html" title="s8lol主宰符文怎么配">s8lol主宰符文怎么配</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/yingxionglianmeng/" target="_blank">英雄联盟</a> <a href="http://m.tulaoshi.com/wangluoyouxi/" target="_blank">网络游戏</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20171117/2766281.html" title="s8lol主宰符文怎么配"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201711/17/2b6780a6d697ab474ec43d2b143a8c33.jpg" alt="s8lol主宰符文怎么配"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160219/1605787.html" title="Html转换UBB程序">Html转换UBB程序</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160219/1605787.html" title="Html转换UBB程序"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/2c6a2619b1636b3df1dee2ccd60e559b_thumb_189.jpg" alt="Html转换UBB程序"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160219/1605430.html" title="ubb代码转换为html">ubb代码转换为html</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160219/1605430.html" title="ubb代码转换为html"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/f111ffc610fd17c73efc3be7bdf6f56a_thumb_189.jpg" alt="ubb代码转换为html"></a> </div> </div> <div class="gg" data-id="content2"></div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20171116/2766194.html" title="lol偷钱流符文搭配推荐">lol偷钱流符文搭配推荐</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/yingxionglianmeng/" target="_blank">英雄联盟</a> <a href="http://m.tulaoshi.com/wangluoyouxi/" target="_blank">网络游戏</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20171116/2766194.html" title="lol偷钱流符文搭配推荐"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201711/16/68ce3c7443802f29f089fd2b8aeacfac.jpg" alt="lol偷钱流符文搭配推荐"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160219/1605471.html" title="asp的ubb函数（推荐）">asp的ubb函数（推荐）</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160219/1605471.html" title="asp的ubb函数（推荐）"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/4d21b195356043cc148f5849ddcf3812_thumb_189.jpg" alt="asp的ubb函数（推荐）"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160219/1605403.html" title="简单的Html转换UBB的程序">简单的Html转换UBB的程序</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160219/1605403.html" title="简单的Html转换UBB的程序"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/d8436e37c25c18fecfd1f2f90edc2a85_thumb_189.jpg" alt="简单的Html转换UBB的程序"></a> </div> </div> <div class="gg" data-id="content3"></div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20171116/2766140.html" title="lolAD刺客新符文搭配推荐">lolAD刺客新符文搭配推荐</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/yingxionglianmeng/" target="_blank">英雄联盟</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20171116/2766140.html" title="lolAD刺客新符文搭配推荐"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201711/16/bd0c64bbcf0c4a08cdc15ba757ac2fa3.jpg" alt="lolAD刺客新符文搭配推荐"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="/n/20160129/1483525.html">AutoCAD经验分享：关于阿波罗尼斯圆(阿氏圆)</a></h4> </div> <div class="article-item-thumb"> <a href="/n/20160129/1483525.html" title="AutoCAD经验分享：关于阿波罗尼斯圆(阿氏圆)"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201601/29/81493e8dd75788bfc62bc0bfaf923f56_thumb_189.jpg" alt="AutoCAD经验分享：关于阿波罗尼斯圆(阿氏圆)"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="/n/20160129/1483529.html">PSV《讨鬼传极》攻魂风格十大强力御魂介绍</a></h4> </div> <div class="article-item-thumb"> <a href="/n/20160129/1483529.html" title="PSV《讨鬼传极》攻魂风格十大强力御魂介绍"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201601/29/f480b64ea09e2c00ce69b93e9bebe785_thumb_189.jpg" alt="PSV《讨鬼传极》攻魂风格十大强力御魂介绍"></a> </div> </div> <div class="gg" data-id="content4"></div> </div> </section> <div class="loadbox"> <div class="load-btn">下拉加载更多内容 ↓</div> <div class="icon-loading"></div> </div> <div class="gg show-banner2" data-id="banner2"></div> <div class="gg show-foot" data-id="foot"></div> </section> <footer id="footer" class="site-footer"> <ul class="footer-nav"> <li><a href="/" title="图老师首页">首页</a></li> <li><a href="/diannao/sitemap/" title="地图">地图</a></li> <li><a href="/update/6/" title="最新">最新</a></li> </ul> </footer> <div id="fixed-box" class="js-insert-box" data-id="fixed"></div> <script src="http://i1.tulaoshi.com/js/mobile.js"></script> <script type="application/ld+json"> { "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld", "@id": "http://m.tulaoshi.com/n/20160129/1483526.html", "appid": "1556758182286999", "title": "UBB 转换函数演示", "images": [ "http://img.tulaoshi.com/201601/29/49160bb08ec1079e920b682ee1fb6319_thumb_189.jpg" ], "description": "UBB 转换函数演示,UBB 转换函数演示 ", "pubDate": "2016-01-29T11:50:11" } </script></body></html>