262 lines
7.2 KiB
HTML
262 lines
7.2 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 */
|
|
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> |