HTML 转换到 Javascript（附源码）

发布于：电脑网络 1,510 次践踏

今天发现一个很好玩又比较实用的功能，HTML 转换成 Javascript，请见：http://wange.im/tool/htmltojs/

这个小工具对我来说相当之有用啊，虽然只是用 Javascript 的形式表现 HTML，比如说：

原 HTML：

<title>Life Studio</title><div id="author">万戈</div>

转换后的 Javascript：

document.writeln("<title>Life Studio<\/title><div id=\"author\">万戈<\/div>");

当然，这只是一个很简单的例子，用 HTML 转换成 Javascript 用诸多好处，比如说，我们可以随意地改变 Javascript 加载的地方，如果是出于页面载入速度考虑，我就会把类似于 flash/JQuery 实现的幻灯效果以 Javascript 的形式表现出来，然后加载在</body>标签之前，Yslow 以建议我们把 JS 放在最后，有些不太重要的 HTML 标签就可以用这个方法，然后再用 CSS 定位。

不过嘛，好工具总是一把双刃剑，如果把 HTML 转换成 Javascript 的方法应用于友情链接上，那就不太好咯。因为我们知道蜘蛛爬虫是咬不动 Javascript 的，所以如果把友情链接的 HTML 用 JS 表现出来，那就太不公平了，请三思而用之。

最后，附上 HTML 转换至 Javascript 的源码：

<html>
<head>
<title>HTML转JavaScript</title>
</head>
<body>
<p align="center"><font style="font-size:18pt;">HTML转换为JS</font><br>请将html代码拷至下面文本框中: <br>
<textarea cols="70"id="oSource" onpropertychange="showhideJSTag(change(oSource.value));" rows="10" name="oSource" ></textarea><br>
为您生成的JS代码，双击可以复制:(<input name="ShowJSTag" type="checkbox" id="ShowJSTag" onClick="showhideJSTag(change(oSource.value));" value="yes">是否加上Javascript标签)<p align="center">
  <textarea cols="70" id="oResult" title="双击复制" ondblclick='this.select();oResult.createTextRange().execCommand("Copy")' rows="10" name="oResult"></textarea>        
   <p align="center"> <input type="button" value="  清空  " name="B1" onclick="oSource.value='';showhideJSTag(change(oSource.value));" >&nbsp;&nbsp;&nbsp;   <input type="button" value="预览效果" name="B2" onclick="opentestwin(oResult.value);">  <br>
  <script language="JavaScript" >
function change(oSourceString){
return("document.writeln(\""+oSourceString.replace(/\\/g,"\\\\").replace(/\//g,"\\/").replace(/\'/g,"\\\'").replace(/\"/g,"\\\"").split('\r\n').join("\");\ndocument.writeln(\"")+"\")"+";");
}
function  showhideJSTag(strjs)
{if(ShowJSTag.checked)
oResult.value="<script language=javascript>\n<!--\n"+strjs+"\n//-->\n</"+"script>";
else
oResult.value=strjs; 
}
//http:
function opentestwin(str)                                    
{var testwin=window.open("test","_balnk","toolbar=no,location=no,directories=no,status=yes,menubar=yes,scrollbars=yes,resizable=yes");          testwin.document.write(str);                                 
}      
</script>
</body>
</html>

效果请见：http://wange.im/tool/htmltojs/