簡單的Html轉換UBB的程序

2024-04-27 14:59:10

字體：大中小

來源：轉載

供稿：網友

這個功能主要是讓 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[^>]*?>([wW]*?)</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>