UBB/HTML互相转换简单实现源码一览
2017-10-24 18:04
441 查看
查看源码,主要用的就是正则匹配,多的不说,直接读码。
效果图如下
![](https://oscdn.geek-share.com/Uploads/Images/Content/201710/9951555ca0a5b4c9175e0e45a03ce3c9.png)
以下源码:
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>UBB/HTML转换</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="./css/basic.css?20120912" type="text/css"/> <script type="text/javascript" src='./js/jquery/jquery-1.7.2.min.js'></script> <link rel="stylesheet" href='./js/bootstrap/css/bootstrap.min.css'/> <script src='./js/bootstrap/js/bootstrap.min.js'></script> </head> <body> <div id="mainContent" class="wrapper"> <div class="toolName">UBB/HTML转换</div> <div class="toolUsing clearfix"> <div class="leftBar"> <div class="title">UBB:</div> <textarea name="cipher" id="u_source" onkeyup="to_html();">this is a example</textarea> </div> <div class="operateLR"> <div class="OptDetail Button"> <button class="btn btn-primary" onclick="javascript:to_html();"> HTML <i class="icon-chevron-right icon-white"></i></button><br><br> <button class="btn btn-primary" onclick="javascript:to_ubb();"><i class="icon-chevron-left icon-white"></i> UBB </button><br><br> <button class="btn btn-primary active" data-toggle="button" id="realtime">实时预览</button> </div> </div> <div class="rightBar"> <div class="title">HTML:</div> <textarea name="message" id="h_source" class="text_source" onkeyup="to_ubb();"></textarea> </div> </div> <div id="realtime-wrapper" style="margin-top:10px;"> <lalel>实时预览:</lalel> <div id="realtime-preview" class="well" style="margin-top:10px;"></div> </div> </div> <script> $(function(){ //实时预览 $("#realtime").click(function(){ $("#realtime-wrapper").toggle(); }); }); function to_ubb(){ var html = $("#h_source").val(); $("#realtime-preview").html(html); str = pattern(html); $("#u_source").val(str); } function pattern(str){ //str = str.replace(/(\r\n|\n|\r)/ig, ''); str = str.replace(/<br[^>]*>/ig,'\n'); str = str.replace(/<p[^>\/]*\/>/ig,'\n'); //str = str.replace(/\[code\](.+?)\[\/code\]/ig, function($1, $2) {return phpcode($2);}); str = str.replace(/\son[\w]{3,16}\s?=\s*([\'\"]).+?\1/ig,''); str = str.replace(/<hr[^>]*>/ig,'[hr]'); str = str.replace(/<(sub|sup|u|strike|b|i|pre)>/ig,'[$1]'); str = str.replace(/<\/(sub|sup|u|strike|b|i|pre)>/ig,'[/$1]'); str = str.replace(/<(\/)?strong>/ig,'[$1b]'); str = str.replace(/<(\/)?em>/ig,'[$1i]'); str = str.replace(/<(\/)?blockquote([^>]*)>/ig,'[$1blockquote]'); str = str.replace(/<img[^>]*smile=\"(\d+)\"[^>]*>/ig,'[s:$1]'); str = str.replace(/<img[^>]*src=[\'\"\s]*([^\s\'\"]+)[^>]*>/ig,''); str = str.replace(/<a[^>]*href=[\'\"\s]*([^\s\'\"]*)[^>]*>(.+?)<\/a>/ig,''+'$2'+''); //str = str.replace(/<h([1-6]+)([^>]*)>(.*?)<\/h\1>/ig,function($1,$2,$3,$4){return h($3,$4,$2);}); str = str.replace(/<[^>]*?>/ig, ''); str = str.replace(/&/ig, '&'); str = str.replace(/</ig, '<'); str = str.replace(/>/ig, '>'); return str; } function up(str){ str = str.replace(/</ig,'<'); str = str.replace(/>/ig,'>'); str = str.replace(/\n/ig,'<br />'); str = str.replace(/\[code\](.+?)\[\/code\]/ig, function($1, $2) {return phpcode($2);}); str = str.replace(/\[hr\]/ig,'<hr />'); str = str.replace(/\[\/(size|color|font|backcolor)\]/ig,'</font>'); str = str.replace(/\[(sub|sup|u|i|strike|b|blockquote|li)\]/ig,'<$1>'); str = str.replace(/\[\/(sub|sup|u|i|strike|b|blockquote|li)\]/ig,'</$1>'); str = str.replace(/\[\/align\]/ig,'</p>'); str = str.replace(/\[(\/)?h([1-6])\]/ig,'<$1h$2>'); str = str.replace(/\[align=(left|center|right|justify)\]/ig,'<p align="$1">'); str = str.replace(/\[size=(\d+?)\]/ig,'<font size="$1">'); str = str.replace(/\[color=([^\[\<]+?)\]/ig, '<font color="$1">'); str = str.replace(/\[backcolor=([^\[\<]+?)\]/ig, '<font style="background-color:$1">'); str = str.replace(/\[font=([^\[\<]+?)\]/ig, '<font face="$1">'); str = str.replace(/\[list=(a|A|1)\](.+?)\[\/list\]/ig,'<ol type="$1">$2</ol>'); str = str.replace(/\[(\/)?list\]/ig,'<$1ul>'); str = str.replace(/\[s:(\d+)\]/ig,function($1,$2){ return smilepath($2);}); str = str.replace(/\[img\]([^\[]*)\[\/img\]/ig,'<img src="$1" border="0" />'); str = str.replace(/\[url=([^\]]+)\]([^\[]+)\[\/url\]/ig, '<a href="$1">'+'$2'+'</a>'); str = str.replace(/\[url\]([^\[]+)\[\/url\]/ig, '<a href="$1">http://www.cnblogs.com/renzhicai/p/'+'$1'+'</a>'); return str; } function to_html(){ str = up($("#u_source").val()); $("#realtime-preview").html(str); $("#h_source").val(str); } </script> </body> </html>
相关文章推荐
- 简单实用的HTML到UBB转换脚本工具实现说明
- C语言简单实现进制互相转换
- C语言简单实现进制互相转换
- js,html实现简单的h5小游戏点亮所有的灯小游戏源码
- C#实现HTML和UBB互相转换的方法
- 简单实用的HTML到UBB转换脚本工具实现说明
- JAVA实现XML与JSON互相转换方法(含源码) / xml转json的两种方法(个人实现的)
- Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
- window.location.href妙用 标签里用js 利用这个简单的转换思路 实现 一直也无法实现的在 页面的html标签使
- js css+html实现简单的日历
- 使用Html和ashx文件实现其简单的注册页面
- HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】
- 用html+css+js实现的一个简单的图片切换特效
- 利用list和map代替对象模式,实现jdbc的简单操作,省去对象转换的繁琐步骤!
- Java-使用Callable实现多线程的之JDK源码简单学习实践
- 如何使用androidpn实现android手机消息推送(简单的源码分析)
- JAVA过滤标签实现将html内容转换为文本的方法示例
- html js简单实现图片轮播功能
- 【时间戳转换为日期工具apk源码实现】
- 使用html+css实现简单的箭头