html代码转义到js时，往往会遇到问题，这代码实现html和js互转

时间：2022-12-16 07:22:45

这段代码是直接可以用的，大家不妨试试。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>HTML / JS 互转工具</title>
<script type="text/javascript">
<!--
function rechange(){
document.getElementById('re').value=document.getElementById('oresult').value.replace(/document.writeln\("/g,"").replace(/"\);/g,"").replace(/\\\"/g,"\"").replace(/\\\'/g,"\'").replace(/\\\//g,"\/").replace(/\\\\/g,"\\")
}
function change(){
document.getElementById('oresult2').value="document.writeln(\""+document.getElementById('osource').value.replace(/\\/g,"\\\\").replace(/\\/g,"\\/").replace(/\'/g,"\\\'").replace(/\"/g,"\\\"").split('\r\n').join("\");\ndocument.writeln(\"")+"\");"
}
//-->
</script>
<style type="text/css">
* {
font-family: Tahoma, Verdana;
font-size: 12px;
padding: 0;
margin: 0;
}
body {
text-align: center;
background: #D7E9FB;
}
#main {
margin: 0 auto;
padding: 20px 50px;
width: 600px;
text-align: left;
background: #FFF;
}
.box {
border: 1px solid #D7E9FB;
margin: 0 0 20px;
}
.box h2 {
background: #D7E9FB;
height: 1.8em;
line-height: 1.8em;
padding: 0 10px;
}
.box .con {
padding: 20px 30px;
}
.box textarea {
width: 100%;
overflow:hidden;
background: #FFF;
border: 5px solid #D7E9FB;
padding: 2px;
}
h1 {
text-align: center;
font-size: 14px;
line-height: 2em;
height: 2em;
}
h3 {
margin: 10px 0 0 0;
}
p {
margin: 10px 0;
}
hr {
border: none;
height: 1px;
line-height: 1px;
background: #ccc;
}
#footer {
font-size: 11px;
text-align: center;
}
.button {
font-weight: bold;
padding: 5px 15px;
border: none;
background: #333;
color: #FFF;
border-top: 2px solid #999;
border-left: 2px solid #999;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
a {
color: #0CF;
}
</style>

</head>

<body>
<div id="main">
<h1>HTML / JS 互转工具</h1>

<div class="box">
<h2>HTML 转 JavaScript 工具</h2>
<div class="con">
请将 <strong>Html</strong> 源代码拷贝到下面表单中:<br />
<div><textarea id="osource" cols="100" rows="15" class="" onfocus="change()" onkeyup="change()"></textarea></div>
<br />
下面表单中是相应的 <strong>JavaScript</strong> 代码: <br />
<textarea id="oresult2" cols="100" rows="15" class=""></textarea>
</div>
</div>

<div class="box">
<h2>JavaScript 转 HTML 工具</h2>
<div class="con">
请将 <strong>JS</strong> 源代码拷贝到下面表单中:<br />
<div><textarea id="oresult" cols="100" rows="15" class="" onfocus="rechange()" onkeyup="rechange()"></textarea></div>
<br />
下面表单中是相应的 <strong>Html</strong> 代码: <br />
<div><textarea id="re" cols="100" rows="15" class=""></textarea></div>
</div>
</div>

<div class="box">
<h2>HTML 转 JavaScript 工具</h2>
<div class="con">
请将 <strong>Html</strong> 源代码拷贝到下面表单中:<br />
<div><textarea id="isn" cols="100" rows="15" class=""></textarea></div>
<p align="center"><input type="button" class="button" value="Past HTML Code Above, then Click Here" onclick="smoke()" /></p>
</div>
</div>

<div id="footer">
Copyright &copy; 2010 <a href="http://www.21andy.com/" target="_blank">21Andy.com</a> All Rights Reserved.
</div>

</div>

<script type="text/javascript">
<!--
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}

var spliff="";
var medical='"';
var pot="'";
var weed="\r";
var isn = document.getElementById('isn');

function smoke(){
spliff = isn.value;
if (spliff == ""){
alert("请输入HTML代码 There is no code pasted the text window");
}
else {
htmlPar();
}
}

function htmlPar(){
isn.value="转换中Converting......";
pos=spliff.indexOf(medical);
pos1=spliff.indexOf(pot);
if ((pos>-1)&&(pos1>-1)){
reWrt();
}
if (pos>-1){
qt=pot;
}
else{
qt=medical;
}
while (spliff.indexOf(weed)>-1){
lc=spliff.indexOf(weed);
spliff=spliff.substring(0,lc)+" "+spliff.substring(lc+1,spliff.length);
}
nspliff="<script type="+qt+"text/javascript"+qt+">"+weed
+"<!--"+weed
+" document.write("+qt+spliff.substring(0,36)+qt;
spliff=spliff.substring(36,spliff.length);
spliffl=spliff.length
pp=50;
if (pp>spliffl) {
pp=spliffl;
}
while (spliffl>0){
nspliff+="\r +"+qt+spliff.substring(0,pp)+qt;
spliff=spliff.substring(pp,spliffl);
spliffl=spliff.length;
if (pp>spliffl){
pp=spliffl;
}
}
nspliff+=");"+weed+"// -->"+weed+"<\/sc"
+"ript>";
isn.value=nspliff+weed+"<!-- Size: "+nspliff.length
+" bytes - 21andy.com --> "+weed;
}
function reWrt(){
pos=-1;
while (spliff.indexOf(medical)>-1){
lc=spliff.indexOf(medical);
spliff=spliff.substring(0,lc)+pot+spliff.substring(lc+1,spliff.length);
}
}
function iA(){
this.length=iA.arguments.length;
for (var i=0;i<this.length;i++){
this[i]=iA.arguments[i];
}
}
//-->
</script>
</body>
</html>

相关文章