I am trying to produce a match to the output from Chrome Devtools (Elements) view, but I can’t see why some elements on the Chrome view read <P>Lorem ipsum</P>
and some read <P>"Lorem Ipsum"</P>
as both are text nodes within an element.
I have a demonstrator that shows the problem (both coming out as quoted – see Lorem1 and Lorem5)
var _TAG = 1;
var _TEXT = 3;
var _COMMENT = 8;
// ----------------------------------------------------------
function dge(id) {
return document.getElementById(id);
}
// ----------------------------------------------------------
function getVisibleHTML(tx) {
return tx.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
}
// ----------------------------------------------------------
function getTracePart(node) {
if (node.nodeType == _TEXT) {
if (node.nodeValue.trim() != '') return '<text>"' + node.nodeValue + '"</text>';
else return '';
}
if (node.nodeType == _TAG) return getVisibleHTML(node.outerHTML);
if (node.nodeType == _COMMENT) return '<BR><comment><--' + (node.nodeValue) + '--></comment><BR>';
return 'NODE TYPE ' + node.nodeType;
}
// ----------------------------------------------------------
function write(tx) {
dge('trace').innerHTML += tx;
}
// ----------------------------------------------------------
function doWalkTree(container) {
for (var c = 0; c < container.childNodes.length; c++) {
var child = container.childNodes[c];
if (child.nodeType == _TAG) {
write('<BR><' + child.tagName + '>');
doWalkTree(child);
if (child.tagName != 'BR') write('</' + child.tagName + '>');
write('<BR>');
} else write(getTracePart(child));
}
}
// ----------------------------------------------------------
doWalkTree(dge('test'));
div,p, ul {
border:solid 1px red;
margin:10px;
padding:10px;
}
span {
border-radius:9px;
padding:2px 8px 2px 8px;
margin:5px;
background-color:#e9e9e9;
display:inline-block;
}
text {
color:#77c592;
}
comment {
color:#8facdd;
}
<div id='test'>
<p>Lorem1 ipsum <b>dolor</b></p>
<br>Lorem2 ipsum dolor
<p><!--test-->Lorem3 ipsum dolor</p>
Lorem4 ipsum dolor
<p>Lorem5 ipsum dolor</p>
</div>
<hr>
<h5>Post Normalized result trace....</h5>
<div id='trace'></div>
I also have a demo running on jsfiddle (https://jsfiddle.net/Abeeee/3ts74boa/95/) but any assistance would be great.
Thanks