Inject HTML Partial By Detecting Comment Block
by Jerad Rutnam -
Well here is an quick method to do it. See the example below.
Sample HTML
<!-- [UUF-ZONE]{"name": "contents","zone": "start"} -->
<div>Contents Zone</div>
<!-- [UUF-ZONE]{"name": "contents","zone": "end"} -->
<br><br>
<!-- [UUF-ZONE]{"name": "footer","zone": "start"} -->
<div>Footer Zone</div>
<!-- [UUF-ZONE]{"name": "footer","zone": "end"} -->
JavaScript/jQuery Code
$(function() {
var commentsObj = {};
$("*").contents().filter(function(){
return this.nodeName == '#comment';
}).each(function(i, e){
var commentName = e.nodeValue;
if(commentName.indexOf('[UUF-ZONE]') >= 0){
var commentValue = commentName.replace('[UUF-ZONE]', '');
commentValue = JSON.parse(commentValue);
if(!commentsObj[commentValue.name]){
commentsObj[commentValue.name] = {};
}
commentsObj[commentValue.name][commentValue.zone] = e;
}
});
$(commentsObj.contents.start).after("<div style='color:#f47b20'>Prepend<div>");
$(commentsObj.contents.end).before("<div style='color:#f47b20'>Append</div>");
var innerContents = $(commentsObj.footer.start).parent().contents();
innerContents.slice(innerContents.index($(commentsObj.footer.start)) + 1,
innerContents.index($(commentsObj.footer.end))).remove();
$(commentsObj.footer.start).after("<div style='color:#f47b20'>Text is Replaced</div>");
});