html代码转义到js时，往往会遇到问题，这代码实现html和js互转
这段代码是直接可以用的，大家不妨试试。
<!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 © 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>
html代码转义到js时，往往会遇到问题，这代码实现html和js互转的更多相关文章
- js/jquery/html前端开发常用到代码片段
1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- JS将搜索的关键字高亮显示实现代码
这篇文章介绍了JS将搜索的关键字高亮显示实现代码,有需要的朋友可以参考一下 用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物 当在文章里头出现这些关键字,就把它加亮显 ...
- KoaHub平台基于Node.js开发的Koa 连接支付宝插件代码信息详情
KoaHub平台基于Node.js开发的Koa 链接支付宝插件代码信息详情 easy-alipay alipay payment & notification APIs easy-alipay ...
- delphi 线程教学第七节：在多个线程时空中，把各自的代码塞到一个指定的线程时空运行
第七节:在多个线程时空中,把各自的代码塞到一个指定的线程时空运行 以 Ado 为例,常见的方法是拖一个 AdoConnection 在窗口上(或 DataModule 中), 再配合 AdoQ ...
- js实现拉伸拖动iframe的具体代码
这篇文章介绍了js实现拉伸拖动iframe的具体代码,有需要的朋友可以参考一下左边iframe放树目录,右边的iframe放index页.拖鼠标同时控制2个iframe的宽高.期待有人能改进.操作方法 ...
- JS随机生成不重复数据的代码分享
JS随机生成不重复数据. 代码如下: <script> // 定义存放生成随机数的数组 var array=new Array(); // 循环N次生成随机数 for(var i = 0 ...
- 在chrome中的source找不到自己写的js时处理方法
今天准备调试下js,突然发现在谷歌的中source中找不到我要调试的js,后来查资料和听同事说谷歌会把js压缩,于是找到以下方法来调试js 1. debugger神器 横扫各个浏览器.脚本运行到deb ...
- Node.js 优雅地自动审核团队的代码
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. 简介 在团队开发中,无论是写前端(js,css,htm ...
随机推荐
- 在python包管理中使用easy_install软件的步骤
本文主要介绍的是让python包管理变得更加容易的实际应用方法,就是运用easy_install这一软件,下面是文章的具体介绍. easy_install让python包管理变得 如果你想对Pytho ...
- javascript继承扩展类方法实现
javascript没有原生的继承语法,这确实很让人困惑,但是广大人民群从的智慧是无穷的.最近呢,正尝到一点从源码中学习的甜头,不分享一下实在难以平复激动的心情.前不久改造视频播放插件的时候,找到了v ...
- 【BZOJ】1146: [CTSC2008]网络管理Network（树链剖分+线段树套平衡树+二分 / dfs序+树状数组+主席树）
http://www.lydsy.com/JudgeOnline/problem.php?id=1146 第一种做法(时间太感人): 第二种做法(rank5,好开心) ================ ...
- UOJ#61. 【UR #5】怎样更有力气
大力水手问禅师:“大师,很多事情都需要用很大力气才能完成,而我在吃了菠菜之后力气很大,于是就导致我现在非常依赖菠菜.我很讨厌我的现状,有没有办法少吃点菠菜甚至不吃菠菜却仍很有力气?” 禅师浅笑,答:“ ...
- ERROR 2013 (HY000): Lost connection to MySQL server at 'waiting for initial communication packet', system error: 2
ERROR (HY000): Lost connection to MySQL server at 'waiting for initial communication packet', system ...
- winform学习之----将多个控件的click方法绑定到同一click方法中
public Form3() { InitializeComponent(); button1.Click +=new ...
- 诅咒JavaScript之----ArcGIS JavaScript 点聚合 ClusterLayer
对一个之前一直做winForm的 菜鸟来说,突然接触这么神奇的语言,基本上每天都会诅咒一下这门神奇的语言. 最近做了一个小网站,底图用的是天地图的服务,用ArcGIS JavaScript提供的一些G ...
- 关于javascript在作用域中的变量定义你所不知道的一些东西
//先看一段代码 var a = 100; function test(){ alert(a); var a = 200; } test(); /* 结果:undifined 原因:js引擎在执行sc ...
- HDU 2094 产生冠军（半拓扑排序+map）
产生冠军 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- Markdown基本用法
Markdown基本用法 不同的编辑器对本文中的功能可能显示情况不一样,马克飞象可以完美支持和显示. 一.标题 h1标题 #h1标题 h1标题 h1标题 == h2标题 ##h2标题 h2标题 h2标 ...