Remove the spaces between the closing and opening tag in html with JavaScript

Question

I've tried all the solutions in Stackoverflow, but it doesn't really work.

---

Input 1: ' <ul> <li>Lorem Delor </li> </ul> '

Expected Output 1: '<ul><li>Lorem Delor</li></ul>'

---

Input 2: ' <ul> <li>Lorem <b>Ipsum</b> Delor </li> </ul> '

Expected Output 2: '<ul><li>Lorem <b>Ipsum</b> Delor</li></ul>'

Solutions in Stackoverflow: '<ul><li>Lorem<b>Ipsum</b>Delor</li></ul>'

---

Input 3:

   Stack

    overflow 

Expected Output 3:

   Stack

    overflow 

---

Many regex solutions ignore inline elements. That's why the words on the page become unified (Input 2). I wonder if there really is a clear solution to this.

Important: This should only affect the html input, not the plain text. (Input 3)

Answer 1

You can use these two regular expressions which removes end of lines and spaces.

 const input = ` <ul> <li>Lorem Delor </li> <li>Lorem Delor </li> </ul> `; const output = input // remove eols between tags.replace(/\>[\r\n ]+\</g, "><") // remove spaces between tags.replace(/(<.*?>)|\s+/g, (m, $1) => $1 || ' ').trim(); console.log(output);

In your question example you want to remove every space before end of tag but I find it unwanted. That space can be placed intentionally (it can be inline element and you might want to keep that space). So the second regular leaves one space before end tag if there was one or more spaces before. If you really want to remove all spaces (you shouldn't) just replace ' ' with '' .

Regex source

Answer 2

use regex /\s+/gim to remove multiple spaces.

txt.replace(/\s+/gim, ' ')

use regex />\s+</gim to remove spaces between > < .

txt.replace(/>\s+</gim, '><')

Code:

var input1 = '   <ul>   <li>Lorem Delor  </li>  </ul>  ';
var input2 = `   <ul>   <li>Lorem <b>Ipsum</b> Delor  </li>  </ul>  `;

console.log(input1.replace(/\s+/gim, ' ').trim().replace(/>\s+</gim, '><'));
console.log(input2.replace(/\s+/gim, ' ').trim().replace(/>\s+</gim, '><'));

Output:

'<ul><li>Lorem Delor </li></ul>'
'<ul><li>Lorem <b>Ipsum</b> Delor </li></ul>'