查看源码，主要用的就是正则匹配，多的不说，直接读码。

资源原地址：在线UBB/HTML转换

效果图如下

以下源码：

<!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();">[b]this is a example[/b]</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,'[img]'+'$1'+'[/img]');

				str = str.replace(/<a[^>]*href=[\'\"\s]*([^\s\'\"]*)[^>]*>(.+?)<\/a>/ig,'[url=$1]'+'$2'+'[/url]');

				//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(/&amp;/ig, '&');

				str = str.replace(/&lt;/ig, '<');

				str = str.replace(/&gt;/ig, '>');

				return str;

			}

			function up(str){

				str = str.replace(/</ig,'&lt;');

				str = str.replace(/>/ig,'&gt;');

				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">'+'$1'+'</a>');

				return str;

			}

			function to_html(){

				str = up($("#u_source").val());

				$("#realtime-preview").html(str);

				$("#h_source").val(str);

			}

		</script>

	</body>

</html>

UBB/HTML互相转换简单实现源码一览的更多相关文章

  1. curl命令转换成php源码

    curl命令转换成php源码 获取状态: curl -X GET -H "Content-Type:application/json" -H "Authorization ...

  2. HashMap就是这么简单【源码剖析】

    前言 声明,本文用得是jdk1.8 前面已经讲了Collection的总览和剖析List集合以及散列表.Map集合.红黑树的基础了: Collection总览 List集合就这么简单[源码剖析] Ma ...

  3. LinkedHashMap就这么简单【源码剖析】

    前言 声明,本文用得是jdk1.8 前面已经讲了Collection的总览和剖析List集合以及散列表.Map集合.红黑树还有HashMap基础了: Collection总览 List集合就这么简单[ ...

  4. TreeMap就这么简单【源码剖析】

    前言 声明,本文用得是jdk1.8 前面章节回顾: Collection总览 List集合就这么简单[源码剖析] Map集合.散列表.红黑树介绍 HashMap就是这么简单[源码剖析] LinkedH ...

  5. 简单读读源码 - dubbo多提供者(provider)配置方法

    简单读读源码 - dubbo多提供者(provider)配置方法 消费者端dubbo的yml配置 dubbo: consumer: timeout: 300000 protocol: name: du ...

  6. 使用太过简单jqprint源码也极其简洁易懂

    就像开发一样, 这篇文档如果没有人关心和维护, 里面的内容就会变得老旧, 过时而不再具有参考价值. 所以, 我希望所有看到并喜欢这篇文档的人都一起来维护它. 放心大胆的提交 Pull Request ...

  7. List集合就这么简单【源码剖析】

    前言 声明,本文用得是jdk1.8 前一篇已经讲了Collection的总览:Collection总览,介绍了一些基础知识. 现在这篇主要讲List集合的三个子类: ArrayList 底层数据结构是 ...

  8. 学习写简单Spring源码demo

    最近在研究怎么实现简单的Spring的源码,通过注解的方式来实现对bean的加载管理. 首先先来看下我的工程结构: (1)spring-common:定义了常用的枚举常量,工具类(如FileUtils ...

  9. httprunner3源码解读（1）简单介绍源码模块内容

    前言 最近想着搭建一个API测试平台,基础的注册登录功能已经完成,就差测试框架的选型,最后还是选择了httprunner,github上已经有很多开源的httprunner测试平台,但是看了下都是基于 ...

随机推荐

  1. 1130 N的阶乘的长度 V2（斯特林近似）

    1130 N的阶乘的长度 V2(斯特林近似) 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 输入N求N的阶乘的10进制表示的长度.例如6! = 720, ...

  2. 七、Kafka 用户日志上报实时统计之编码实践

    一.数据生产实现 1.配置数据生产模块 项目基础配置所包含的内容,如下所示: •项目工程的文件配置 •集群连接信息配置 •开发演示 2.实现 Flume 到 Kafka 模块 实现 Flume 到 K ...

  3. AngularJS - 下一个大框架

    AngularJS AngularJS是web应用的下一个巨头. AngularJS如果为创建web应用而设计,那它就是HTML的套路了.具有数据绑定, MVW, MVVM, MVC, 依赖注入的声明 ...

  4. 当今最流行的Web项目管理工具精选

    代码管理 以前各种开源项目的代码都是通过博客和个人网页来发布的.这种分享方式并不是最容易的一种,也不便于他人对代码做出贡献.下面是几个管理项目代码的工具,不管对于个人开发者还是团队开发者来说,它们都是 ...

  5. 【译】第八篇 SQL Server代理使用外部程序

    本篇文章是SQL Server代理系列的第八篇,详细内容请参考原文 在这一系列的上一篇,学习了如何用SQL Server代理作业活动监视器监控作业活动和查看作业历史记录.在实时监控和管理SQL Ser ...

  6. Linux内核Ramdisk(initrd)机制【转】

    转自:http://www.cnblogs.com/armlinux/archive/2011/03/30/2396827.html 摘要:对于Linux用户来说,Ramdisk并不陌生,可是为什么需 ...

  7. python基础===一行 Python 代码实现并行（转）

    原文:https://medium.com/building-things-on-the-internet/40e9b2b36148 译文:https://segmentfault.com/a/119 ...

  8. 学习记录：mongodb里插入整型值

    =============================================== 2018/1/24_第1次修改                       ccb_warlock == ...

  9. 29 A Quick Guide to Go's Assembler 快速指南汇编程序：使用go语言的汇编器简介

    A Quick Guide to Go's Assembler 快速指南汇编程序:使用go语言的汇编器简介 A Quick Guide to Go's Assembler Constants Symb ...

  10. TF-图像的深度和通道的概念(转)

    图像的深度和通道概念 图像的深度: 图片是由一个个像素点构成的,所有不同颜色的像素点构成了一副完整的图像,计算机存储图片是以二进制来进行的. 1 bit : 用一位来存储,那么这个像素点的取值范围就是 ...