如何从 HTML 中删除 angularjs 属性和类？答案

【问题标题】：How to remove angularjs attributes and classes from HTML?如何从 HTML 中删除 angularjs 属性和类？
【发布时间】：2014-09-22 10:19:45
【问题描述】：

我有一个简单的 AngularJS 应用程序，它使用 ng-bind 和 ng-repeat 从模板呈现包含一些嵌套元素的父元素。我想获取生成的元素（作为字符串）的 HTML（innerHtml），以便在不同的应用程序中使用（在 AngularJS 的上下文之外，它将用作静态 HTML）。

使用jQuery('#parent-element').html() 很容易做到这一点。这种方法的问题在于 HTML 字符串包含 Angular 属性（例如 ng-bind）以及 Angular 生成的 cmets（来自 ng-repeat）和类（例如 ng-scope）。

我可能会想出一些正则表达式来直接从字符串中清除所有这些，但我很想知道是否有更简洁的方法来做到这一点。

那么，是否有更“Angular”的方式来防止生成属性/类/cmets 或提取生成元素的源 HTML 的干净版本？

更新： 对于@suhas-united 和其他可能觉得这很有用的人，我最终使用了以下内容，这对于我的用例来说已经足够好了-

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, " ");

【问题讨论】：

首先，您不使用正则表达式解析 HTML。尤其是在 JavaScript 中。这是必须自动完成的事情吗？既然您正在构建一个新项目，为什么不自己复制 HTML 并删除 Angular 代码？
感谢您的评论。我不确定我是否理解您在解析 HTML 时的评论。这必须自动完成。这不是一次转换
你找到解决办法了吗？
.replace(/ng-.+?=".*?"/g, '') 这不起作用...我的 ngrepeats 没有完全替换... ="cat in cats " 这部分被留下了

标签： javascript jquery html angularjs

【解决方案1】：

需要清除 attrs 值，然后清除很容易

 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, '')

【讨论】：

【解决方案2】：

如果你没有非常多的 ng- 属性，你可以试试这样：

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

如果你有很多，见Get all Attributes from a HTML element with Javascript/jQuery，你可以添加一个方法

div.removeAllAttr("ng-")

【讨论】：

感谢您的建议。我仍然需要处理 ng 生成的类和注释标签。
您是否正在寻找一种有角度的方式来移除它们？ $(...).angular.removeAttr(); ?
谢谢，但我一定错过了什么。我的意思是angular会生成cmets，比如“”，我也需要清理一下
啊，好吧，没想到这些。不知道你能对它们做什么，但就像 Cerbrus 说的不要使用正则表达式 stackoverflow.com/questions/1732348/…

【解决方案3】：

我找到了一个灵魂：

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

它清除所有“ng-”指令和“ng-”类！

【讨论】：

谢谢，这几乎可行。问题是它会杀死有效的类，比如 foo-ng-bar 不是由 angular 设置的，不应该被删除。我猜需要调整正则表达式以说明 ng- 不在单词中间