UBB 转换函数演示

2016-01-29 11:50 10 1 收藏

UBB 转换函数演示,UBB 转换函数演示

【 tulaoshi.com - Javascript 】

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

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

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

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

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

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 </div> <p style="color:#333;margin:10px 0;">来源:http://www.tulaoshi.com/n/20160129/1483526.html</p> </div> <div id="tls-pages" class="tls-pages"></div> <ul class="pages-two"> <li class="pages-two-item"> <span>上一篇：</span> <a href="/n/20160129/1483525.html">AutoCAD经验分享：关于阿波罗尼斯圆(阿氏圆)</a> </li> <li class="pages-two-item"> <span>下一篇：</span> <a href="/n/20160129/1483529.html">PSV《讨鬼传极》攻魂风格十大强力御魂介绍</a> </li> </ul> </div> </div> <div class="contain-left read-more"> <p class="inter-tit rel"> <a href="javascript:;">看过《UBB 转换函数演示》的人还看了以下文章</a> <a href="/diannao/" class="C_hs_nr_111_a">更多>></a> </p> <ul class="read-list clearfix style-circle"> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1483526.html">UBB 转换函数演示</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1605823.html">UBB 转换函数演示 (经典论坛)</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1605787.html">Html转换UBB程序</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1605430.html">ubb代码转换为html</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1605471.html">asp的ubb函数（推荐）</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1605403.html">简单的Html转换UBB的程序</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1617388.html">Access 类型转换函数</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1598327.html">教学演示-UBB,剪贴板,textRange及其他</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1591897.html">Mysql 数字类型转换函数</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1510926.html">货币大写转换函数的更新</a> <span class="fr">01-29</span> </li> </ul> </div> <div class="contain-left site-output"><script>tls.output.www_news('banner2_780')</script></div> <div class="contain-left site-output"><script>tls.output.www_news('banner3_780')</script></div> <div class="vertical-tab-box contain-left"> <div class="recommend-tit clearfix"> <div class="recommend-tit-cont">延伸阅读</div> </div> <div class="lx-news-box"> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160220/1632855.html">JS教程：日期格式转换函数</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160220/1632855.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/20/7910e814911deb6c63b1b7fc4b372d7e_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> <div class="ks-news-desc"> JS教程：日期格式转换函数。 script function str2date(str){ var d=null; var reg=/^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})\.(\d+)$/ if(arr=str.match(reg))d=new Date...</div> </div> </div> <div class="site-output"><script>tls.output.www_news('banner4_780')</script></div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1621931.html">mysql 时间转换函数的用法</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1621931.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/f7ae7315aabd24f9faa97aec89617fea_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/bianchengyuyan/" target="_blank">编程语言</a> <a href="http://www.tulaoshi.com/wangluobiancheng/" target="_blank">网络编程</a> </div> <div class="ks-news-desc"> mysql 时间转换函数的用法2007-10-31 15:03DAYOFWEEK(date) 返回日期date的星期索引(1=星期天，2=星期一, ……7=星期六)。这些索引值对应于ODBC标准。 mysql select DAYOFWEEK(2007-10-31); - 4 WEEKDAY(date) 返回date的星期索引(0=星期一，1=星期二, ……6= 星期天)。 mysql select WEEKDAY('2007-10-31 13:05:0...</div> </div> </div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1605426.html">ubb js</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1605426.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/284b8ed78c8c6be4e466f0f41916064a_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> <div class="ks-news-desc"> strIcons = "1" //允许笑脸转换 strSmile="1" //同上 ImgName="em" picurl="/images/emot/" function UBBCode(content,html){ content=content.replace("\\r",""); content=content.replace("\\n",""); return (trans(content)); } function trans(strContent){ var re; re=/\[IMG\](.+？)\[\/IMG\]/ig; strContent=strContent.replac...</div> </div> </div> <div class="site-output"><script>tls.output.www_news('banner5_780')</script></div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1506150.html">将半角转换为中文的函数</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160129/1506150.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201601/29/60f8e2a9705841681981cdc41e359b81_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/asp/" target="_blank">ASP</a> </div> <div class="ks-news-desc"> function new_str(str) if instr(str,chr(34))<0 and str<"" then str_split=split(str,chr(34)) i=1 str_s="" for j=0 to ubound(str_split)-1 if i mod 2 then str_s=str_s&str_split(j)&"“&quo...</div> </div> </div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1595028.html">一个不错的用JavaScript实现的UBB编码函数</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1595028.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/def397a12ef686f6f13e9741a3ccb11d_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> <div class="ks-news-desc"> function JsUBB(str) { var re=//[i/](.[^/[]*)/[//i/]/gi; str=str.replace(re,"i$1/i"); //斜体字 re=//[b/](.[^/[]*)/[//b/]/gi; str=str.replace(re,"b$1/b"); //粗体字 re=//[u/](.[^/[]*)/[//u/]/gi; str=str.replace(...</div> </div> </div> <div class="news-more-btn"> <a class="btn btn-block btn-default" title="查看更多精彩" href="/diannao/">查看更多精彩>></a> </div> </div> </div> <div class="contain-left site-output"><script>tls.output.www_news('banner6_780')</script></div> </div>  <div class="conter_300"> <div class="contain-right site-output"><script>tls.output.www_news('right1_300')</script></div> <div class="Member clearfix"> <div class="Menber_tx_1 rel"> <a href="/user/heaven天使之缘/1/"> <img class="member-img" src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/26.jpg" width="70" height="70" alt="heaven天使之缘"> </a> <a href="/user/heaven天使之缘/1/" id="username">heaven天使之缘</a> </div> <div class="Menber_tx_ww"> <div class="Menter_tx_ww_1"> <p>经验教程</p> <a href="/user/heaven天使之缘/1/">490</a> </div> <div class="Menter_tx_ww_1 right_j"> <p>收藏</p> <a href="/user/heaven天使之缘/2/">87</a> </div> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right2_300')</script></div>  <div class="hop_gg clearfix js-tab"> <div class="hop_gg_s clearfix tab_control2"> <a class="js-tab-item active" href="javascript:;">最新文章</a> </div> <div class="hop_gg_xg2_box"> <div class="hop_gg_xg2 js-tab-list active"> <ul> <li><a href="http://www.tulaoshi.com/n/20160129/1483525.html">AutoCAD经验分享：关于阿波罗尼斯圆(阿氏圆)</a></li> <li><a href="http://www.tulaoshi.com/n/20160129/1483524.html">HTML语言剖析（十）链接标记</a></li> <li><a href="http://www.tulaoshi.com/n/20160129/1483523.html">AutoCAD教程：低版本精确拉伸三维五角星</a></li> <li><a href="http://www.tulaoshi.com/n/20160129/1483522.html">AutoCAD教程：如何运用“放样”命令做三维习题</a></li> <li><a href="http://www.tulaoshi.com/n/20160129/1483521.html">HTML组件(HTML COMPONENTS)之五</a></li> </ul> </div> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right3_300')</script></div> <div class="hop_gg clearfix js-tab newest-msg"> <div class="hop_gg_s clearfix"> <a href="javascript:;" class="js-tab-item active" >Javascript</a> </div> <div class="hop_gg_xg2_box"> <div class="hop_gg_xg2 js-tab-list active" > <ul class="news-list mt5 has-ad-list"> <li class="news-list-item"> <span class="range-type">01</span> <a href="http://www.tulaoshi.com/n/20160129/1483586.html">弹出网页窗口全攻略</a> </li> <li class="news-list-item"> <span class="range-type">02</span> <a href="http://www.tulaoshi.com/n/20160129/1483555.html">鼠标右键显隐效果</a> </li> <li class="news-list-item"> <span class="range-type">03</span> <a href="http://www.tulaoshi.com/n/20160129/1483553.html">仿 Office 2003 的工具条</a> </li> <li class="news-list-item"> <span class="range-type">04</span> <a href="http://www.tulaoshi.com/n/20160129/1483552.html">禁止右键、Ctrl键和复制功能的JS代码</a> </li> </ul> </div> </div> <div class="site-output"><script>tls.output.www_news('right4_300')</script></div> </div> <div class="fixed-right"> <div class="hop_gg clearfix"> <h3>精华推荐</h3> <div class="jinghua-list"> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1611846.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/19a5f0be90f5065bfd3292611d0a327f_thumb_189.jpg" alt="IntToBin(2-16进制转换函数)"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160219/1611846.html">IntToBin(2-16进制转换函数)</a> </p> <p class="jinghua-item-tag">更止女人痛</p> </dd> </dl> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1602517.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/6deca15c1d547bc44ec9a7f1b45bc8b0_thumb_189.jpg" alt="widechar单双字节转换函数Asc"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160219/1602517.html">widechar单双字节转换函数Asc</a> </p> <p class="jinghua-item-tag">倾听雨水声响</p> </dd> </dl> <div class="site-output"><script>tls.output.www_news('right5_300')</script></div> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160220/1648186.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/20/3ed7f85f9a142323a5603d0cbfda4423_thumb_189.jpg" alt="将演示文档转换成Flash文件"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160220/1648186.html">将演示文档转换成Flash文件</a> </p> <p class="jinghua-item-tag">小鱼子呀</p> </dd> </dl> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right6_300')</script></div>  <div class="hop_gg clearfix"> <h3>热门标签</h3> <div class="hot-tag-box-item"> <a class="hot-tag col_3" href="http://www.tulaoshi.com/ifhanshu/" title="if函数">if函数</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/jinzhizhuanhuan/" title="进制转换">进制转换</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/sumhanshu/" title="SUM函数">SUM函数</a> <a class="hot-tag col_3" href="http://www.tulaoshi.com/excelsunhanshu/" title="ExcelSUN函数">ExcelSUN函数</a> <a class="hot-tag col_6" href="http://www.tulaoshi.com/minhanshu/" title="MIN函数">MIN函数</a> <a class="hot-tag col_5" href="http://www.tulaoshi.com/midhanshu/" title="MID函数">MID函数</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/indexhanshu/" title="INDEX函数">INDEX函数</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/rowhanshu/" title="ROW函数">ROW函数</a> <a class="hot-tag col_9" href="http://www.tulaoshi.com/lefthanshu/" title="LEFT函数">LEFT函数</a> <a class="hot-tag col_7" href="http://www.tulaoshi.com/sumifhanshu/" title="SUMIF函数">SUMIF函数</a> <a class="hot-tag col_9" href="http://www.tulaoshi.com/indirecthanshu/" title="INDIRECT函数">INDIRECT函数</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/matchhanshu/" title="MATCH函数">MATCH函数</a> <a class="hot-tag col_7" href="http://www.tulaoshi.com/lenhanshu/" title="LEN函数">LEN函数</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/vlookuphanshu/" title="VLOOKUP函数">VLOOKUP函数</a> <a class="hot-tag col_6" href="http://www.tulaoshi.com/countifshanshu/" title="countifs函数">countifs函数</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/counthanshu/" title="COUNT函数">COUNT函数</a> <a class="hot-tag col_2" href="http://www.tulaoshi.com/averagehanshu/" title="average函数">average函数</a> <a class="hot-tag col_9" href="http://www.tulaoshi.com/maxhanshu/" title="MAX函数">MAX函数</a> <a class="hot-tag col_5" href="http://www.tulaoshi.com/countifhanshu/" title="countif函数">countif函数</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/shiliujinzhizhuanhuanashiliujinzhi/" title="十六进制转换">十六进制转换</a> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right0_300')</script></div> </div> </div> <div class="float_bottom js-share-box" id="fixbottom"> <div class="float_bot_1"> <a href="javascript:;" class="icon-share icon-share71" id="weixin_show_btn"></a> <img src="https://pan.baidu.com/share/qrcode?w=150&h=150&url=http://m.tulaoshi.com/n/20160129/1483526.html" style="right:0;left:0;top:-130px;display:none; border:1px solid #e5e5e5; background:#fff; padding:10px; width:100px" id="weixin_show"> </div> <a href="javascript:;" class="icon-share icon-share11 js-share-weibo">微博分享</a> <a href="javascript:;" class="icon-share icon-share21 js-share-qq">QQ分享</a> <a href="javascript:;" class="icon-share icon-share31 js-share-qzone">QQ空间</a> <a href="http://m.tulaoshi.com/n/20160129/1483526.html" class="icon-share icon-share41">手机页面</a> <a href="javascript:;" class="icon-share icon-share51" id="fav_site_btn" data-url="http://www.tulaoshi.com/n/20160129/1483526.html">收藏网站</a> <a href="javascript:;" class="icon-share icon-share61" id="totop">回到头部</a> </div> <div class="c_xins" style="display:none;"> <a href="http://m.tulaoshi.com/n/20160129/1483526.html"> UBB 转换函数演示移动版</a> </div> </div>  <script type="text/javascript">tls.output.show_foot();</script>   <script src="http://static.tulaoshi.com/js/pc_show.min.js"></script> </body> </html>