¿Sería posible cambiar una cadena que contenga esta línea de HTML:
'<div _ngcontent-isd-c78="" pdroppable="formElements" class="panel" ng-reflect-scope="formElements" id="divPanelId" style="color: red">DivContent</div>'
A esto:
'<div id="divPanelId" style="color: red">DivContent</div>'
Quiero eliminar _ngcontent-?? , pdroppable , class y ng-reflect-scope .
¿Es posible usar JavaScript con Regex?
Nota: _ngcontent-isd-c78 se cambia aleatoriamente. Por ejemplo, _ngcontent-sfw-c53 , _ngcontent-isw-c21 . Así que _ngcontent-???? donde ???? es un valor aleatorio
Si tiene acceso DOM, úselo.
NOTA: si te metes con los atributos angulares, puedes romper cosas
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>
puedes usar expresiones regulares
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)
Aquí hay una forma de traer la cadena html al mundo DOM, eliminar los atributos no deseados y luego volver a convertirla en una cadena.
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);
}