简单实用的HTML到UBB转换脚本工具实现说明
作者:bea
现在出现一点麻烦:博客编辑器多为支持HTML发布,而论坛多为支持UBB,这意味着你想把之前发布在博客的文章直接复制发布到论坛是不行的。怎么办呢?手工一个个标签改?这样显然太麻烦了,况且懒乃人之本性嘛,哈!我也是位懒人,所以我写了个工具,可以帮助自己把博客的HTML转换成适合论坛发布的UBB格式,即使不能完全转换,但已帮我省去很多工作。 因为本人一直从事WEB前端开发工作,所以我知道HTML语义的重要性,也清楚如何标准编码,所以我发布在博客的HTML符合下面几个标准,使用这些标
现在出现一点麻烦:博客编辑器多为支持HTML发布,而论坛多为支持UBB,这意味着你想把之前发布在博客的文章直接复制发布到论坛是不行的。怎么办呢?手工一个个标签改?这样显然太麻烦了,况且懒乃人之本性嘛,哈!我也是位懒人,所以我写了个工具,可以帮助自己把博客的HTML转换成适合论坛发布的UBB格式,即使不能完全转换,但已帮我省去很多工作。
因为本人一直从事WEB前端开发工作,所以我知道HTML语义的重要性,也清楚如何标准编码,所以我发布在博客的HTML符合下面几个标准,使用这些标准,有利于更成功地实现HTML 到UBB的转换:
(1)所有标签合法嵌套并正常结束
(2)小标题使用h标签,段落使用p标签
(3)每张博客附图各占一行并居中,img标签同样作为一个新的段落放在p标签中
(4)代码片段是用博客园编辑器生成的,是一个div标签包含的内容块
这个HTML 2 UBB转换工具代码如下。通过代码你可以看到这是利用了正则表达式重复替换实现的,为了优化替换速度,我把可能存在大量无用HTML的内容先替换,这样后面其它方法无须再替换其中的内容,比如由博客园编辑器生成的代码片段就是要先替换的目标,它会被替换成“[code]这里是代码片段[/code]”,后面自己再把中间的文字替换成实际的代码就行了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML 2 UBB</title>
<style type="text/css">
* {margin:0; padding:0}
#layout {width:800px; margin:10px auto}
textarea {width:800px; height:250px; font-size:12px}
input {width:800px; height:30px; margin:10px 0}
</style>
</head>
<body>
<div id="layout">
<textarea id="inputCode"></textarea>
<input type="button" id="transform" value="【转换】" onclick="transform()" />
<textarea id="outputCode"></textarea>
</div>
<script type="text/javascript">
function transform()
{
var html = document.getElementById('inputCode').value;
html = html.replace(/
/g,'');
html = html.replace(/<div.*?>(.+?)</div>/ig,'[ DISCUZ_CODE_0 ]
');
html = html.replace(/<p.*?>(.+?)</p>/ig,'$1
');
html = html.replace(/<br/?>/ig,'
');
html = html.replace(/<a.+?href="(.+?)".*?>(.+?)</a>/ig,'[url=$1]$2[/url]');
html = html.replace(/<img.+?src="(.+?)".*?>/ig,'[align=center][img]$1[/img][/align]');
html = html.replace(/<strong>(.+?)</strong>/ig,'[b]$1[/b]');
html = html.replace(/<hd>(.+?)</hd>/ig,'[size=3][b]$1[/b][/size]
');
document.getElementById('outputCode').value = html;
document.getElementById('outputCode').select();
}
</script>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
工具的使用方法是(参考下面附图):复制你发布到博客之前自己编辑好的HTML代码放于上文本框,然后再点击中间的“转换”按钮,这样工具就会在下面文本框生成你要粘贴到论坛的UBB文本,同时目标代码处于选中状态,你复制即可。
注意:如果你的HTML代码与我的标准不一样,转换肯定会出问题的,你可以根据自己的代码标准修改这个工具的部分代码,使其达到自己想要的效果。本文只是提供一个思路。 作者 webflash
有用 | 无用
因为本人一直从事WEB前端开发工作,所以我知道HTML语义的重要性,也清楚如何标准编码,所以我发布在博客的HTML符合下面几个标准,使用这些标准,有利于更成功地实现HTML 到UBB的转换:
(1)所有标签合法嵌套并正常结束
(2)小标题使用h标签,段落使用p标签
(3)每张博客附图各占一行并居中,img标签同样作为一个新的段落放在p标签中
(4)代码片段是用博客园编辑器生成的,是一个div标签包含的内容块
这个HTML 2 UBB转换工具代码如下。通过代码你可以看到这是利用了正则表达式重复替换实现的,为了优化替换速度,我把可能存在大量无用HTML的内容先替换,这样后面其它方法无须再替换其中的内容,比如由博客园编辑器生成的代码片段就是要先替换的目标,它会被替换成“[code]这里是代码片段[/code]”,后面自己再把中间的文字替换成实际的代码就行了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML 2 UBB</title>
<style type="text/css">
* {margin:0; padding:0}
#layout {width:800px; margin:10px auto}
textarea {width:800px; height:250px; font-size:12px}
input {width:800px; height:30px; margin:10px 0}
</style>
</head>
<body>
<div id="layout">
<textarea id="inputCode"></textarea>
<input type="button" id="transform" value="【转换】" onclick="transform()" />
<textarea id="outputCode"></textarea>
</div>
<script type="text/javascript">
function transform()
{
var html = document.getElementById('inputCode').value;
html = html.replace(/
/g,'');
html = html.replace(/<div.*?>(.+?)</div>/ig,'[ DISCUZ_CODE_0 ]
');
html = html.replace(/<p.*?>(.+?)</p>/ig,'$1
');
html = html.replace(/<br/?>/ig,'
');
html = html.replace(/<a.+?href="(.+?)".*?>(.+?)</a>/ig,'[url=$1]$2[/url]');
html = html.replace(/<img.+?src="(.+?)".*?>/ig,'[align=center][img]$1[/img][/align]');
html = html.replace(/<strong>(.+?)</strong>/ig,'[b]$1[/b]');
html = html.replace(/<hd>(.+?)</hd>/ig,'[size=3][b]$1[/b][/size]
');
document.getElementById('outputCode').value = html;
document.getElementById('outputCode').select();
}
</script>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
工具的使用方法是(参考下面附图):复制你发布到博客之前自己编辑好的HTML代码放于上文本框,然后再点击中间的“转换”按钮,这样工具就会在下面文本框生成你要粘贴到论坛的UBB文本,同时目标代码处于选中状态,你复制即可。
注意:如果你的HTML代码与我的标准不一样,转换肯定会出问题的,你可以根据自己的代码标准修改这个工具的部分代码,使其达到自己想要的效果。本文只是提供一个思路。 作者 webflash
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 基于JQuery框架的AJAX实例代码
- Jquery AJAX 框架的使用方法
- JQuery打造PHP的AJAX表单提交实例
- jQuery get和post 方法传值注意事项
- 实用的层滑开js实现代码
- 纯JS图片批量预加载技术代码
- CSS鼠标悬停菜单 图片交换技术实现
- CSS Filter背景透明提示
- MAC官方菜单纯CSS实现灰色会换色
- js window.onload 加载多个函数的方法
- jquery tree 可编辑节点实现代码(jquery一句话节点菜单)
- 深入认识javascript中的eval函数
- javascript 按回车键相应按钮提交事件
- JQuery 解析多维的Json数据格式
- javascript(jquery)利用函数修改全局变量的代码
- 一个可以兼容IE FF的加为首页与加入收藏实现代码
- JS OOP包机制,类创建的方法定义
- JQuery 网站换肤功能实现代码
- Javascript结合css实现网页换肤功能