Cleaned up old files
This commit is contained in:
Jos de Jong
parent
a16dc3071e
commit
321a5e91a0
487
json2.js
487
json2.js
|
|
@ -1,487 +0,0 @@
|
||||||
/*
|
|
||||||
http://www.JSON.org/json2.js
|
|
||||||
2011-10-19
|
|
||||||
|
|
||||||
Public Domain.
|
|
||||||
|
|
||||||
NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
|
|
||||||
|
|
||||||
See http://www.JSON.org/js.html
|
|
||||||
|
|
||||||
|
|
||||||
This code should be minified before deployment.
|
|
||||||
See http://javascript.crockford.com/jsmin.html
|
|
||||||
|
|
||||||
USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
|
|
||||||
NOT CONTROL.
|
|
||||||
|
|
||||||
|
|
||||||
This file creates a global JSON object containing two methods: stringify
|
|
||||||
and parse.
|
|
||||||
|
|
||||||
JSON.stringify(value, replacer, space)
|
|
||||||
value any JavaScript value, usually an object or array.
|
|
||||||
|
|
||||||
replacer an optional parameter that determines how object
|
|
||||||
values are stringified for objects. It can be a
|
|
||||||
function or an array of strings.
|
|
||||||
|
|
||||||
space an optional parameter that specifies the indentation
|
|
||||||
of nested structures. If it is omitted, the text will
|
|
||||||
be packed without extra whitespace. If it is a number,
|
|
||||||
it will specify the number of spaces to indent at each
|
|
||||||
level. If it is a string (such as '\t' or ' '),
|
|
||||||
it contains the characters used to indent at each level.
|
|
||||||
|
|
||||||
This method produces a JSON text from a JavaScript value.
|
|
||||||
|
|
||||||
When an object value is found, if the object contains a toJSON
|
|
||||||
method, its toJSON method will be called and the result will be
|
|
||||||
stringified. A toJSON method does not serialize: it returns the
|
|
||||||
value represented by the name/value pair that should be serialized,
|
|
||||||
or undefined if nothing should be serialized. The toJSON method
|
|
||||||
will be passed the key associated with the value, and this will be
|
|
||||||
bound to the value
|
|
||||||
|
|
||||||
For example, this would serialize Dates as ISO strings.
|
|
||||||
|
|
||||||
Date.prototype.toJSON = function (key) {
|
|
||||||
function f(n) {
|
|
||||||
// Format integers to have at least two digits.
|
|
||||||
return n < 10 ? '0' + n : n;
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.getUTCFullYear() + '-' +
|
|
||||||
f(this.getUTCMonth() + 1) + '-' +
|
|
||||||
f(this.getUTCDate()) + 'T' +
|
|
||||||
f(this.getUTCHours()) + ':' +
|
|
||||||
f(this.getUTCMinutes()) + ':' +
|
|
||||||
f(this.getUTCSeconds()) + 'Z';
|
|
||||||
};
|
|
||||||
|
|
||||||
You can provide an optional replacer method. It will be passed the
|
|
||||||
key and value of each member, with this bound to the containing
|
|
||||||
object. The value that is returned from your method will be
|
|
||||||
serialized. If your method returns undefined, then the member will
|
|
||||||
be excluded from the serialization.
|
|
||||||
|
|
||||||
If the replacer parameter is an array of strings, then it will be
|
|
||||||
used to select the members to be serialized. It filters the results
|
|
||||||
such that only members with keys listed in the replacer array are
|
|
||||||
stringified.
|
|
||||||
|
|
||||||
Values that do not have JSON representations, such as undefined or
|
|
||||||
functions, will not be serialized. Such values in objects will be
|
|
||||||
dropped; in arrays they will be replaced with null. You can use
|
|
||||||
a replacer function to replace those with JSON values.
|
|
||||||
JSON.stringify(undefined) returns undefined.
|
|
||||||
|
|
||||||
The optional space parameter produces a stringification of the
|
|
||||||
value that is filled with line breaks and indentation to make it
|
|
||||||
easier to read.
|
|
||||||
|
|
||||||
If the space parameter is a non-empty string, then that string will
|
|
||||||
be used for indentation. If the space parameter is a number, then
|
|
||||||
the indentation will be that many spaces.
|
|
||||||
|
|
||||||
Example:
|
|
||||||
|
|
||||||
text = JSON.stringify(['e', {pluribus: 'unum'}]);
|
|
||||||
// text is '["e",{"pluribus":"unum"}]'
|
|
||||||
|
|
||||||
|
|
||||||
text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t');
|
|
||||||
// text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
|
|
||||||
|
|
||||||
text = JSON.stringify([new Date()], function (key, value) {
|
|
||||||
return this[key] instanceof Date ?
|
|
||||||
'Date(' + this[key] + ')' : value;
|
|
||||||
});
|
|
||||||
// text is '["Date(---current time---)"]'
|
|
||||||
|
|
||||||
|
|
||||||
JSON.parse(text, reviver)
|
|
||||||
This method parses a JSON text to produce an object or array.
|
|
||||||
It can throw a SyntaxError exception.
|
|
||||||
|
|
||||||
The optional reviver parameter is a function that can filter and
|
|
||||||
transform the results. It receives each of the keys and values,
|
|
||||||
and its return value is used instead of the original value.
|
|
||||||
If it returns what it received, then the structure is not modified.
|
|
||||||
If it returns undefined then the member is deleted.
|
|
||||||
|
|
||||||
Example:
|
|
||||||
|
|
||||||
// Parse the text. Values that look like ISO date strings will
|
|
||||||
// be converted to Date objects.
|
|
||||||
|
|
||||||
myData = JSON.parse(text, function (key, value) {
|
|
||||||
var a;
|
|
||||||
if (typeof value === 'string') {
|
|
||||||
a =
|
|
||||||
/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
|
|
||||||
if (a) {
|
|
||||||
return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
|
|
||||||
+a[5], +a[6]));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
});
|
|
||||||
|
|
||||||
myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
|
|
||||||
var d;
|
|
||||||
if (typeof value === 'string' &&
|
|
||||||
value.slice(0, 5) === 'Date(' &&
|
|
||||||
value.slice(-1) === ')') {
|
|
||||||
d = new Date(value.slice(5, -1));
|
|
||||||
if (d) {
|
|
||||||
return d;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
This is a reference implementation. You are free to copy, modify, or
|
|
||||||
redistribute.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*jslint evil: true, regexp: true */
|
|
||||||
|
|
||||||
/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply,
|
|
||||||
call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
|
|
||||||
getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
|
|
||||||
lastIndex, length, parse, prototype, push, replace, slice, stringify,
|
|
||||||
test, toJSON, toString, valueOf
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
// Create a JSON object only if one does not already exist. We create the
|
|
||||||
// methods in a closure to avoid creating global variables.
|
|
||||||
|
|
||||||
var JSON;
|
|
||||||
if (!JSON) {
|
|
||||||
JSON = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
function f(n) {
|
|
||||||
// Format integers to have at least two digits.
|
|
||||||
return n < 10 ? '0' + n : n;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof Date.prototype.toJSON !== 'function') {
|
|
||||||
|
|
||||||
Date.prototype.toJSON = function (key) {
|
|
||||||
|
|
||||||
return isFinite(this.valueOf())
|
|
||||||
? this.getUTCFullYear() + '-' +
|
|
||||||
f(this.getUTCMonth() + 1) + '-' +
|
|
||||||
f(this.getUTCDate()) + 'T' +
|
|
||||||
f(this.getUTCHours()) + ':' +
|
|
||||||
f(this.getUTCMinutes()) + ':' +
|
|
||||||
f(this.getUTCSeconds()) + 'Z'
|
|
||||||
: null;
|
|
||||||
};
|
|
||||||
|
|
||||||
String.prototype.toJSON =
|
|
||||||
Number.prototype.toJSON =
|
|
||||||
Boolean.prototype.toJSON = function (key) {
|
|
||||||
return this.valueOf();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
|
|
||||||
escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
|
|
||||||
gap,
|
|
||||||
indent,
|
|
||||||
meta = { // table of character substitutions
|
|
||||||
'\b': '\\b',
|
|
||||||
'\t': '\\t',
|
|
||||||
'\n': '\\n',
|
|
||||||
'\f': '\\f',
|
|
||||||
'\r': '\\r',
|
|
||||||
'"' : '\\"',
|
|
||||||
'\\': '\\\\'
|
|
||||||
},
|
|
||||||
rep;
|
|
||||||
|
|
||||||
|
|
||||||
function quote(string) {
|
|
||||||
|
|
||||||
// If the string contains no control characters, no quote characters, and no
|
|
||||||
// backslash characters, then we can safely slap some quotes around it.
|
|
||||||
// Otherwise we must also replace the offending characters with safe escape
|
|
||||||
// sequences.
|
|
||||||
|
|
||||||
escapable.lastIndex = 0;
|
|
||||||
return escapable.test(string) ? '"' + string.replace(escapable, function (a) {
|
|
||||||
var c = meta[a];
|
|
||||||
return typeof c === 'string'
|
|
||||||
? c
|
|
||||||
: '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
|
|
||||||
}) + '"' : '"' + string + '"';
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function str(key, holder) {
|
|
||||||
|
|
||||||
// Produce a string from holder[key].
|
|
||||||
|
|
||||||
var i, // The loop counter.
|
|
||||||
k, // The member key.
|
|
||||||
v, // The member value.
|
|
||||||
length,
|
|
||||||
mind = gap,
|
|
||||||
partial,
|
|
||||||
value = holder[key];
|
|
||||||
|
|
||||||
// If the value has a toJSON method, call it to obtain a replacement value.
|
|
||||||
|
|
||||||
if (value && typeof value === 'object' &&
|
|
||||||
typeof value.toJSON === 'function') {
|
|
||||||
value = value.toJSON(key);
|
|
||||||
}
|
|
||||||
|
|
||||||
// If we were called with a replacer function, then call the replacer to
|
|
||||||
// obtain a replacement value.
|
|
||||||
|
|
||||||
if (typeof rep === 'function') {
|
|
||||||
value = rep.call(holder, key, value);
|
|
||||||
}
|
|
||||||
|
|
||||||
// What happens next depends on the value's type.
|
|
||||||
|
|
||||||
switch (typeof value) {
|
|
||||||
case 'string':
|
|
||||||
return quote(value);
|
|
||||||
|
|
||||||
case 'number':
|
|
||||||
|
|
||||||
// JSON numbers must be finite. Encode non-finite numbers as null.
|
|
||||||
|
|
||||||
return isFinite(value) ? String(value) : 'null';
|
|
||||||
|
|
||||||
case 'boolean':
|
|
||||||
case 'null':
|
|
||||||
|
|
||||||
// If the value is a boolean or null, convert it to a string. Note:
|
|
||||||
// typeof null does not produce 'null'. The case is included here in
|
|
||||||
// the remote chance that this gets fixed someday.
|
|
||||||
|
|
||||||
return String(value);
|
|
||||||
|
|
||||||
// If the type is 'object', we might be dealing with an object or an array or
|
|
||||||
// null.
|
|
||||||
|
|
||||||
case 'object':
|
|
||||||
|
|
||||||
// Due to a specification blunder in ECMAScript, typeof null is 'object',
|
|
||||||
// so watch out for that case.
|
|
||||||
|
|
||||||
if (!value) {
|
|
||||||
return 'null';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Make an array to hold the partial results of stringifying this object value.
|
|
||||||
|
|
||||||
gap += indent;
|
|
||||||
partial = [];
|
|
||||||
|
|
||||||
// Is the value an array?
|
|
||||||
|
|
||||||
if (Object.prototype.toString.apply(value) === '[object Array]') {
|
|
||||||
|
|
||||||
// The value is an array. Stringify every element. Use null as a placeholder
|
|
||||||
// for non-JSON values.
|
|
||||||
|
|
||||||
length = value.length;
|
|
||||||
for (i = 0; i < length; i += 1) {
|
|
||||||
partial[i] = str(i, value) || 'null';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Join all of the elements together, separated with commas, and wrap them in
|
|
||||||
// brackets.
|
|
||||||
|
|
||||||
v = partial.length === 0
|
|
||||||
? '[]'
|
|
||||||
: gap
|
|
||||||
? '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']'
|
|
||||||
: '[' + partial.join(',') + ']';
|
|
||||||
gap = mind;
|
|
||||||
return v;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the replacer is an array, use it to select the members to be stringified.
|
|
||||||
|
|
||||||
if (rep && typeof rep === 'object') {
|
|
||||||
length = rep.length;
|
|
||||||
for (i = 0; i < length; i += 1) {
|
|
||||||
if (typeof rep[i] === 'string') {
|
|
||||||
k = rep[i];
|
|
||||||
v = str(k, value);
|
|
||||||
if (v) {
|
|
||||||
partial.push(quote(k) + (gap ? ': ' : ':') + v);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
|
|
||||||
// Otherwise, iterate through all of the keys in the object.
|
|
||||||
|
|
||||||
for (k in value) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(value, k)) {
|
|
||||||
v = str(k, value);
|
|
||||||
if (v) {
|
|
||||||
partial.push(quote(k) + (gap ? ': ' : ':') + v);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Join all of the member texts together, separated with commas,
|
|
||||||
// and wrap them in braces.
|
|
||||||
|
|
||||||
v = partial.length === 0
|
|
||||||
? '{}'
|
|
||||||
: gap
|
|
||||||
? '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}'
|
|
||||||
: '{' + partial.join(',') + '}';
|
|
||||||
gap = mind;
|
|
||||||
return v;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the JSON object does not yet have a stringify method, give it one.
|
|
||||||
|
|
||||||
if (typeof JSON.stringify !== 'function') {
|
|
||||||
JSON.stringify = function (value, replacer, space) {
|
|
||||||
|
|
||||||
// The stringify method takes a value and an optional replacer, and an optional
|
|
||||||
// space parameter, and returns a JSON text. The replacer can be a function
|
|
||||||
// that can replace values, or an array of strings that will select the keys.
|
|
||||||
// A default replacer method can be provided. Use of the space parameter can
|
|
||||||
// produce text that is more easily readable.
|
|
||||||
|
|
||||||
var i;
|
|
||||||
gap = '';
|
|
||||||
indent = '';
|
|
||||||
|
|
||||||
// If the space parameter is a number, make an indent string containing that
|
|
||||||
// many spaces.
|
|
||||||
|
|
||||||
if (typeof space === 'number') {
|
|
||||||
for (i = 0; i < space; i += 1) {
|
|
||||||
indent += ' ';
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the space parameter is a string, it will be used as the indent string.
|
|
||||||
|
|
||||||
} else if (typeof space === 'string') {
|
|
||||||
indent = space;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If there is a replacer, it must be a function or an array.
|
|
||||||
// Otherwise, throw an error.
|
|
||||||
|
|
||||||
rep = replacer;
|
|
||||||
if (replacer && typeof replacer !== 'function' &&
|
|
||||||
(typeof replacer !== 'object' ||
|
|
||||||
typeof replacer.length !== 'number')) {
|
|
||||||
throw new Error('JSON.stringify');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Make a fake root object containing our value under the key of ''.
|
|
||||||
// Return the result of stringifying the value.
|
|
||||||
|
|
||||||
return str('', {'': value});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// If the JSON object does not yet have a parse method, give it one.
|
|
||||||
|
|
||||||
if (typeof JSON.parse !== 'function') {
|
|
||||||
JSON.parse = function (text, reviver) {
|
|
||||||
|
|
||||||
// The parse method takes a text and an optional reviver function, and returns
|
|
||||||
// a JavaScript value if the text is a valid JSON text.
|
|
||||||
|
|
||||||
var j;
|
|
||||||
|
|
||||||
function walk(holder, key) {
|
|
||||||
|
|
||||||
// The walk method is used to recursively walk the resulting structure so
|
|
||||||
// that modifications can be made.
|
|
||||||
|
|
||||||
var k, v, value = holder[key];
|
|
||||||
if (value && typeof value === 'object') {
|
|
||||||
for (k in value) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(value, k)) {
|
|
||||||
v = walk(value, k);
|
|
||||||
if (v !== undefined) {
|
|
||||||
value[k] = v;
|
|
||||||
} else {
|
|
||||||
delete value[k];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return reviver.call(holder, key, value);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Parsing happens in four stages. In the first stage, we replace certain
|
|
||||||
// Unicode characters with escape sequences. JavaScript handles many characters
|
|
||||||
// incorrectly, either silently deleting them, or treating them as line endings.
|
|
||||||
|
|
||||||
text = String(text);
|
|
||||||
cx.lastIndex = 0;
|
|
||||||
if (cx.test(text)) {
|
|
||||||
text = text.replace(cx, function (a) {
|
|
||||||
return '\\u' +
|
|
||||||
('0000' + a.charCodeAt(0).toString(16)).slice(-4);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// In the second stage, we run the text against regular expressions that look
|
|
||||||
// for non-JSON patterns. We are especially concerned with '()' and 'new'
|
|
||||||
// because they can cause invocation, and '=' because it can cause mutation.
|
|
||||||
// But just to be safe, we want to reject all unexpected forms.
|
|
||||||
|
|
||||||
// We split the second stage into 4 regexp operations in order to work around
|
|
||||||
// crippling inefficiencies in IE's and Safari's regexp engines. First we
|
|
||||||
// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
|
|
||||||
// replace all simple value tokens with ']' characters. Third, we delete all
|
|
||||||
// open brackets that follow a colon or comma or that begin the text. Finally,
|
|
||||||
// we look to see that the remaining characters are only whitespace or ']' or
|
|
||||||
// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
|
|
||||||
|
|
||||||
if (/^[\],:{}\s]*$/
|
|
||||||
.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
|
|
||||||
.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
|
|
||||||
.replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
|
|
||||||
|
|
||||||
// In the third stage we use the eval function to compile the text into a
|
|
||||||
// JavaScript structure. The '{' operator is subject to a syntactic ambiguity
|
|
||||||
// in JavaScript: it can begin a block or an object literal. We wrap the text
|
|
||||||
// in parens to eliminate the ambiguity.
|
|
||||||
|
|
||||||
j = eval('(' + text + ')');
|
|
||||||
|
|
||||||
// In the optional fourth stage, we recursively walk the new structure, passing
|
|
||||||
// each name/value pair to a reviver function for possible transformation.
|
|
||||||
|
|
||||||
return typeof reviver === 'function'
|
|
||||||
? walk({'': j}, '')
|
|
||||||
: j;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the text is not JSON parseable, then a SyntaxError is thrown.
|
|
||||||
|
|
||||||
throw new SyntaxError('JSON.parse');
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}());
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
#mirror {
|
|
||||||
border: 1px solid gray;
|
|
||||||
/*display: inline;*/
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#text {
|
|
||||||
/*white-space: nowrap;*/
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mirror, #text {
|
|
||||||
font-family: sans;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<textarea id="text" onkeyup="autosize(this);" onchange="autosize(this);" wrap="off">test</textarea>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div id="mirror"></div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function autosize(textarea) {
|
|
||||||
textarea.style.height = '0px';
|
|
||||||
textarea.style.width = '0px';
|
|
||||||
var scrollHeight = textarea.scrollHeight;
|
|
||||||
var scrollWidth = textarea.scrollWidth;
|
|
||||||
textarea.style.height = (scrollHeight + 2) + 'px';
|
|
||||||
textarea.style.width = (scrollWidth + 20) + 'px';
|
|
||||||
|
|
||||||
//textarea.style.height = 'auto';
|
|
||||||
textarea.style.overflow = 'hidden';
|
|
||||||
//textarea.style.overflow = 'auto';
|
|
||||||
|
|
||||||
mirror = document.getElementById('mirror');
|
|
||||||
mirror.innerText = textarea.value;
|
|
||||||
|
|
||||||
//console.log(mirror.clientWidth, mirror.clientHeight);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
var text = document.getElementById('text');
|
|
||||||
autosize(text);
|
|
||||||
text.focus();
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,262 +0,0 @@
|
||||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
||||||
"http://www.w3.org/TR/html4/loose.dtd">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>test editable div</title>
|
|
||||||
|
|
||||||
<!-- http://jsbeautifier.org/ -->
|
|
||||||
<script type="text/javascript" src="http://jsbeautifier.org/beautify.js"></script>
|
|
||||||
<script type="text/javascript" src="http://jsbeautifier.org/beautify-css.js"></script>
|
|
||||||
<script type="text/javascript" src="http://jsbeautifier.org/beautify-html.js"></script>
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
body {
|
|
||||||
font-size: 10pt;
|
|
||||||
font-family: verdana, arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#editor, #traverseText, #regexText {
|
|
||||||
width: 200px;
|
|
||||||
height: 400px;
|
|
||||||
border: 1px solid gray;
|
|
||||||
overflow: auto;
|
|
||||||
font: 10pt monospace;
|
|
||||||
color: #1a1a1a;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#editor p { /* For IE */
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
td, th {
|
|
||||||
text-align: left;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<p style="font-weight: bold;">
|
|
||||||
Test file for testing two different methods to extract the inner text (including
|
|
||||||
return characters) from and editable div.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<button onclick="test1()">test 1</button>
|
|
||||||
<button onclick="test2()">test 2</button>
|
|
||||||
<button onclick="test3()">test 3</button>
|
|
||||||
<button onclick="test4()">test 4</button>
|
|
||||||
<button onclick="test5()">test 5</button>
|
|
||||||
<button onclick="test6()">test 6</button>
|
|
||||||
(For more testing, just start entering text, deleting text, copying/pasting text, etc...)
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<th>editable div</th>
|
|
||||||
<th>traverse</th>
|
|
||||||
<th>regex</th>
|
|
||||||
<th>innerHTML</th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><div id="editor" contenteditable="true"></div></td>
|
|
||||||
<td><textarea id="traverseText"></textarea></td>
|
|
||||||
<td><textarea id="regexText"></textarea></td>
|
|
||||||
<td><pre id="innerHTML"></pre></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
function prepareHtmlForEscaping (html) {
|
|
||||||
//html = JSONEditor.insertMissingEscapes(html);
|
|
||||||
html = html.replace(/<br[^>]*>\s*<div>/g, '<div>');
|
|
||||||
|
|
||||||
// DIV BR /DIV => \n
|
|
||||||
html = html.replace(/<div>\s*(?:<br[^>]*>)?\s*<\/div>/g, '\\n');
|
|
||||||
|
|
||||||
// strip trailing BR
|
|
||||||
html = html.replace(/<br[^>]*>(\s*)$/, '$1');
|
|
||||||
|
|
||||||
// BR /DIV => /DIV
|
|
||||||
html = html.replace(/<br[^>]*>\s*<\/div>/g, '</div>');
|
|
||||||
|
|
||||||
// place \n before line breaking HTML so typed line breaks get preserved
|
|
||||||
html = html.replace(/(<(?:br|div))\b/g, '\\n$1');
|
|
||||||
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
|
|
||||||
function stripHTML (html) {
|
|
||||||
// remove HTML tags
|
|
||||||
// code from nickf, http://stackoverflow.com/a/822464/1262753
|
|
||||||
return html.replace(/<(?:.|\n)*?>/gm, '');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* get the inner text of an HTML element using regex expressions
|
|
||||||
* @param {Element} element
|
|
||||||
* @return {String} innerText
|
|
||||||
*/
|
|
||||||
function getInnerTextUsingRegex (element) {
|
|
||||||
var html = prepareHtmlForEscaping(element.innerHTML);
|
|
||||||
var json = '"' + html + '"';
|
|
||||||
return stripHTML(JSON.parse(json));
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the inner text of an HTML element (for example a div element)
|
|
||||||
* @param {Element} element
|
|
||||||
* @param {Number} [level] Nesting level. This value is automatically
|
|
||||||
* set when the method is called recursively
|
|
||||||
* @return {String} innerText
|
|
||||||
*/
|
|
||||||
function getInnerText (element, level) {
|
|
||||||
if (level == undefined) {
|
|
||||||
level = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// text node
|
|
||||||
if (element.nodeValue) {
|
|
||||||
return element.nodeValue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// divs or other HTML elements
|
|
||||||
if (element.hasChildNodes()) {
|
|
||||||
var childNodes = element.childNodes;
|
|
||||||
var innerText = '';
|
|
||||||
|
|
||||||
for (var i = 0, iMax = childNodes.length; i < iMax; i++) {
|
|
||||||
var child = childNodes[i];
|
|
||||||
|
|
||||||
if (child.nodeName == 'DIV' || child.nodeName == 'P') {
|
|
||||||
// check to add a return between #text and <div>
|
|
||||||
var prevChild = childNodes[i - 1];
|
|
||||||
if (prevChild && prevChild.nodeName == '#text') {
|
|
||||||
innerText += '\n';
|
|
||||||
}
|
|
||||||
|
|
||||||
innerText += getInnerText(child, level + 1);
|
|
||||||
|
|
||||||
// add text after the end of div
|
|
||||||
if ((i < iMax - 1) && (innerText[innerText.length-1] != '\n')) {
|
|
||||||
innerText += '\n';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (child.nodeName == 'BR') {
|
|
||||||
// insert return except when on level 0 and at the last element
|
|
||||||
if (level != 0 || i < iMax - 1) {
|
|
||||||
innerText += '\n';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
innerText += getInnerText(child, level + 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return innerText;
|
|
||||||
}
|
|
||||||
|
|
||||||
// br or unknown
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
|
|
||||||
var editor = document.getElementById('editor');
|
|
||||||
var traverseText = document.getElementById('traverseText');
|
|
||||||
var regexText = document.getElementById('regexText');
|
|
||||||
var innerHTML = document.getElementById('innerHTML');
|
|
||||||
|
|
||||||
function displayInnerHTML () {
|
|
||||||
if (editor.innerText) {
|
|
||||||
innerHTML.innerText = style_html(editor.innerHTML);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
innerHTML.textContent = style_html(editor.innerHTML);
|
|
||||||
}
|
|
||||||
|
|
||||||
traverseText.value = getInnerText(editor);
|
|
||||||
regexText.value = getInnerTextUsingRegex(editor);
|
|
||||||
}
|
|
||||||
|
|
||||||
function test1 () {
|
|
||||||
editor.innerHTML =
|
|
||||||
'Typical Chrome...' +
|
|
||||||
'<div>1</div>' +
|
|
||||||
'<div>2</div>' +
|
|
||||||
'<div><br class="Apple-interchange-newline"></div>' +
|
|
||||||
'<div><br></div>' +
|
|
||||||
'<div>3</div>' +
|
|
||||||
|
|
||||||
'Typical Firefox...' +
|
|
||||||
'<br>1' +
|
|
||||||
'<br>2' +
|
|
||||||
'<br>' +
|
|
||||||
'<br>3' +
|
|
||||||
'<br>' +
|
|
||||||
|
|
||||||
'<p>Typical IE...</p>' +
|
|
||||||
'<p>1</p>' +
|
|
||||||
'<p>2</p>' +
|
|
||||||
'<p> </p>' +
|
|
||||||
'<p> </p>' +
|
|
||||||
'<p>check the last return</p>';
|
|
||||||
|
|
||||||
displayInnerHTML();
|
|
||||||
}
|
|
||||||
|
|
||||||
function test2 () {
|
|
||||||
editor.innerHTML =
|
|
||||||
'<div>' +
|
|
||||||
'<div>Some weird nested divs</div>' +
|
|
||||||
'<div>' +
|
|
||||||
'<div>1</div>' +
|
|
||||||
'</div>' +
|
|
||||||
'<div><br></div>' +
|
|
||||||
'<div><br></div>' +
|
|
||||||
'</div>' +
|
|
||||||
'2' +
|
|
||||||
'</div>' +
|
|
||||||
'<div><br><br></div>' +
|
|
||||||
'<div>3</div>' +
|
|
||||||
'</div>' +
|
|
||||||
'<br>' +
|
|
||||||
'4' +
|
|
||||||
'<br>' +
|
|
||||||
'check the last return' +
|
|
||||||
'<br>';
|
|
||||||
|
|
||||||
displayInnerHTML();
|
|
||||||
}
|
|
||||||
|
|
||||||
function test3 () {
|
|
||||||
editor.innerHTML = '<div>check the last return</div>';
|
|
||||||
|
|
||||||
displayInnerHTML();
|
|
||||||
}
|
|
||||||
|
|
||||||
function test4 () {
|
|
||||||
editor.innerHTML = '<br>';
|
|
||||||
|
|
||||||
displayInnerHTML();
|
|
||||||
}
|
|
||||||
|
|
||||||
function test5 () {
|
|
||||||
editor.innerHTML = '';
|
|
||||||
|
|
||||||
displayInnerHTML();
|
|
||||||
}
|
|
||||||
|
|
||||||
function test6 () {
|
|
||||||
editor.innerHTML = 'just text';
|
|
||||||
|
|
||||||
displayInnerHTML();
|
|
||||||
}
|
|
||||||
|
|
||||||
editor.oninput = displayInnerHTML;
|
|
||||||
editor.onkeyup = displayInnerHTML;
|
|
||||||
editor.onblur = displayInnerHTML;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
<html>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
http://www.quirksmode.org/css/clearing.html
|
|
||||||
-->
|
|
||||||
|
|
||||||
<head>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
#frame {
|
|
||||||
width: 25%;
|
|
||||||
height: 50%;
|
|
||||||
border: 1px solid gray;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
/*
|
|
||||||
overflow: auto;
|
|
||||||
width: 100%;
|
|
||||||
*/
|
|
||||||
clear: both;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field {
|
|
||||||
float: left;
|
|
||||||
border: 1px solid green;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
border: 1px solid blue;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="frame">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<div class="container">
|
|
||||||
<div class="field">field</div>
|
|
||||||
<div class="value">value</div>
|
|
||||||
<div class="edit">edit</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<div class="container">
|
|
||||||
<div class="field">field<br>2nd line</div>
|
|
||||||
<div class="value">value</div>
|
|
||||||
<div class="edit">edit</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<div class="container">
|
|
||||||
<div class="field">field</div>
|
|
||||||
<div class="value">value<br>2nd line</div>
|
|
||||||
<div class="edit">edit</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid gray;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
function loadTable() {
|
|
||||||
var start = +new Date();
|
|
||||||
|
|
||||||
var table = document.createElement('table');
|
|
||||||
var tbody = document.createElement('tbody');
|
|
||||||
table.appendChild(tbody);
|
|
||||||
table.className = 'table';
|
|
||||||
|
|
||||||
var count = 10000;
|
|
||||||
for (var i = 0; i < count; i++) {
|
|
||||||
var tr = document.createElement('tr');
|
|
||||||
tbody.appendChild(tr);
|
|
||||||
|
|
||||||
var td1 = document.createElement('td');
|
|
||||||
tr.appendChild(td1);
|
|
||||||
var input1 = document.createElement('input');
|
|
||||||
input1.value = 'input1 ' + i;
|
|
||||||
td1.appendChild(input1);
|
|
||||||
|
|
||||||
var td2 = document.createElement('td');
|
|
||||||
tr.appendChild(td2);
|
|
||||||
var input2 = document.createElement('input');
|
|
||||||
input2.value = 'input2 ' + i;
|
|
||||||
td2.appendChild(input2);
|
|
||||||
|
|
||||||
var td3 = document.createElement('td');
|
|
||||||
td3.appendChild(document.createTextNode('bla bla'));
|
|
||||||
tr.appendChild(td3);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('table').appendChild(table);
|
|
||||||
|
|
||||||
var height = table.clientHeight;
|
|
||||||
|
|
||||||
var end = +new Date();
|
|
||||||
console.log('created table in ' + (end-start) + ' ms');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body onload="loadTable();">
|
|
||||||
|
|
||||||
<div id="table"></div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
div.input {
|
|
||||||
border: 1px solid gray;
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
function loadTable() {
|
|
||||||
var start = +new Date();
|
|
||||||
|
|
||||||
var table = document.createElement('table');
|
|
||||||
var tbody = document.createElement('tbody');
|
|
||||||
table.appendChild(tbody);
|
|
||||||
table.className = 'table';
|
|
||||||
|
|
||||||
var count = 10000;
|
|
||||||
for (var i = 0; i < count; i++) {
|
|
||||||
var tr = document.createElement('tr');
|
|
||||||
tbody.appendChild(tr);
|
|
||||||
|
|
||||||
var td1 = document.createElement('td');
|
|
||||||
tr.appendChild(td1);
|
|
||||||
var input1 = document.createElement('div');
|
|
||||||
input1.className = 'input';
|
|
||||||
input1.contentEditable = 'true';
|
|
||||||
input1.innerHTML = 'input1 ' + i;
|
|
||||||
td1.appendChild(input1);
|
|
||||||
|
|
||||||
var td2 = document.createElement('td');
|
|
||||||
tr.appendChild(td2);
|
|
||||||
var input2 = document.createElement('div');
|
|
||||||
input2.className = 'input';
|
|
||||||
input2.contentEditable = 'true';
|
|
||||||
input2.innerHTML = 'input2 ' + i;
|
|
||||||
td2.appendChild(input2);
|
|
||||||
|
|
||||||
var td3 = document.createElement('td');
|
|
||||||
td3.appendChild(document.createTextNode('bla bla'));
|
|
||||||
tr.appendChild(td3);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('table').appendChild(table);
|
|
||||||
|
|
||||||
var height = table.clientHeight; // force a reflow
|
|
||||||
|
|
||||||
var end = +new Date();
|
|
||||||
console.log('created table in ' + (end-start) + ' ms');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body onload="loadTable();">
|
|
||||||
|
|
||||||
<div id="table"></div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<html>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<table style="table-layout: fixed; width: 400px; border: 1px solid red;">
|
|
||||||
<tr><td style="word-wrap: break-word">
|
|
||||||
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
|
|
||||||
</td></tr>
|
|
||||||
</table>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<table style="table-layout: fixed; width: 400px; border: 1px solid red;">
|
|
||||||
<tr><td>
|
|
||||||
<table style="table-layout: fixed; max-width: 100%; word-wrap: break-word; ">
|
|
||||||
<tr><td style="word-wrap: break-word;">
|
|
||||||
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
|
|
||||||
</td></tr>
|
|
||||||
</table>
|
|
||||||
</td></tr>
|
|
||||||
</table>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<table style="table-layout: fixed; max-width: 400px; border: 1px solid red;">
|
|
||||||
<tr><td style="word-wrap: break-word;">
|
|
||||||
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
|
|
||||||
</td></tr>
|
|
||||||
</table>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div contenteditable="true" style="word-wrap: break-word; max-width: 400px; border: 1px solid green;">
|
|
||||||
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div style="display: table; width: 400px; border: 1px solid blue;">
|
|
||||||
<div style="display: table-cell; word-wrap: break-word;">
|
|
||||||
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
|
|
||||||
</div>
|
|
||||||
<div style="display: table-cell; word-wrap: break-word;">
|
|
||||||
end
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue