How to remove empty tags in rich text? (Redactor or Twig)

Question

What is the preferred method to remove an empty tag from the content of a rich text element?

Example result:

<p>
  Lorem<a href="…"></a> ipsum
</p>

When editing text in the WYSIWYG editor (Redactor) the result can contain empty anchor tags. This is a problem when navigating the page with the tab key, for instance, because the user can not see the focus anymore.

How can I automatically remove those artefacts?

Answer 1

I ended up using this solution:

Filter empty tags in Craft/Twig template

{{ entry.houseDescription|replace('/<[^\\/>][^>]*><\\/[^>]+>/', '')|raw }}

1. The replace filter /<[^\\/>][^>]*><\\/[^>]+>/ searches for empty tags and removes them.
2. The raw filter stops Twig from escaping HTML tags.

Regular expression test (RegExr)

Answer 2

I don't think you can - by hand is the only way I've found!