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 ...
随机推荐
- qmf
vim命令 ——————————正文开始—————————— Vim是一款简单而强大的文本编辑器,它能以简单的方式完成复杂的操作. 学习 vim 首先了解它的几种模式: 下图提供了三种模式下的切换: ...
- linux中使用top获取进程的资源占用信息
在linux中使用top获取进程的资源占用信息: Cpu(s): 1.0%us, 0.0%sy, 0.0%ni, 98.3%id, 0.7%wa, 0.0%hi, 0.0%si, 0.0 ...
- H5开发之Eclipes 编码乱码问题
1.编码不对 a.对某文件或某工程更改编码: 鼠标移到工程名或文件名,右键->Properties->Resource->Text file enCoding ->更改编码(G ...
- spring实战二之Bean的自动装配(非注解方式)
Bean的自动装配 自动装配(autowiring)有助于减少甚至消除配置<property>元素和<constructor-arg>元素,让Spring自动识别如何装配Bea ...
- HDU 2255 & KM模板
题意: 一张完备二分图求最优完备匹配. SOL: 这题就不讲什么sol了...毕竟是裸的KM,不会的话可以看老人家的大白鼠,一些问题看代码注释.讲讲经历(悲惨的经历) 刚打完,自信地交上去发现MLE. ...
- HDU 2531 (BFS搜索)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2531 题目大意: 你的身体占据多个点.每次移动全部的点,不能撞到障碍点,问撞到目标点块(多个点)的最 ...
- TYVJ P1073 加分二叉树 Label：区间dp
背景 NOIP2003 提高组 第三道 描述 设一个n个节点的二叉树tree的中序遍历为(l,2,3,…,n),其中数字1,2,3,…,n为节点编号.每个节点都有一个分数(均为正整数),记第j个节点的 ...
- HDU 4648 Magic Pen 6
题目链接 6Y什么水平.. #include <cstdio> #include <cstring> #include <string> #include < ...
- JAVA生成验证码
<img border="0" src="ValidateCode" ...
- 【C语言】14-返回指针的函数与指向函数的指针
前言 前面我们花了接近3个章节学习指针,应该都感受到指针的强大了吧.指针可以根据地址直接操作内存中的数据,使用得当的话,不仅能使代码量变少,还能优化内存管理.提升程序性能.关于指针的内容还非常多,比如 ...