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 ...
随机推荐
- 2^x mod n = 1
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...
- javascript的window.onload()方法和jQuery的$(document).ready()的对比
jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
- Open Xml SDK Word模板开发最佳实践(Best Practice)
1.概述 由于前面的引文已经对Open Xml SDK做了一个简要的介绍. 这次来点实际的——Word模板操作. 从本质上来讲,本文的操作都是基于模板替换思想的,即,我们通过替换Word模板中指定元素 ...
- UVa1401 Remember the Word（DP+Trie树）
题目给定一个字符串集合有几种方式拼成一个字符串. dp[i]表示stri...strlen-1的方案数 dp[len]=1 dp[i]=∑dp[j](stri...strj-1∈SET) 用集合的字符 ...
- extjs grid
Ext.onReady(function() { Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif'; Ext.QuickTips.in ...
- BZOJ3012 : [Usaco2012 Dec]First!
建立Trie,那么成为答案的串必须满足其终止节点到根路径上没有其它点. 对于Trie上每个节点维护一个bitset,表示哪些字符必须在哪些字符之前. 每到达一个可能成为答案的终止节点,对图进行拓扑排序 ...
- linux 好用的程序
来自 http://www.cnblogs.com/skyseraph/archive/2010/10/30/1865280.html * Shell: bash.我使用 bash 的 vi 命令 ...
- 加载外部JavaScript的最佳方法
当<script>标记是一个HTML文档流,浏览器必须停止渲染并等待脚本文件下载并执行,然后再继续(例子).通过JavaScript创建一个新的<script>标签可以避免这个 ...
- 李洪强 - C语言8-Scanf函数
C语言的scanf函数 一.变量的内存分析 (一)字节与地址 ①. 内存以字节为单位 每个字节都有自己的内存地址,根据地址就可以找到该字节.整个内存相当于一整个酒店,而酒店以房间为单位,在这里每个房间 ...
- SQL Server 中的触发器（trigger）
SQL Server 触发器 触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. Ø 什么是触发器 ...