CODEWITHSUNDEEP
javascriptinnerhtml
user8836786
user8836786

Reputation:

Javascript - Strip certain strings from ".innerHTML" result

I have a function that's run on a button click. This function will get all of the HTML inside a certain element. That works fine. However, I would like to clean the returned string (HTML) up before using it further in my function:

exportHTML(){
  const element = document.getElementById('content');
  const innerHTML = element.innerHTML;
}

This works. But due to using Angular, Angular syntax is included within the HTML based on conditions in the source code. For example:

<div _ngcontent-c1=""></div>

OR

<div ng-reflect-klass="panel album"></div>
<div ng-reflect-ng-class="blue"></div>

Is it at all possible to filter these types of values out? In regards to the second and third example above, the classes within those would change quite often:

  1. Is it possible to filter out and remove all _ngcontent-c1="" text
  2. Is it possible to filter out and remove all ng-reflect-klass & ng-reflect-ng-class including the following open and closed quotes (to remove what's inside)

Upvotes: 0

Views: 976

Answers (4)

Mamun
Mamun

Reputation: 68943

The following solution will remove all the attributes from element:

You can get all the children first. Then loop through them with forEach(). In each iteration, you can use while loop to removeAttribute() until they are exist in the element.

Try the following way:

function exportHTML(){
  const element = document.getElementById('content');
  const innerHTML = [].slice.call(element.children);
  innerHTML.forEach(function(el){
    while(el.attributes.length > 0)
      el.removeAttribute(el.attributes[0].name); 
  });
  console.log(document.getElementById('content').innerHTML); // output
}

exportHTML();
<div id="content">
  <div _ngcontent-c1=""></div>
  <div ng-reflect-klass="panel album"></div>
  <div ng-reflect-ng-class="blue" another-test></div>
  <span test="test-element"></span>
</div>

Upvotes: 0

Flavio Cysne
Flavio Cysne

Reputation: 1456

I created a JSFiddle as an example of how to do this without using jQuery.

Using the HTML code below as an example

<div id="origin-content">
  <div id="div1" _ngcontent-c1="">Content 1</div>
  <div id="div2" ng-reflect-klass="panel album">Content 2</div>
  <div id="div3" ng-reflect-ng-class="blue">Content 3</div>
</div>
<hr>
<div id="target-content">
</div>

I extracted all children from origin-content and copied them to target-content using the code that follows.

var result = document.getElementById('target-content');
var elems = document.querySelector('#origin-content').children;
var count = elems.length;

for (var i = 0; i < count; i++) {
  var val = elems[i];
  val.removeAttribute('_ngcontent-c1');
  val.removeAttribute('ng-reflect-klass');
  val.removeAttribute('ng-reflect-ng-class');
  result.innerHTML += val.outerHTML;
}

There is still plenty of room for improvement.

I hope it helps to solve the OP question.

Upvotes: 0

StefansArya
StefansArya

Reputation: 2888

You could do it with RegExp

const innerHTML = element.innerHTML.replace(/ (_ngcon|ng-).*?".*?"/g, '');
  1. (_ngcon|ng-) find _ngcon or ng- including space as first character
  2. .*?" match everything until first "
  3. .*?" and match everything again for the closing "

Upvotes: 1

Doug F
Doug F

Reputation: 884

OK, so the attributes would be constant but the values of the attributes would change? If so, you could try this:

.replace(/ng-reflect-klass=\".?\"/,"").replace(/ng-reflect-ng-class=\".?\"/,"").replace(/_ngcontent-c1=\".*?\"/,"")

var content = 'stuff<div ng-reflect-klass="panel album"></div><div ng-reflect-ng-class="blue"></div><div _ngcontent-c1=""></div>end stuff';

console.log(content.replace(/ng-reflect-klass=\".*?\"/g,"").replace(/ng-reflect-ng-class=\".*?\"/g,"").replace(/_ngcontent-c1=\".*?\"/g,""));

Look at the console to view the result.

Upvotes: 0

Related Questions