-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
116 lines (113 loc) · 2.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!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=iso-8859-1" />
<title>jsDump</title>
<meta name="keywords" content="javascript, script, dump, pretty, object, function, window, document, nodes, strings, numbers, regexp, dates, ariel, flesler" />
<meta name="description" content="Demo of jsDump. A small JS Object, to parse Javascript data into pretty strings. Made by Ariel Flesler." />
<meta name="robots" content="index,follow" />
<style type="text/css">
body{
padding:5px;
font-family: Verdana, sans-serif;
background-color: #DDD;
}
ul,li,h3{
margin:0;
padding:0;
}
#links{
position:absolute;
right:5px;
border:1px solid #777;
top:5px;
padding:20px;
}
#links h3{
color:#933;
margin:0 0 5px 0;
}
#links ul{
padding: 8px 0 3px 20px;
}
#links li{
list-style-type:circle;
}
#links a{
color:#69C;
}
h1{
color:#5B739C;
}
h1 strong{
font-size:13px;
color:#777;
}
h2{
margin-top:20px;
}
textarea{
font-size:12px;
height:335px;
width:350px;
display:inline;
}
button{ display:block }
p{
font-size:14px;
width:700px;
}
</style>
</head>
<body id="body" class="node">
<h1>jsDump <strong>by Ariel Flesler</strong></h1>
<div id="links">
<h3>Links</h3>
<ul>
<li><a href="http://flesler.blogspot.com/2008/05/jsdump-pretty-dump-of-any-javascript.html">Homepage</a></li>
</ul>
</div>
<p>
Note that the code on the left is eval'd and then dumped on the right. What this script does, is the second part, dumping <strong>real</strong> Javascript data.<br />
You can try your own code, use only 1 line of code. It can handle from the simplest data, to complex collections.<br />
The way each "thing" is dumped can be easily changed, and it support HTML mode output. Enjoy!
</p>
<textarea rows="15" id="source">
[
window,
document,
{ a : 5, '1' : 'foo' },
/^[ab]+$/g,
new RegExp('x(.*?)z','ig'),
alert,
function fn( x, y, z ){
return x + y;
},
true,
undefined,
null,
new Date(),
document.body,
document.getElementById('links')
]
</textarea>
<textarea id="parsed"></textarea>
<button id="dump">dump</button>
<script type="text/javascript" src="jsDump.js"></script>
<script type="text/javascript">
document.getElementById('dump').onclick = function(){
// All this is specifically for the demo
var text = document.getElementById('source').value;
try{
eval('var data = '+text);
}catch(e){
var data = 'ERROR: '+(e.message||e);
}
// All you need to use is something like this, where 'data' is any JS data
var dumped = jsDump.parse( data );
// Show the parsed data on the 2nd textarea
document.getElementById('parsed').value = dumped;
};
</script>
</body>
</html>