Geek Answers Handbook

Remove all spaces between tags using JavaScript

I am trying to remove the space between tags so that childNodes contain only those tags and not white space nodes. Here is my code:

<li> <label for="firstName" class="mainLabel">First Name : </label> <input type="text" name="firstName" id="firstName"/> <span>This must be filled</span> </li>

And here is the JS code:

 var parentHTML = firstName.parentNode.innerHTML; parentHTML = parentHTML.replace(/>\n</g,"><"); firstName.parentNode.innerHTML = parentHTML;

But when I warn parentHTML , I get the same old line.

+7
source share
5 answers

This (not, see after the rule), because the strings are immutable, I think, and you set the innerHTML of the parent element to the same string that you extracted from it earlier.

Instead, I suggest:

 var firstname = document.getElementsByTagName('input')[0], parentHTML = firstname.parentNode.innerHTML, newHTML = parentHTML.replace(/\>\s+\</g,''); firstname.parentNode.innerHTML = newHTML; console.log(parentHTML, newHTML, (parentHTML == newHTML));

JS Fiddle demo .

Regarding the comment from jfriend00 (below), it seems that the regex was a problem, then \n did not match the provided pattern, i.e. the following change satisfies the requirements:

 var firstname = document.getElementsByTagName('input')[0], parentHTML = firstName.parentNode.innerHTML; parentHTML = parentHTML.replace(/>\s+</g, "><"); firstName.parentNode.innerHTML = parentHTML; console.log(firstname, parentHTML);​

JS Fiddle demo .

Literature:

+15
source

spaces only:

 parentHTML = parentHTML.replace( new RegExp( "\>[ ]+\<" , "g" ) , "><" );

new line, tabs and spaces:

 parentHTML = parentHTML.replace( new RegExp( "\>[\s]+\<" , "g" ) , "><" );

https://regex101.com/r/sD7cT8/1

+10
source

In most cases, I recommend removing the space from:

  • Document start
  • End of document
  • After > character
  • Before the <

There are two cases where I can think where it will not do what you want, and these are the same two cases that affect the less aggressive decisions above.

  • The empty space between the inline-block elements is actually the intended or expected part of the layout. If this space is collapsed to null characters, the implicit space between elements is deleted. This can be avoided by replacing my regex below to replace it with " " .

  • My original answer has been updated to keep spaces in the <script> , <style> , <pre> or <textarea> tags. All but <pre> are CDATA, which means the content is not HTML and is parsed until a closing tag is found, which means the regex is a complete solution. If a <pre> nested or the CSS white-space property is used, this will not save your content.

Decision:

  collapsed = expanded.replace(/(<(pre|script|style|textarea)[^]+?<\/\2)|(^|>)\s+|\s+(?=<|$)/g, "$1$3");
+8
source

Is it possible to consider an html tag as a string in js? I think it can be done. try it!

 s.replace(/\s+/g, ' ');
+4
source

I came across this thread because I was looking for a solution to eliminate spaces around divs caused by spaces in the HTML source or linear feeds in my case.

Before I realized that a space could cause these spaces, I was going to go crazy trying to get rid of them. I want to keep the HTML source code for reading, so code compression is not a good solution for me. Even if I handled it this way, it does not commit the divs that are generated by Google and other providers.

I started by creating the following function and calling it on the onload body.

 function Compress_Html() { //Remove whitespace between html tags to prevent gaps between divs. document.body.innerHTML = document.body.innerHTML.replace( /(^|>)\s+|\s+(?=<|$)/g, "$1" ); }

This seemed to work just fine, but unfortunately it breaks the Google search box that I have in the footer.

After several attempts to modify the regular expression pattern, I found this regular expression tag http://www.regexpal.com/ . As far as I can tell, the following template does what I need.

 ( /(^|>)[ \n\t]+/g, ">" )

However, the function still violated the search box. So I moved it to the jQuery ready function. Now it works and does not break the search box.

 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $( document ).ready(function() { document.body.innerHTML = document.body.innerHTML.replace( /(^|>)[ \n\t]+/g, ">" ); }); </script>
0
source

More articles:


All Articles