UBB 转换函数演示

答案：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><font color=blue>blue</font></b>[/i][html]<font color=red>test</font>[/html][html]<table width='100%' border='0' cellspacing='0' cellpadding='6' class=tableborder1><td><b>以下内容为程序代码:</b><br>test</td></table>[/html]<table width='100%' border='0' cellspacing='0' cellpadding='6' class=tableborder1><td><b>以下内容为程序代码:</b><br><table width='100%' border='0' cellspacing='0' cellpadding='6' class=tableborder1><td><b>以下内容为程序代码:</b><br>test</td></table></td></table></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><script>strIcons = "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\]([\s\S]+?)\[\/code\])/ig,"[/phx_code]$1[phx_code]");content=content.replace(/\[phx_code\]([\s\S]*?)\[\/phx_code\]/ig,function($1,$2){if(html=="html"){return(HTMLCode($2));}else{return(trans($2));}});content=content.replace(/\[code\](\r\n)?([\s\S]+?)\[\/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\]([\s\S]+?)\[\/html\])/ig,"[/phx_html]$1[phx_html]");content=content.replace(/\[phx_html\]([\s\S]*?)\[\/phx_html\]/ig,function($1,$2){return(trans($2))});content=content.replace(/\[html\]([\s\S]+?)\[\/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,"&amp;")  fString = fString.replace(/>/ig,"&gt;") //> fString = fString.replace(/</ig,"&lt;") //<return fString;}function DvbbsHtmlAn(fString){if(fString=="")return("");fString=hencode(fString) fString = fString.replace(/\t/ig,"&nbsp;&nbsp;&nbsp;") //Tab fString = fString.replace(/"/ig,"&quot;")    //" fString = fString.replace(/'/ig,"&#39;")    //' fString = fString.replace(/\r/ig,"")     //回车是一个13+10 fString = fString.replace(/\n\n/ig,"<P>")    //  fString = fString.replace(/\n/ig,"<BR>")    //换行 fString = fString.replace(/\x20/ig,"&nbsp;")   //空格  return(fString);}function trans(strContent){var re;strContent=DvbbsHtmlAn(strContent);  re=/\[IMG\](.+?)\[\/IMG\]/ig; strContent=strContent.replace(re,"<a href=$1 target=_blank><IMG SRC=$1 border=0 alt=按此在新窗口浏览图片 onload=\"javascript:if(this.width>screen.width-333)this.width=screen.width-333\" galleryImg=no></a>"); re=/\[DIR=*([0-9]*),*([0-9]*)\](.*?)\[\/DIR]/ig strContent=strContent.replace(re,"<object classid=clsid:166B1BCA-3F9C-11CF-8075-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=7,0,2,0 width=$1 height=$2><param name=src value=$3><embed src=$3 pluginspage=http://www.macromedia.com/shockwave/download/ width=$1 height=$2></embed></object>") re=/\[QT=*([0-9]*),*([0-9]*)\](.*?)\[\/QT]/ig strContent=strContent.replace(re,"<embed src=$3 width=$1 height=$2 autoplay=true loop=false controller=true playeveryframe=false cache=false scale=TOFIT bgcolor=#000000 kioskmode=false targetcache=false pluginspage=http://www.apple.com/quicktime/>") re=/\[MP=*([0-9]*),*([0-9]*)\](.*?)\[\/MP]/ig strContent=strContent.replace(re,"<object align=middle classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 class=OBJECT id=MediaPlayer width=$1 height=$2 ><param name=ShowStatusBar value=-1><param name=Filename value=$3><embed type=application/x-oleobject codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701 flename=mp src=$3  width=$1 height=$2></embed></object>") re=/\[RM=*([0-9]*),*([0-9]*)\](.*?)\[\/RM]/ig strContent=strContent.replace(re,"<OBJECT classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA class=OBJECT id=RAOCX width=$1 height=$2><PARAM NAME=SRC VALUE=$3><PARAM NAME=CONSOLE VALUE=Clip1><PARAM NAME=CONTROLS VALUE=imagewindow><PARAM NAME=AUTOSTART VALUE=true></OBJECT><br><OBJECT classid=CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA height=32 id=video2 width=$1><PARAM NAME=SRC VALUE=$3><PARAM NAME=AUTOSTART VALUE=-1><PARAM NAME=CONTROLS VALUE=controlpanel><PARAM NAME=CONSOLE VALUE=Clip1></OBJECT>") re=/(\[FLASH\])(.*?)(\[\/FLASH\])/ig strContent= strContent.replace(re,"<OBJECT codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=500 height=400><PARAM NAME=movie VALUE=$2><PARAM NAME=quality VALUE=high><embed src=$2 quality=high pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width=500 height=400>$2</embed></OBJECT>") re=/(\[FLASH=*([0-9]*),*([0-9]*)\])(.*?)(\[\/FLASH\])/ig strContent= strContent.replace(re,"<a href=$4 TARGET=_blank><IMG SRC=http://old.zzzyk.com/article/Article/pic/swf.gif border=0 alt=点击开新窗口欣赏该FLASH动画!> [全屏欣赏]</a><br><br><OBJECT codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=$2 height=$3><PARAM NAME=movie VALUE=$4><PARAM NAME=quality VALUE=high><param name=menu value=false><embed src=$4 quality=high menu=false pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width=$2 height=$3>$4</embed></OBJECT>") re=/(\[UPLOAD=gif\])(.*?)(\[\/UPLOAD\])/ig strContent= strContent.replace(re,"<br><IMG SRC="+picurl+"gif.gif border=0>此主题相关图片如下：<br><A HREF=$2 TARGET=_blank><IMG SRC=$2 border=0 alt=按此在新窗口浏览图片 onload=\"javascript:if(this.width>screen.width-333)this.width=screen.width-333\"></A>") re=/(\[UPLOAD=jpg\])(.*?)(\[\/UPLOAD\])/ig strContent= strCo</pre><p>上一个：<a href="/show/5261d78a67bc9b4d.htm">用 onerror 获取错误信</a><br/>下一个：<a href="/show/4852e1a68b609205.htm">用js封装的时间设置器</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/823b6f19b9219e6f.htm"><img src='/upload/2013111519/20130722120114555.jpg' width=105 height=105><br/>21例运用大图的网页设计案例赏析</a></li><li><a href="/show/074f1d0ec5ba5822.htm"><img src='/upload/2013111519/20110810083445906.jpg' width=105 height=105><br/>阿欣分享企业网站主页布局优化技巧</a></li><li><a href="/show/95fa6fcff3217c64.htm"><img src='/upload/2006-3/2006313143152621.gif' width=105 height=105><br/>禁止背景图在网页中平铺</a></li><li><a href="/show/f67f5c97cc98ab73.htm"><img src='/upload/2013111520/20120113021929814.jpg' width=105 height=105><br/>开发者视角论述HTML5平台的7大特点</a></li><li><a href="/show/63222dddf416b4ab.htm"><img src='/upload/20121014/logotakipup5ogt.gif' width=105 height=105><br/>CSS实现的一个图片放大展示的一种思路</a></li><li><a href="/show/6043c97b13d21a0e.htm"><img src='/upload/2013111519/20110528235834237.jpg' width=105 height=105><br/>30佳灵感来自大自然的网页设计作品欣赏</a></li></ul></div></div>
  <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/20_1.htm">html/css</a>疑问解答：</dt><dd><a target="_blank" href="/show/f0abaa265941e3c4.htm">div+css中关于ie浏览器中非啊元素的：hover的实现问题，哪位大神指点下啊</a></dd><dd><a target="_blank" href="/show/1d490bcbf845df42.htm">css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px</a></dd><dd><a target="_blank" href="/show/30fc49ffb65095fd.htm">css 属性选择器 ie6 不支持吗？</a></dd><dd><a target="_blank" href="/show/444e0d933ece33d2.htm">用css、jquery做的选项卡效果，有一个小疑问，请高手指点，代码如下：</a></dd><dd><a target="_blank" href="/show/5ec69e3e254c31bd.htm">介绍本学习css的书</a></dd><dd><a target="_blank" href="/show/274696a075ea0ad6.htm">wordpress多个CSS样式怎么调用？</a></dd><dd><a target="_blank" href="/show/ab96793bdf130c30.htm">这个div 的css是如何编写的</a></dd><dd><a target="_blank" href="/show/997828f54b6aaf75.htm">div+css中，div的右边框小于div的高度且居中，除了用背景图片，如何实现？</a></dd><dd><a target="_blank" href="/show/3fe6f53e6871f210.htm">表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写</a></dd><dd><a target="_blank" href="/show/a50fb65de28b11cf.htm">CSS 在一个大的DIV里面，另一个DIV怎么居中并置底。</a></dd><dd><a target="_blank" href="/show/b7069a9e10783e31.htm">dw中html文档为什么无法链接css文档</a></dd><dd><a target="_blank" href="/show/a754f4de9f8673a9.htm">设计一个小例子说明DIV+CSS的优势（例子要解释并注释）。</a></dd><dd><a target="_blank" href="/show/c4dc365c19005b78.htm">我会html css目前正在学js，打算在大三的寒假找个实习，请问应该找哪方面的实习？</a></dd><dd><a target="_blank" href="/show/2254e9fc1e4ecb65.htm">css问题，跪求大大帮忙</a></dd><dd><a target="_blank" href="/show/c0e820d5407b3236.htm">请教网页设计高手，如下图的这种css代码怎么写？</a></dd></dl></div>
</div>
<div id="zykleft">
  <div class="leftm">
    <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a>
    	<div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div>
      <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div>
    <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>请访问www.zzzyk.com 试试</dl>
  </div>
  <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div>
  <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div>
</div></div>
<div class="clear"></div>
<div class="bdshare">
  <script type="text/javascript" src="/js/share.js"></script>
</div>
<div class="clear"></div>
<div class="foot">CopyRight © 2012 站长网 编程知识问答 <a href="http://www.zzzyk.com">www.zzzyk.com</a> All Rights Reserved<br/>部份技术文章来自网络，<script type="text/javascript" src="/images/my.js"></script>
</div>
</body>
</html>