How to remove angularjs attributes and classes from HTML?

Question

I have a simple AngularJS app that renders a parent element containing some nested elements from a template using ng-bind and ng-repeat. I would like to grab the HTML (innerHtml) of the generated element (as a string) for usage in a different application (where it is to be used as static HTML, outside the context of AngularJS).

This is easy enough to do by using jQuery('#parent-element').html(). The problem with this approach is that the HTML string contains Angular attributes (for example ng-bind) as well as Angular generated comments (from ng-repeat) and classes (such as ng-scope).

I can probably come up with some regular expression to clean up all of these from the string directly, but I would love to know if there is a cleaner way to do this.

So, is there a more "Angular" way to either prevent the attributes/classes/comments from being generated or to extract a clean version of the source HTML of the generated elements?

UPDATE: For @suhas-united and others who might find this useful, I ended up using the following which works well enough for my use case-

var cleaner = angular.element('#dirtier')
            .html()
            .replace(/<!--[^>]*-->/gi, '')
            .replace(/\n/g, '')
            .replace(/ng-.+?\b/g, '')
            .replace(/ng-.+?=".*?"/g, '')
            .replace(/class=""/g, '')
            .replace(/\"/g, "\\\"")
            .replace(/\s+/g, " ");

First of all, you don't parse HTML with regexes. Especially not in JavaScript. Is this something that has to be done automatically? Since you're building a new project, why not copy the HTML and just remove the angular code, yourself? — Cerbrus
– Cerbrus, Commented Sep 22, 2014 at 10:22
Thanks for the comment. I'm not sure I understand your comment re parsing the HTML. This has to be done automatically. It's not a single time conversion — odedbd
– odedbd, Commented Sep 22, 2014 at 10:28
.replace(/ng-.+?=".*?"/g, '') this is not working... my ngrepeats are not completely replaced ... ="cat in cats" this part is left behind — Suhas_United
– Suhas_United, Commented Jul 27, 2015 at 8:12

una · Accepted Answer · 2015-11-06 11:45:12Z

1

need to clear attrs value and then clearing be easy

 var x = String(a)
    /*replace comments*/    .replace(/<!--(.*?)-->/gm, "")
    /*replace value of attrs*/    .replace(/="(.*?)"/gm, "")
    /*replace html markup */ .replace( /<[\s\S]*?>/g, "")
    /*replace whitespaces */  .replace(/\s/g, '')

answered Nov 6, 2015 at 11:45

una

211 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:19:29Z

0

If you don't have a very large number of ng- attributes, you could try something like this:

var div = $("#mydiv");
div.removeAttr("ng-repeat").removeAttr("ng-bind")....

If you have a large number of them, see Get all Attributes from a HTML element with Javascript/jQuery and you could add a method

div.removeAllAttr("ng-")

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Sep 22, 2014 at 10:38

artm

8,5943 gold badges28 silver badges43 bronze badges

4 Comments

odedbd Over a year ago

Thanks for the suggestion. I would still have to deal with ng generated classes and comment tags.

artm Over a year ago

Are you looking for an angular way of removing them? $(...).angular.removeAttr(); ?

odedbd Over a year ago

Thanks, but I must be missing something. I mean that angular generates comments, such as "", which I need to clean up as well

artm Over a year ago

Ah, ok, didn't think about those. Not sure what you can do about them but like Cerbrus said don't use regex stackoverflow.com/questions/1732348/…

anstak · Accepted Answer · 2016-02-04 09:30:32Z

0

I found a soultion:

    var x = angular.element('#id').html()
        .replace(/(ng-\w+-\w+="(.|\n)*?"|ng-\w+="(.|\n)*?"|ng-(\w+-\w+)|ng-(\w+))/g, '')
        .replace(/<!--(.*?)-->/gm, "")

It clears any "ng-" directives and "ng-" classes!

answered Feb 4, 2016 at 9:30

anstak

1073 bronze badges

1 Comment

odedbd Over a year ago

Thanks, this almost works. Problem is that it kills valid classes such foo-ng-bar which are not set by angular and should not be removed. I guess the regex needs to be adjusted to account for the ng- not being in the middle of a word

Collectives™ on Stack Overflow

How to remove angularjs attributes and classes from HTML?

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related