简单的Html转换UBB的程序
程序员文章站
2022-03-10 22:18:51
这个功能主要是让 ubb 转贴的时候方便点. 1.自动识别图片,超链接,字体颜色,和字体加粗,倾斜,下划线的html代码,并且转换为ubb代码...
这个功能主要是让 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>
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>
上一篇： ubbcode简单实用
下一篇： 常用证件号码的正则表达式大全(收集整理)