Javascript - Strip certain strings from ".innerHTML" result

javascript substring
javascript replace
javascript remove specific character from string
javascript remove part of string
javascript slice string
javascript replace special characters
javascript remove character from string at index
remove first character from string javascript

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)

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,""));

JavaScript String replace() Method, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Given a string and the task is to remove a character from the given string. Method 1: Using replace() method: The replace method is used to replace a specific character/string with other character/string. It takes two parameters, first is the string to be replaced and the second is the string which is to be replaced with.

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 "

How to remove a character from string in JavaScript ?, Method 1: Using replace() method: The replace method is used to replace a specific character/string with other character/string. It takes two parameters, first is   The replace() method searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced. Note: If you are replacing a value (and not a regular expression), only the first instance of the value will be replaced. To replace all occurrences of a specified value, use the global (g) modifier (see "More Examples" below).

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.

How to remove text from a string in JavaScript?, This method takes two parameters, one is the starting index and the other is the length of the string to be selected from that index. By specifying the required length  You have to write you own remove. You can loop over the array, grab the index of the item you want to remove, and use splice to remove it. Alternatively, you can create a new array, loop over the current array, and if the current object doesn't match what you want to remove, put it in a new array.

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>

How to remove text from a string in JavaScript?, You can remove text from a string in Javascript using 2 methods, substring and replace.SubstringJS string class provides a substring method  Definition and Usage The trim () method removes whitespace from both sides of a string. Note: The trim () method does not change the original string.

Trimming Strings in JavaScript, The following examples show how you can delete a given set of characters from the beginning of the string. The first example trims the lowercase  Splitting Strings. JavaScript has a very useful method for splitting a string by a character and creating a new array out of the sections. We will use the split () method to separate the array by a whitespace character, represented by " ".

String.prototype.replace(), The replace() method returns a new string with some or all matches of a pattern replaced by a replacement . The pattern can be a string or a  split () splits a string into an array of strings using a specified separator string. pop () removes the last element from an array and returns that element.

String.prototype.trim(), The trim() method removes whitespace from both ends of a string. Whitespace in this context is all the whitespace characters (space, tab,  But with JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties. String Length The length property returns the length of a string:

Comments
  • That's amazing. Once last thing, if it isn't too much trouble at all, how would I include <!--bindings={ "ng-reflect-ng-if": "true" }--> in that replacement?
  • You can add |<!--.*?--> before the /g
  • Everything works about from the exclusion of the <!--bindings syntax. This is magic by the way.
  • Hi, @Mamun. Neat usage of [...element.children], didn't know this technique until now (Spread Operator). It's an ES6 feature and cross-browser support would be a problem, wouldn't it?
  • @FlavioCysne, using [].slice.call() will solve the cross-browser issue....updated the answer......thanks.