Delete a specific and generated random attribute from HTML string

Question

Would it be possible to change a string containing this line of HTML:

'<div _ngcontent-isd-c78="" pdroppable="formElements" class="panel" ng-reflect-scope="formElements" id="divPanelId" style="color: red">DivContent</div>'

To this:

'<div id="divPanelId" style="color: red">DivContent</div>'

I want to remove _ngcontent-??, pdroppable, class and ng-reflect-scope.

Is it possible using JavaScript with Regex?

Note: _ngcontent-isd-c78 is changed randomly. For example, _ngcontent-sfw-c53, _ngcontent-isw-c21. So _ngcontent-???? where ???? is a random value

Don't use a [regex to parse HTML](https://stackoverflow.com/a/1732454/519413). Also, the `_ng...` attributes are generally inserted by Angular, and are required for the framework to function. You can't remove them. — Rory McCrossan, Sep 23 '22 at 08:13
@RoryMcCrossan i already know that. I need html string of page with clean code. — Hasan Kaan TURAN, Sep 23 '22 at 08:25

mplungjan · Answer 1 · 2022-09-23T08:58:28.960

If you have DOM access use it.

NOTE: If you mess with Angular attributes you can break things

const div = document.getElementById("divPanelId");
const keep = ["style","id"]; 
div.getAttributeNames().forEach(attr => {
  if (keep.includes(attr)) return;
  console.log("removing",attr)
  div.removeAttribute(attr)
})  
console.log(div.outerHTML)

<div _ngcontent-isd-c78="" pdroppable="formElements" class="panel" ng-reflect-scope="formElements" id="divPanelId" style="color: red">DivContent</div>

Salim Baskoy · Accepted Answer · 2022-09-23T10:43:09.430

2

you can use regex

var text = `<div _ngcontent-isd-c78="" _ngcontent-isd-c80=""  _ngcontent-whd-c50="asdad" pdroppable="formElements" class="panel" ng-reflect-scope="formElements" id="divPanelId" style="color: red">DivContent</div>`;
        
            const one = /(.?)ngcontent(.*?)="(.*?)"/g;
            const two = /pdroppable(.*?)="(.*?)"/g;
            const three = /class="(.*?)"/g;
            const four = /ng-reflect-scope(.*?)="(.*?)"/g;
            text = text.replace(one, "").replace(two, "").replace(three, "").replace(four, "");
            console.log(text)

edited Sep 23 '22 at 10:43

answered Sep 23 '22 at 08:35

Salim Baskoy

591
5
11

_ngcontent-isd-c78 : this is not specific. it could be '_ngcontent-whd-c13', '_ngcontent-thw-c74' ...etc – Hasan Kaan TURAN Sep 23 '22 at 10:19
okey i edited. check again – Salim Baskoy Sep 23 '22 at 10:43

score 1 · Answer 3 · answered Sep 23 '22 at 08:35

Here is a way to bring the html string into the DOM world, remove the unwanted attributes, and then convert it back to a string.

const inputDivStr = '<div _ngcontent-isd-c78="" pdroppable="formElements" class="panel" ng-reflect-scope="formElements" id="divPanelId" style="color: red">DivContent</div>';

const parent = document.createElement('div');
parent.innerHTML = inputDivStr;
const divElem = parent.firstChild;
for (let attrName of divElem.getAttributeNames()) {
  if (shouldRemoveAttr(attrName)) {
    divElem.removeAttribute(attrName);
  }
}

const outputDivStr = parent.innerHTML;
console.log(outputDivStr);

function shouldRemoveAttr(attrName) {
  const regex = /_ngcontent-|pdroppable|class|ng-reflect-scope/;
  return attrName.match(regex);
}

Delete a specific and generated random attribute from HTML string

3 Answers3