Question

我正在将SVG转换为PNG，我需要删除SVG中的angularjs属性。

<rect fill="#F9B24F" ry="5" rx="5" ng-attr-y="{{node.rectY}}" ng-attr-x="{{node.rectX}}" 
  ng-attr-height="{{chart.height}}" ng-attr-width="{{chart.width}}" y="10" x="20"    
height="80" width="160">

我需要输出

<rect fill="#F9B24F" ry="5" rx="5"  y="10" x="20"    
height="80" width="160">

我正在尝试使用javascript中的String Replace方法替换。我在控制台中尝试了以下内容，但它无法正常工作

"ng-repeat='{{dddddsd}}' dfjdzjfhjk".replace(/ng-*\s/g," ");

Answer 1

如果您可以依赖Angular属性始终采用ng-xyz="..."格式，您可以这样做：

str = str.replace(/\bng-[^\s]+="[^"]*"/g, '');

如果某些内容是单引号，您可以跟进第二个replace：

str = str.replace(/\bng-[^\s]+='[^']*'/g, '');

显然这是一个很大的“如果”，但如果你想用正则表达式操纵类似SGML的标记，那就是你必须拥有的“if”，fundamentally you can't really do。

示例：

var str = '<rect fill="#F9B24F" ry="5" rx="5" ng-attr-y="{{node.rectY}}" ng-attr-x="{{node.rectX}}" ng-attr-height="{{chart.height}}" ng-attr-width="{{chart.width}}" y="10" x="20"    height="80" width="160">';
display("Before: " + str);
str = str.replace(/\bng-[^\s]+="[^"]*"/g, '');
display("After: " + str);

function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg).replace(/&/g, "&amp;").replace(/</g, "&lt;");
    document.body.appendChild(p);
}

Answer 2

不要使用正则表达式来解析DOM。（详细解答为什么在这里：RegEx match open tags except XHTML self-contained tags）

只需遍历DOM并删除您不想要的任何属性。

var svg = $('#mySvg').clone(); //see http://api.jquery.com/clone/
var allNodes = svg.find('*');

allNodes.each( function(i,node) {
    //Here you can extract any attribute starting with ng- but not all angular directives
    //start with ng-*
    node.removeAttribute('ng-repeat');
} );

根据Javascript中的模式替换单词

2 个答案: