How to use regularity to remove spaces between tags and tags in html

To remove extra spaces between HTML tags using regular expressions, several situations need to be considered:

Compress multiple spaces into one space:This can be used\s+Match one or more space characters and replace them with a single space.
Line breaks between tags:Line breaks should also be taken into account and can be used\s+To match because it contains line breaks.
Avoid removal<pre>Spaces in the tag:<pre>Spaces and line breaks inside the tag make sense and should not be removed. We need to rule out this.
Spaces in the tag:Although the question requires that it is between labels, the spaces in the labels sometimes need to be processed.

The following provide several JavaScript regular expression solutions and explain their pros and cons:

Method 1: Simple replacement (not recommended)

htmlString = (/>\s+</g, '><');

This method is the simplest, just replace it>and<spaces between. But, itUnable to handle<pre>Label,andIf there are no spaces between labels, it will not add spaces, which can cause layout problems.

Method 2: More comprehensive replacement (recommended)

function removeSpacesBetweenTags(htmlString) {
  return (/(&lt;pre.*?&gt;[\s\S]*?&lt;\/pre&gt;)|(?:&gt;)\s+(?=&lt;)/g, function(match, preBlock) {
    if (preBlock) {
      return preBlock; // Keep the contents of the <pre> block    } else {
      return '&gt;'; // Replace multiple spaces between other labels with a single space (actually removes spaces and adds > symbols when replacing, achieving compact arrangement)    }
  });
}
let html = "&lt;div&gt;  hello  &lt;/div&gt;&lt;pre&gt;  code  &lt;/pre&gt;&lt;p&gt; world &lt;/p&gt;";
let result = removeSpacesBetweenTags(html);
(result); // Output: &lt;div&gt;hello&lt;/div&gt;&lt;pre&gt;  code  &lt;/pre&gt;&lt;p&gt;world&lt;/p&gt;

This method uses capture group and callback functions.

(<pre.*?>[\s\S]*?<\/pre>)Match<pre>Tags and their contents and capture them to the first capture grouppreBlockmiddle.
(?:>)\s+(?=<)Match>One or more spaces afterwards, but not including>In the capture group.(?=<)is a positive assertion, ensuring that the matching space is followed by a<。
Callback function checkpreBlockWhether it exists. If it exists, returnpreBlock,reserve<pre>The content of the block. Otherwise, return>, effectively remove spaces between labels.

Method 3: More refined control of the number of spaces (recommended)

function removeSpacesBetweenTags(htmlString, replacement = "") {
  return (/(&lt;pre.*?&gt;[\s\S]*?&lt;\/pre&gt;)|(?:&gt;)\s+(?=&lt;)/g, function(match, preBlock) {
    if (preBlock) {
      return preBlock; // Keep the contents of the <pre> block    } else {
      return `&gt;${replacement}`; // Use replacement to replace spaces between tags    }
  });
}
let html = "&lt;div&gt;  hello  &lt;/div&gt;&lt;pre&gt;  code  &lt;/pre&gt;&lt;p&gt; world &lt;/p&gt;";
let result = removeSpacesBetweenTags(html, " "); // Keep a space(result); // Output: <div> hello </div><pre> code </pre><p> world </p>let result2 = removeSpacesBetweenTags(html); // No spaces are left(result2); // Output: &lt;div&gt;hello&lt;/div&gt;&lt;pre&gt;  code  &lt;/pre&gt;&lt;p&gt;world&lt;/p&gt;

This method is added to the second methodreplacementParameters can more finely control the number of spaces retained between labels.

Which method to choose depends on your specific needs. If it needs to be handled<pre>Tags, method two or three are better choices. Method Three provides more flexible controls that allow you to specify replaced strings, such as single spaces or other characters.

Hope this information helps you!

This is the article about using regular rules to remove the spaces between tags and tags in html. For more related rules to remove tags in html, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!