1

I have a need to strip out whitespace markup from a string of HTML. By "markup" I mean any empty HTML elements that contain entities or characters that would render as whitespace in a web browser. For example

<p>&nbsp;&zwnj;</p>Test <div>  </div><br/><span> okay </span>

...should become

Test <span> okay </span>

The point is to remove elements from the DOM that would not be visible or would only add extra line breaks.

This would solve a problem I encounter supporting an online editor where users cut-n-paste content from Word. Sometimes the clipboard grabs incomplete elements. For example, a closing p tag. When pasted into the editor, the incomplete element is healed with the insertion of the opening p tag. This is when I have the opportunity to apply regular expressions and DOM manipulation to clean up these surprisingly very problematic elements. Jquery is the only library I have available to leverage.

2
  • If down voters would have the decency to comment I would appreciate that.
    – i3ensays
    Mar 7, 2018 at 22:01
  • 1
    try /<.+?>(&nbsp;|\s)+<\/.+?>|<br\/>/g (edited)
    – vityavv
    Mar 7, 2018 at 22:02

3 Answers 3

2

/<.+?>(&nbsp;|&zwnj;|\s)+<\/.+?>|<br\/>/g does the trick for me:

let str = '<p>&nbsp;&zwnj;</p>Test <div>  </div><br/><span> okay </span>';
let regex = /<.+?>(&nbsp;|&zwnj;|\s)+<\/.+?>|<br\/>/g;

console.log(str.replace(regex, ""));

2
  • This is pretty good, it works for my trivial example, but I didn't enumerate all possibilities. I'll try to edit my question.
    – i3ensays
    Mar 7, 2018 at 22:12
  • Just saw your edit (because I don't get notifications for edits) and made an edit in return.
    – vityavv
    Mar 7, 2018 at 22:31
1

Just to give you an idea: loop through all the elements in the DOM and see if their innerHtml or innerText is white space something like this:

var all = document.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++) {
    if(all[i].innerHTML == "" || all[i].innerText == ""){           
        all[i].parentElement.removeChild(all[i]);
    };
}
1
  • 1
    I've tried something close to this. One draw back is performance. Since the user is actively participating in the cut-n-paste operation any delay is very obvious. For large operations, the users may have already begun typing before the iteration has completed.
    – i3ensays
    Mar 7, 2018 at 22:28
1

Here's a recursive solution that should remove all empty tags in the body.

var body = document.getElementsByTagName('body')[0];

function removeEmptyChildren(node){
  let children = node.children;
  for(var i = 0; i < children.length; i++){
    if(children[i].children){
      removeEmptyChildren(children[i]);
    }
    if(!children[i].textContent.trim().length){
      node.removeChild(children[i]);
      i--;
    }
  }
}

removeEmptyChildren(body);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.