Html轉(zhuǎn)換UBB的程序的教程

2024-09-07 17:40:16

字體：大中小

供稿：網(wǎng)友

在正則表達(dá)式中我們經(jīng)常會需要將Html轉(zhuǎn)換UBB，但是對于Html轉(zhuǎn)換UBB的程序是很多小伙伴們都不知道要如何操作，那么下面錯新小編為大家介紹Html轉(zhuǎn)換UBB的程序的教程。

這個功能主要是讓?UBB?轉(zhuǎn)貼的時候方便點.?

1.自動識別圖片,超鏈接,字體顏色,和字體加粗,傾斜,下劃線的HTML代碼,并且轉(zhuǎn)換為UBB代碼.
2.兼容?IE?和?Mozilla多種瀏覽器
<html>
<head>
<title>Html轉(zhuǎn)換程序</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("無轉(zhuǎn)換內(nèi)容！請使用?Ctrl+V?把內(nèi)容復(fù)制到下面的編輯框內(nèi)");
}
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="修改粘貼后的網(wǎng)頁源代碼?>>";
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?把內(nèi)容復(fù)制到這里?>>";
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轉(zhuǎn)換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="轉(zhuǎn)?換"?onclick="trans()"?class="input">
?????????<input?type="button"?value="清?除"?onclick="clearCode()"?class="input"></td>
</tr>
<tr>
<td?class="tip">
?????????<span?id="tip">請使用?Ctrl+V?把內(nèi)容復(fù)制到這里?>></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">
?????????轉(zhuǎn)換輸出代碼?>></td>
</tr>
<tr>
<td>
?????????<textarea?id="ReCode"?readonly="readonly"></textarea>
????????</td>
</tr>
</table>
</body>
</html>