How to clear html of angular directives and helper comments?

Question

Is there a way to convert angular "live DOM" to a flattened plain html? I mean this:

<!-- ngRepeat: ref in refs track by $index --> <p ng_repeat="ref in refs track by $index" class="ng-scope ng-binding">a0120</p> <p ng_repeat="ref in refs track by $index" class="ng-scope ng-binding">a0241</p> <p ng_repeat="ref in refs track by $index" class="ng-scope ng-binding">z1242</p> <p ng_repeat="ref in refs track by $index" class="ng-scope ng-binding">a0120</p> 

in it:

 <p>a0120</p> <p>a0241</p> <p>z1242</p> <p>a0120</p> 

Of course, classes and attributes that are not related to the angular compilation process will be preserved.

thanks

thanks

Answer 1

Guess the best way is to just cross the DOM

Here is the code that I use if someone wants to use it, improve it or completely change it ...

The attr and class lists are obviously not complete.

 function cleanAngularStuff(el) { //recursive function var remClassList = ['ng-scope', 'ng-model', 'ng-binding', 'ng-isolate-scope'] var remAttrList = ['ng-repeat'] // If node is a comment just remove it if (el.nodeType == 8) { el.parentNode.removeChild(el); } // If its an element remove extra attributes and classes and recurse children else if (el.nodeType == 1) { // Remove extra classes. If none is left remove class attribute for (var i = 0; i < remClassList.length; i++) { el.classList.remove(remClassList[i]); if (el.classList.length == 0) { el.removeAttribute('class') } } // Remove attributes for (var h = 0; h < remAttrList.length; h++) { el.removeAttribute(remAttrList[h]) } // Recurse children for (var i = 0, len = el.childNodes.length; i < len; i++) { cleanAngularStuff(el.childNodes[i]) // If child comment is removed decrease cursor if (len > el.childNodes.length) { len = el.childNodes.length i-- } } } } 

Answer 2

You cannot parse HTML or XML related documents with regular expressions. Take a look at this discussion: RegEx matches open tags except XHTML stand-alone tags

You are better off using the HTML / XML editor.

Answer 3

I'm not sure exactly what you are trying to do, but if this is for SEO purposes using a one page web application, you can check out this article.

http://www.yearofmoo.com/2012/11/angularjs-and-seo.html