簡單的Html轉換UBB的程序

2020-03-16 21:23:48

字體：大中小

來源：轉載

供稿：網友

這個功能主要是讓 UBB 轉貼的時候方便點.

1.自動識別圖片,超鏈接,字體顏色,和字體加粗,傾斜,下劃線的HTML代碼,并且轉換為UBB代碼.
2.兼容 IE 和 Mozilla多種瀏覽器

<html>

<head>

<title>Html轉換程序</title>

<SCRIPT language="JavaScript1.2">

function HtmlToUBB(str) {

strstr = str.replace(//r/g,"");

strstr = str.replace(/on(load|click|dbclick|mouseover|mousedown|mouseup)="[^"]+"/ig,"");

strstr = str.replace(/<script[^>]*?>([/w/W]*?)<//script>/ig,"");

strstr = str.replace(/<a[^>]+href="([^"]+)"[^>]*>(.*?)<//a>/ig,"/n[url=$1]$2[/url]/n");

strstr = str.replace(/<font[^>]+color=([^ >]+)[^>]*>(.*?)<//font>/ig,"/n[color=$1]$2[/color]/n");

strstr = str.replace(/<img[^>]+src="([^"]+)"[^>]*>/ig,"/n[img]$1[/img]/n");

strstr = str.replace(/<([//]?)b>/ig,"[$1b]");

strstr = str.replace(/<([//]?)strong>/ig,"[$1b]");

strstr = str.replace(/<([//]?)u>/ig,"[$1u]");

strstr = str.replace(/<([//]?)i>/ig,"[$1i]");

strstr = str.replace(/ /g," ");

strstr = str.replace(/&/g,"&");

strstr = str.replace(/"/g,"/"");

strstr = str.replace(/</g,"<");

strstr = str.replace(/>/g,">");

strstr = str.replace(/<br>/ig,"/n");

strstr = str.replace(/<[^>]*?>/g,"");

strstr = str.replace(//[url=([^/]]+)/]/n(/[img/]/1/[//img/])/n/[//url/]/g,"$2");

strstr = 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>