DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 簡單的Html轉換UBB的程序
簡單的Html轉換UBB的程序
編輯:HTML5教程     

這個功能主要是讓 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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved