Remove div which has no content or only has white space using regex

Question

My HTML contains divs some of it dont have any content and some contains only white space. I want to remove those divs with regular expression.

I written code but it seems not right. fiddle

var patt= new RegExp("<div></div>");
document.querySelector('.wrapper').innerHTML.replace(patt,'')

[*Do not do this*](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454). <:o — RobG, Aug 17 '15 at 04:51

Arun P Johny · Answer 1 · 2015-08-17T04:52:05.660

3

Use dom manipulation instead of regex to modify html content

var els = document.querySelectorAll('.wrapper div'),
  el;
for (var i = 0; i < els.length; i++) {
  el = els[i];
  if ((el.textContent || el.innerText).trim() == '') {
    el.parentNode.removeChild(el)
  }
}

div:not(.wrapper) {
  background-color: #ff0000;
  padding: 10px;
  margin: 5px
}

<div class="wrapper">
  <div>text</div>
  <div></div>
  <div>text</div>
  <div>text</div>
  <div><span></span>
  </div>
  <div>
  </div>
</div>

edited Aug 17 '15 at 04:52

answered Aug 17 '15 at 04:40

Arun P Johny

384,651
66
527
531

Hi Arun your code looks good but I want to get this done by using regex – Jitender Aug 17 '15 at 04:41
@amit—you can't reliably parse HTML with a regular expression because HTML is not a regular language. – RobG Aug 17 '15 at 04:55
ok understood but without using HTML tag how to get this done – Jitender Aug 17 '15 at 04:56

score 1 · Accepted Answer · answered Aug 17 '15 at 13:57

String.replace() does not change the original string.
You should use the "g" flag to remove all empty divs and not only the first occurrence.

var patt = new RegExp("<div>\\s*</div>", "g");
var wrapperDiv = document.querySelector('.wrapper');
wrapperDiv.innerHTML = wrapperDiv.innerHTML.replace(patt, '')

Avinash Raj · Answer 3 · 2015-08-17T04:55:11.217

0

Add \\s*, inbetween those tags.. \\s* matches zero or more white-spaces(vertical aswell as horizontal white-space).

var patt= new RegExp("<div>\\s*</div>", "g");

var s = '<div class="wrapper">\n    <div>text</div>\n    <div></div>\n    <div>text</div>\n    <div>text</div>\n    <div></div>\n</div>'
alert(s.replace(/<div>\s*<\/div>/g, ''))

or

var s = '<div class="wrapper">\n    <div>text</div>\n    <div></div>\n    <div>text</div>\n    <div>text</div>\n    <div></div>\n</div>'
alert(s.replace(/\s*<div>\s*<\/div>/g, ''))

edited Aug 17 '15 at 04:55

answered Aug 17 '15 at 04:38

Avinash Raj

172,303
28
230
274

Will this detect newlines in the content? – Tushar Aug 17 '15 at 04:39
@AvinashRaj: I tried your code but it is not working. http://jsfiddle.net/uy252zmt/2/ – Jitender Aug 17 '15 at 04:53

Remove div which has no content or only has white space using regex

3 Answers3