How to clean html from angular directives and helper comments?

Question

Is there a way to transform the angular "live DOM" to a flattened plain html? I mean turning 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>

into this:

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

Of course, classes and attributes not related to angular compile process would be kept.

Thanks

Could you elaborate on what you mean by "live DOM"? Once angular has compiled the DOM (which is has to do before anything becomes functional), you end up with essentially a normal javascript webpage. Is this what you are asking about? — Andyrooger, Oct 15 '13 at 00:55

score 1 · Answer 1 · answered Oct 16 '13 at 14:10

A guess the best way is to just traverse the DOM

Here's the code I'm using if someone want's to use it, improve it or change it completly...

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--
            }
        }

    }
}

If you have jQuery `$('.ng-scope, .ng-model, .ng-binding, .ng-isolate-scope').removeClass('.ng-scope .ng-model .ng-binding .ng-isolate-scope');` `$('[ng-repeat]').attr('ng-repeat',null)` — markmarijnissen, Mar 24 '14 at 11:19
@markmarijnissen there shouldn't be dots in the removeClass string — Pascal_dher, Oct 13 '16 at 10:58

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

You can't parse HTML or XML similar documents with regular expressions. Have a look at this discussion: RegEx match open tags except XHTML self-contained tags

You'd be better off using a HTML/XML editor.

edited May 23 '17 at 12:00

Community

1
1

answered Oct 15 '13 at 00:59

Monty Wild

3,981
1
21
36

score 0 · Answer 3 · answered Oct 15 '13 at 01:27

0

I'm not sure exactly what you are trying to do, but if its for SEO purposes with a single page web app you may want to check out this article

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

answered Oct 15 '13 at 01:27

TyndieRock

1,006
8
10

How to clean html from angular directives and helper comments?

3 Answers3

Linked