Comment-bounded HTML target page
HTML
<button id="codeBtn">Run the script code</button>
<div id="sub">
<!-- Jump Search Start -->
<div id="jump-search">
<h3 style="margin:0">Find:</h3>
<input type="text" value="" id="fakeSearchInput">
</div>
<!-- Jump Search End -->
<!-- Website Traffic Start -->
<div class="minititle">Website Traffic</div>
<div class="trafficcontain">dolor</div>
<div style="height:10px;"></div>
<!-- Website Traffic End -->
<!-- New Stats Start -->
<div class="minititle truncate-table" id="statsnew">Statistics</div>
<div id="statscontain">ipsum</div>
<div style="height:10px;"></div>
<!-- New Stats End -->
<!-- Account Info Start -->
<div class="minititle">Account Information</div>
<div class="accntcontain">Lorem</div>
<div style="height:10px;"></div>
<!-- Account Info End -->
</div>
CSS
.minititle {
background: #00008B;
border-radius: 1ex;
color: #FFD700;
padding: 0.8ex 1em;
}
#jump-search {
border-radius: 0.5ex;
padding: 0.8ex 1em;
border: 1px solid gray;
}
.minititle+div {
margin: 0 1em 1ex 1em;
}
JavaScript
$("#codeBtn").click ( function () {
var contNode = document.querySelector ("#sub");
var insPoint = findHtmlCommentsByRegex (contNode, /Jump Search Start/i);
if (insPoint && insPoint.length) {
insPoint = insPoint[0];
moveCommentBoundedNodesBefore (insPoint, contNode, "Account Info");
moveCommentBoundedNodesBefore (insPoint, contNode, "New Stats");
moveCommentBoundedNodesBefore (insPoint, contNode, "Website Traffic");
}
else {
reportError ('"Jump Search Start" comment not found!');
}
function moveCommentBoundedNodesBefore (targetNode, contNode, idingString) {
var srchRegEx = new RegExp (idingString + ' (?:Start|End)', 'i');
var nodesToMove = getNodesBoundedByStartEndComments (contNode, srchRegEx);
var pNode = targetNode.parentNode;
for (var J = 0, L = nodesToMove.length; J < L; ++J) {
pNode.insertBefore (nodesToMove[J], targetNode);
}
}
function getNodesBoundedByStartEndComments (contNode, srchRegex) {
var boundedNodes = [];
var borders = findHtmlCommentsByRegex (
contNode, srchRegex, false //-- This MUST be false.
);
if (borders && borders.length === 2) {
var bNode = borders[0];
do {
boundedNodes.push (bNode);
if (bNode == borders[1]) {
break;
}
bNode = bNode.nextSibling;
} while (bNode);
}
else {
reportError ("Error finding comment pairs with: " + srchRegex);
console.log ("borders: ", borders);
}
return boundedNodes;
}
function findHtmlCommentsByRegex (contNode, srchRegex, recurse) {
var recurse = recurse || false;
var matchingComments = [];
if (contNode) {
var chldNodes = contNode.childNodes;
...