449 lines
14 KiB
HTML
449 lines
14 KiB
HTML
|
<!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 and Opera */
|
||
|
|
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>
|
||
|
|
<button onclick="test7()">test 7</button>
|
||
|
|
(For more testing, just start entering text, deleting text, copying/pasting text, etc...)
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
<button onclick="test_chrome()">test chrome</button>
|
||
|
|
<button onclick="test_firefox()">test firefox</button>
|
||
|
|
<button onclick="test_opera()">test opera</button>
|
||
|
|
<button onclick="test_ie()">test ie</button>
|
||
|
|
(typical content per browser, after some entering text and cutting/pasting within the editable div)
|
||
|
|
</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
|
||
|
|
* @return {String} innerText
|
||
|
|
*/
|
||
|
|
function getInnerText_v1 (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 '';
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* get the inner text of an HTML element (for example a div element)
|
||
|
|
* @param {Element} element
|
||
|
|
* @return {Object} [buffer]
|
||
|
|
*/
|
||
|
|
function getInnerText_v2 (element, buffer) {
|
||
|
|
if (buffer == undefined) {
|
||
|
|
buffer = {
|
||
|
|
'text': '',
|
||
|
|
'flush': function () {
|
||
|
|
var text = this.text;
|
||
|
|
this.text = '';
|
||
|
|
return text;
|
||
|
|
},
|
||
|
|
'set': function (text) {
|
||
|
|
this.text = text;
|
||
|
|
},
|
||
|
|
'add': function (text) {
|
||
|
|
this.text += text;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// text node
|
||
|
|
if (element.nodeValue) {
|
||
|
|
return buffer.flush() + 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 non-block elements and
|
||
|
|
// a block element
|
||
|
|
var prevChild = childNodes[i - 1];
|
||
|
|
var prevName = prevChild ? prevChild.nodeName : undefined;
|
||
|
|
if (prevName && prevName != 'DIV' && prevName != 'P' && prevName != 'BR') {
|
||
|
|
innerText += '\n';
|
||
|
|
buffer.flush();
|
||
|
|
}
|
||
|
|
|
||
|
|
innerText += buffer.flush();
|
||
|
|
|
||
|
|
innerText += getInnerText(child, buffer);
|
||
|
|
|
||
|
|
buffer.set('\n');
|
||
|
|
}
|
||
|
|
else if (child.nodeName == 'BR') {
|
||
|
|
innerText += buffer.flush();
|
||
|
|
buffer.set('\n');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
innerText += getInnerText(child, buffer);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return innerText;
|
||
|
|
}
|
||
|
|
|
||
|
|
// br or unknown
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* get the inner text of an HTML element (for example a div element)
|
||
|
|
* @param {Element} element
|
||
|
|
* @param {Object} [buffer]
|
||
|
|
* @return {String} innerText
|
||
|
|
*/
|
||
|
|
function getInnerText_v3 (element, buffer) {
|
||
|
|
var first = (buffer == undefined);
|
||
|
|
if (first) {
|
||
|
|
buffer = {
|
||
|
|
'text': '',
|
||
|
|
'flush': function () {
|
||
|
|
var text = this.text;
|
||
|
|
this.text = '';
|
||
|
|
return text;
|
||
|
|
},
|
||
|
|
'set': function (text) {
|
||
|
|
this.text = text;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// text node
|
||
|
|
if (element.nodeValue) {
|
||
|
|
return buffer.flush() + 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];
|
||
|
|
|
||
|
|
// console.log(child.nodeName + ' ' + (child.innerHTML || child.nodeValue)); // TODO: cleanup
|
||
|
|
|
||
|
|
if (child.nodeName == 'DIV' || child.nodeName == 'P') {
|
||
|
|
var prevChild = childNodes[i - 1];
|
||
|
|
var prevName = prevChild ? prevChild.nodeName : undefined;
|
||
|
|
if (prevName && prevName != 'DIV' && prevName != 'P' && prevName != 'BR') {
|
||
|
|
innerText += '\n';
|
||
|
|
buffer.flush();
|
||
|
|
}
|
||
|
|
innerText += getInnerText(child, buffer);
|
||
|
|
buffer.set('\n');
|
||
|
|
}
|
||
|
|
else if (child.nodeName == 'BR') {
|
||
|
|
innerText += buffer.flush();
|
||
|
|
buffer.set('\n');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
innerText += getInnerText(child, buffer);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return innerText;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (element.nodeName == 'P' && getInternetExplorerVersion() != -1) {
|
||
|
|
// On Internet Explorer, a P with hasChildNodes()==false is
|
||
|
|
// rendered with a new line. Note that a P with
|
||
|
|
// hasChildNodes()==true is rendered without a new line
|
||
|
|
return buffer.flush();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// br or unknown
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
|
||
|
|
var getInternetExplorerVersion = function() {
|
||
|
|
var rv = -1; // Return value assumes failure.
|
||
|
|
if (navigator.appName == 'Microsoft Internet Explorer')
|
||
|
|
{
|
||
|
|
var ua = navigator.userAgent;
|
||
|
|
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
|
||
|
|
if (re.exec(ua) != null)
|
||
|
|
rv = parseFloat( RegExp.$1 );
|
||
|
|
}
|
||
|
|
return rv;
|
||
|
|
};
|
||
|
|
|
||
|
|
var getInnerText = getInnerText_v3;
|
||
|
|
|
||
|
|
var editor = document.getElementById('editor');
|
||
|
|
var traverseText = document.getElementById('traverseText');
|
||
|
|
var regexText = document.getElementById('regexText');
|
||
|
|
var innerHTML = document.getElementById('innerHTML');
|
||
|
|
|
||
|
|
function displayInnerHTML () {
|
||
|
|
//function style_html (t) {return t.replace(/</g, '\n<');}
|
||
|
|
//*
|
||
|
|
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>' +
|
||
|
|
'5' +
|
||
|
|
'<span>in span</span>' +
|
||
|
|
'<div>aaa</div>' +
|
||
|
|
'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();
|
||
|
|
}
|
||
|
|
|
||
|
|
function test7 () {
|
||
|
|
editor.innerHTML = '<div>check the last return</div><div><br></div>';
|
||
|
|
displayInnerHTML();
|
||
|
|
}
|
||
|
|
|
||
|
|
function test_chrome () {
|
||
|
|
editor.innerHTML = 'abc<div><br></div><div>af</div><div><br></div><div><br></div><div>d</div><div>asd</div>';
|
||
|
|
displayInnerHTML();
|
||
|
|
}
|
||
|
|
|
||
|
|
function test_firefox () {
|
||
|
|
editor.innerHTML = 'abc<br>df<br><br>dsf<br>asdf<br><br>asdf<br>dsf<br>asdf<br><br><br>dsaf<br>';
|
||
|
|
displayInnerHTML();
|
||
|
|
}
|
||
|
|
|
||
|
|
function test_opera () {
|
||
|
|
editor.innerHTML = '<p>abc</p><p><p>df</p><p><br></p><p>d</p></p><p><p>df</p><p><br></p><p><br></p><p>d</p></p><p>asdf</p>';
|
||
|
|
displayInnerHTML();
|
||
|
|
}
|
||
|
|
|
||
|
|
function test_ie () {
|
||
|
|
editor.innerHTML = '<p>a</p><p> </p><p> </p><p>as</p><p></p><p></p><p>asdf</p><p></p><p> </p><p>c</p><p> </p><p>d</p><p> </p>';
|
||
|
|
displayInnerHTML();
|
||
|
|
}
|
||
|
|
|
||
|
|
editor.oninput = displayInnerHTML;
|
||
|
|
editor.onkeyup = displayInnerHTML;
|
||
|
|
editor.onblur = displayInnerHTML;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|