2

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, " ");
odedbd
  • 2,285
  • 3
  • 25
  • 33
  • 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 Sep 22 '14 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 Sep 22 '14 at 10:28
  • did you find a way to this ? – Suhas_United Jul 24 '15 at 12:28
  • .replace(/ng-.+?=".*?"/g, '') this is not working... my ngrepeats are not completely replaced ... ="cat in cats" this part is left behind – Suhas_United Jul 27 '15 at 08:12

3 Answers3

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, '')
una
  • 21
  • 1
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-")
Community
  • 1
  • 1
artm
  • 8,554
  • 3
  • 26
  • 43
  • Thanks for the suggestion. I would still have to deal with ng generated classes and comment tags. – odedbd Sep 22 '14 at 12:01
  • Are you looking for an angular way of removing them? $(...).angular.removeAttr(); ? – artm Sep 22 '14 at 12:02
  • Thanks, but I must be missing something. I mean that angular generates comments, such as "", which I need to clean up as well – odedbd Sep 22 '14 at 12:48
  • Ah, ok, didn't think about those. Not sure what you can do about them but like Cerbrus said don't use regex http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags – artm Sep 22 '14 at 12:52
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!

anstak
  • 89
  • 3
  • 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 – odedbd Feb 04 '16 at 11:56