简单的Html转换UBB的程序

所属分类: 网络编程 / 正则表达式 阅读数: 766
收藏 0 赞 0 分享
这个功能主要是让 UBB 转贴的时候方便点. 

1.自动识别图片,超链接,字体颜色,和字体加粗,倾斜,下划线的HTML代码,并且转换为UBB代码.
2.兼容 IE 和 Mozilla多种浏览器
<html>
<head>
<title>Html转换程序</title>
<SCRIPT language="JavaScript1.2">
function HtmlToUBB(str) {
str = str.replace(/\r/g,"");
str = str.replace(/on(load|click|dbclick|mouseover|mousedown|mouseup)="[^"]+"/ig,"");
str = str.replace(/<script[^>]*?>([\w\W]*?)<\/script>/ig,"");
str = str.replace(/<a[^>]+href="([^"]+)"[^>]*>(.*?)<\/a>/ig,"\n[url=$1]$2[/url]\n");
str = str.replace(/<font[^>]+color=([^ >]+)[^>]*>(.*?)<\/font>/ig,"\n[color=$1]$2[/color]\n");
str = str.replace(/<img[^>]+src="([^"]+)"[^>]*>/ig,"\n[img]$1[/img]\n");
str = str.replace(/<([\/]?)b>/ig,"[$1b]");
str = str.replace(/<([\/]?)strong>/ig,"[$1b]");
str = str.replace(/<([\/]?)u>/ig,"[$1u]");
str = str.replace(/<([\/]?)i>/ig,"[$1i]");
str = str.replace(/ /g," ");
str = str.replace(/&/g,"&");
str = str.replace(/"/g,"\"");
str = str.replace(/</g,"<");
str = str.replace(/>/g,">");
str = str.replace(/<br>/ig,"\n");
str = str.replace(/<[^>]*?>/g,"");
str = str.replace(/\[url=([^\]]+)\]\n(\[img\]\1\[\/img\])\n\[\/url\]/g,"$2");
str = str.replace(/\n+/g,"\n");
return str;
}

function trans(){
var str = "";
str = document.getElementById('edit').contentWindow.document.body.innerHTML;
if (str.length == 0) {
alert("无转换内容!请使用 Ctrl+V 把内容复制到下面的编辑框内");
}
document.getElementById('ReCode').value=HtmlToUBB(str);
}

function clearCode(){
document.getElementById('ReCode').value="";
}

function Start() {
  document.getElementById('edit').contentWindow.document.designMode = "on";
  try {
    document.getElementById('edit').contentWindow.document.execCommand("undo", false, null);
  }  catch (e) {
    alert("你的Mozilla浏览器不支持在线RichEditor");
  }
}

function ViewSource(Source){
  var Html;
  if (Source){
document.getElementById('sCode').value = document.getElementById('edit').contentWindow.document.body.innerHTML;
document.getElementById('edit').style.display="none";
document.getElementById('sCode').style.display="";
document.getElementById('tip').innerText="修改粘贴后的网页源代码 >>";
document.getElementById('tranButton').disabled="disabled"
  }
  else{
document.getElementById('edit').contentWindow.document.body.innerHTML = document.getElementById('sCode').value;
   document.getElementById('edit').style.display="";
document.getElementById('sCode').style.display="none";
    document.getElementById('edit').contentWindow.document.designMode = "on";
  document.getElementById('tip').innerText="请使用 Ctrl+V 把内容复制到这里 >>";
document.getElementById('tranButton').disabled=""
}
}
</SCRIPT>
<style>
body{background:#688ABD;margin:2px;}
label{color:#fff;}
th{font-size:14px;font-family:verdana,宋体;font-weight:bold;color:fc6;text-align:left}
#sCode{width:400;height:150px;border:1px solid #1F2F47;margin-top:0px !important;margin-top:-1px;margin-bottom:0px !important;margin-bottom:-1px;}
#ReCode{width:400;height:150px;border:1px solid #1F2F47;font-size:12px;}
#edit{width:398;height:148px;border:1px solid #1F2F47;background:#fff;font-size:12px}
.input{
 border-top:1px solid #fff;
 border-right:1px solid #003;
 border-bottom:1px solid #003;
 border-left:1px solid #fff;
 background:#F4F7FB;
}
.tip{
 color:#ffc;
 font-weight:bold;
 font-size:12px;
 font-family:宋体;
}
</style>
</head>
<body onload="Start()" style="">
<table border="0" align="center">
<tr>
<th style="">Html转换UBB程序</th>
</tr>
<tr>
<td style="font-size:12px;">
 <label for="Source"><input type="checkbox" id="Source" onclick="ViewSource(this.checked)">查看源代码 </label>
         <input id="tranButton" type="button" value="转 换" onclick="trans()" class="input">
         <input type="button" value="清 除" onclick="clearCode()" class="input"></td>
</tr>
<tr>
<td class="tip">
         <span id="tip">请使用 Ctrl+V 把内容复制到这里 >></span></td>
</tr>
<tr>
<td>
         <textarea id="sCode" style="display:none"></textarea>
         <iframe id="edit"src="about:blank" border="0" frameborder="0"></iframe>
</td>
</tr>
<tr>
<td class="tip">
         转换输出代码 >></td>
</tr>
<tr>
<td>
         <textarea id="ReCode" readonly="readonly"></textarea>
        </td>
</tr>
</table>
</body>
</html>
更多精彩内容其他人还在看

深入分析正则表达式的子模式

在正则表达式中,可以使用“(”和“)”将模式中的子字符串括起来,以形成一个子模式。将子模式视为一个整体时,那么它就相当于一个单个字符。下面我们就来详细了解下子模式
收藏 0 赞 0 分享

可以少写1000行代码的正则表达式

正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。知道这20个正则表达式,能让你少写1000行代码,想知道吗
收藏 0 赞 0 分享

20个正则表达式必知(能让你少写1,000行代码)

这篇文章主要介绍了20个正则表达式必知(能让你少写1,000行代码)的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数

这篇文章主要介绍了JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

java常用正则表达式

这篇文章主要介绍了java常用正则表达式,需要的朋友可以参考下
收藏 0 赞 0 分享

如何快速学习正则表达式

在日常工作中,我们经常写正则表达式,比如在表单中经常用来验证用户输入的格式是否正确。接下来通过本文给大家介绍如何快速学习正则表达式,感兴趣的小伙伴一起学习吧
收藏 0 赞 0 分享

运用正则表达式匹配所有表名

这篇文章主要介绍了运用正则表达式匹配所有表名 的相关资料,非常不错,具有参考借鉴价值,需要的朋友一起看看吧
收藏 0 赞 0 分享

浅析正则表达式-替换原则(.NET) 图文

最近经常用到替换的东西所以就出来整理下,这里要分享的是正则表达式里面的替换原则,首先要声明的是这里提及到的替换原则是.NET里面的正则表达式的替换原则
收藏 0 赞 0 分享

正则替换实现输入框只能有数字、中英文逗号

最近在开发过程中,需要一个输入框里面只能有数字与中英文逗号,因为是相关文章,其它的也不让出现,容易造成问题,编程容易把介绍复制到里面,所以想到了这个方法
收藏 0 赞 0 分享

自动检测数字替换非数字的正则表达式

这篇文章主要介绍了自动检测数字替换非数字的正则表达式 ,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多