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 ...
随机推荐
- java实例--海盗的最优方案
package unit4; public class Pirate{ private String name; private int[] schemes; private int index; p ...
- AppleWatch开发教程之调试程序使用帮助文档
AppleWatch开发教程之调试程序使用帮助文档 AppleWatch开发教程之调试程序 调试又被称为排错,是发现和减少程序错误的一个过程.在Xcode中进行调试的需要实现以下几个步骤: 1.添加断 ...
- Android view 的事件分发机制
1 事件的传递顺序是 Activity -> Window -> 顶层View touch 事件产生后,最先由 activity 的 dispatchTouchEvent 处理 /** * ...
- ZOJ 3910 Market ZOJ Monthly, October 2015 - H
Market Time Limit: 2 Seconds Memory Limit: 65536 KB There's a fruit market in Byteland. The sal ...
- 【TYVJ】1359 - 收入计划（二分）
http://tyvj.cn/Problem_Show.aspx?id=1359 一开始是一眼看出是二分的,因为这里有单调性,因为取钱是一次取完并且是连续的. 所以最优取法就是准备达到某个价值再取.最 ...
- 【BZOJ】1295: [SCOI2009]最长距离（spfa+暴力）
http://www.lydsy.com/JudgeOnline/problem.php?id=1295 咳咳..此题我不会做啊..一开始认为是多源,可是有移除物品的操作,所以不行. 此题的思想很巧妙 ...
- audio.js – 随时随地，播放 HTML5 的声音
audio.js是一个HTML5标签的简易包装.但它不仅在支持HTML5的浏览器上能够轻松调用标签,并在不支持HTML5的浏览器上也能通过Flash作为B计划使用.除此之外,audio.js所提供的界 ...
- mysql多种方法修改密码----5.6的坑
创建用户并授权和改密码: grant all privileges on *.* to root@'%' identified by '123456' with grant option; * ...
- Apache是目前应用最广的Web服务器，PHP3是一种类似ASP的脚本语言
一.如何获得软件? 获得这3个软件包的方法很多,目前大多数Linux分发都捆绑了这3个软件包,如RedHat.本文介绍的安装方法是基于从这些软件的官方站点上下载获得的软件包进行的,针对RedHat L ...
- SQLHelper 简介
什么是SQLHelper SqlHelper是一个基于.NETFramework的数据库操作组件.组件中包含数据库操作方法,目前SqlHelper有很多版本,主要以微软一开始发布的SqlHelper类 ...