简单实用的HTML到UBB转换脚本工具实现说明
2009-11-02 00:00
633 查看
现在出现一点麻烦:博客编辑器多为支持HTML发布,而论坛多为支持UBB,这意味着你想把之前发布在博客的文章直接复制发布到论坛是不行的。怎么办呢?手工一个个标签改?这样显然太麻烦了,况且懒乃人之本性嘛,哈!我也是位懒人,所以我写了个工具,可以帮助自己把博客的HTML转换成适合论坛发布的UBB格式,即使不能完全转换,但已帮我省去很多工作。
因为本人一直从事WEB前端开发工作,所以我知道HTML语义的重要性,也清楚如何标准编码,所以我发布在博客的HTML符合下面几个标准,使用这些标准,有利于更成功地实现HTML 到UBB的转换:
(1)所有标签合法嵌套并正常结束
(2)小标题使用h标签,段落使用p标签
(3)每张博客附图各占一行并居中,img标签同样作为一个新的段落放在p标签中
(4)代码片段是用博客园编辑器生成的,是一个div标签包含的内容块
这个HTML 2 UBB转换工具代码如下。通过代码你可以看到这是利用了正则表达式重复替换实现的,为了优化替换速度,我把可能存在大量无用HTML的内容先替换,这样后面其它方法无须再替换其中的内容,比如由博客园编辑器生成的代码片段就是要先替换的目标,它会被替换成“
HTML 2 UBB
* {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}
function transform()
{
var html = document.getElementById('inputCode').value;
html = html.replace(/\n/g,'');
html = html.replace(/(.+?)/ig,'[ DISCUZ_CODE_0 ]\n\n');
html = html.replace(/(.+?)/ig,'http://www.jb51.net/article/$1\n\n');
html = html.replace(//ig,'\n\n');
html = html.replace(/(.+?)/ig,'$2');
html = html.replace(/
![]((.+?))
/ig,'![](http://www.jb51.net/article/$1)
');
html = html.replace(/(.+?)/ig,'[b]http://www.jb51.net/article/$1');
html = html.replace(/(.+?)/ig,'[size=3]http://www.jb51.net/article/$1[/size]\n\n');
document.getElementById('outputCode').value = html;
document.getElementById('outputCode').select();
}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
工具的使用方法是(参考下面附图):复制你发布到博客之前自己编辑好的HTML代码放于上文本框,然后再点击中间的“转换”按钮,这样工具就会在下面文本框生成你要粘贴到论坛的UBB文本,同时目标代码处于选中状态,你复制即可。
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030185/a823e2469a7a0cb34fb92321cccd9955.gif)
注意:如果你的HTML代码与我的标准不一样,转换肯定会出问题的,你可以根据自己的代码标准修改这个工具的部分代码,使其达到自己想要的效果。本文只是提供一个思路。 作者 webflash
因为本人一直从事WEB前端开发工作,所以我知道HTML语义的重要性,也清楚如何标准编码,所以我发布在博客的HTML符合下面几个标准,使用这些标准,有利于更成功地实现HTML 到UBB的转换:
(1)所有标签合法嵌套并正常结束
(2)小标题使用h标签,段落使用p标签
(3)每张博客附图各占一行并居中,img标签同样作为一个新的段落放在p标签中
(4)代码片段是用博客园编辑器生成的,是一个div标签包含的内容块
这个HTML 2 UBB转换工具代码如下。通过代码你可以看到这是利用了正则表达式重复替换实现的,为了优化替换速度,我把可能存在大量无用HTML的内容先替换,这样后面其它方法无须再替换其中的内容,比如由博客园编辑器生成的代码片段就是要先替换的目标,它会被替换成“
这里是代码片段”,后面自己再把中间的文字替换成实际的代码就行了。
HTML 2 UBB
* {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}
function transform()
{
var html = document.getElementById('inputCode').value;
html = html.replace(/\n/g,'');
html = html.replace(/(.+?)/ig,'[ DISCUZ_CODE_0 ]\n\n');
html = html.replace(/(.+?)/ig,'http://www.jb51.net/article/$1\n\n');
html = html.replace(//ig,'\n\n');
html = html.replace(/(.+?)/ig,'$2');
html = html.replace(/
/ig,'
');
html = html.replace(/(.+?)/ig,'[b]http://www.jb51.net/article/$1');
html = html.replace(/(.+?)/ig,'[size=3]http://www.jb51.net/article/$1[/size]\n\n');
document.getElementById('outputCode').value = html;
document.getElementById('outputCode').select();
}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
工具的使用方法是(参考下面附图):复制你发布到博客之前自己编辑好的HTML代码放于上文本框,然后再点击中间的“转换”按钮,这样工具就会在下面文本框生成你要粘贴到论坛的UBB文本,同时目标代码处于选中状态,你复制即可。
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030185/a823e2469a7a0cb34fb92321cccd9955.gif)
注意:如果你的HTML代码与我的标准不一样,转换肯定会出问题的,你可以根据自己的代码标准修改这个工具的部分代码,使其达到自己想要的效果。本文只是提供一个思路。 作者 webflash
相关文章推荐
- 简单实用的HTML到UBB转换脚本工具实现说明
- 简单实用的HTML到UBB转换脚本工具
- C#实现HTML和UBB互相转换的方法
- 个人实现的一个简单的ipv4地址转换为二进制显示的脚本
- 第24章 编写简单的脚本实用工具
- Html中JS脚本执行顺序简单举例说明
- 栈实现HTML和UBB的转换
- UBB/HTML互相转换简单实现源码一览
- 简单的Html转换UBB的程序
- 用perl脚本实现一个简单的行注释到块注释的转换
- window.location.href妙用 标签里用js 利用这个简单的转换思路 实现 一直也无法实现的在 页面的html标签使
- 把简单的matlab/Octave脚本转换成python脚本的工具
- JavaScript实现汇率j简单转换工具
- Adobe向苹果让步:发布新工具实现转换HTML5
- Html中JS脚本执行顺序简单举例说明
- 几个简单,但实用的,工具
- 基于java实现的简单网页日历功能,有兴趣得可以把它转换到前端实现
- MS SQL Server实用工具说明(bcp/tabdiff)