Breaks complex, nested HTML mailto link structures

Problem/Motivation

Steps to reproduce

Enable the obfuscate text filter
Use a more complex structure like this in the text:

  <a class="item icon-combo icon-combo--linked align-middle icon-combo--ico-position-left" href="mailto:info@example.com" target="_blank">
    <i class="icon-combo__icon ico ico-mail ico--lg bg-white text-black ico--circled ico--center" aria-hidden="true"></i>
    <div class="icon-combo__text-wrapper">
      <div class="icon-combo__text">info@example.com</div>
    </div>
  </a>

Expected output would be to have the same display result like without the filter enabled.
Actual result is broken HTML like this:

<a class="item icon-combo icon-combo--linked align-middle icon-combo--ico-position-left" href="mailto:&#10;&lt;span class=" boshfpngr="">
  </a><a href="mailto:inf%6f@example%6b%73.com" rel="nofollow">info@example.com</a>

" target="_blank"&gt;
    <i class="icon-combo__icon ico ico-mail ico--lg bg-white text-black ico--circled ico--center" aria-hidden="true"></i>
    <div class="icon-combo__text-wrapper">
      <div class="icon-combo__text">
<span class="boshfpngr">
  <a href="mailto:%69nf%6f@example.com" rel="nofollow">info@example.com</a>
</span>
</div>
    </div>
  
</div>

This makes the module unusable for more complex cases, which aren't untypical.

Proposed resolution

Find a better, more solid logic for obfuscating email addresses and ensure there's neither double-obfuscation nor breaking HTML structures.

Remaining tasks

User interface changes

API changes

Data model changes