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. Also, the _ng... attributes are generally inserted by Angular, and are required for the framework to function. You can't remove them. — Rory McCrossan
– Rory McCrossan, Commented Sep 23, 2022 at 8:13
@RoryMcCrossan i already know that. I need html string of page with clean code. — Hasan Kaan TURAN
– Hasan Kaan TURAN, Commented Sep 23, 2022 at 8:25

mplungjan · Accepted Answer · 2022-09-23 08:58:28Z

3

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>

edited Sep 23, 2022 at 8:58

answered Sep 23, 2022 at 8:23

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

Comments

Salim Baskoy · Accepted Answer · 2022-09-23 10:43:09Z

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, 2022 at 10:43

answered Sep 23, 2022 at 8:35

Salim Baskoy

7237 silver badges15 bronze badges

2 Comments

Hasan Kaan TURAN Over a year ago

_ngcontent-isd-c78 : this is not specific. it could be '_ngcontent-whd-c13', '_ngcontent-thw-c74' ...etc

Salim Baskoy Over a year ago

okey i edited. check again

Rocky Sims · Accepted Answer · 2022-09-23 08:35:55Z

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);
}

Collectives™ on Stack Overflow

Delete a specific and generated random attribute from HTML string

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related