title: Clean email HTML body with too many tags
body: <p>I would like to clean a lot of mails'HTML body which are a bit dirty (taken from Gmail-sent emails): there are lots of nested <code>&lt;div&gt;</code>, unwanted changes of fonts, etc.
  <strong>I would like to clean this and keep only <code>&lt;a&gt;</code>, <code>&lt;b&gt;</code>, <code>&lt;br&gt;</code>, <code>&lt;i&gt;</code>, <code>&lt;img&gt;</code>, and nothing else</strong> (and maybe also <code>&lt;p&gt;</code> or a few <code>&lt;div&gt;</code> if and only if it's really necessary).</p>
  
  <p>With the <a href="https://stackoverflow.com/a/46467770/1422096">regex</a> <code>/&lt;\/?(?!(a|br|b|img)\b)\w+[^&gt;]*&gt;/g</code>, it works most of the time:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.onclick = function() {
      document.body.innerHTML = document.body.innerHTML.replace(/&lt;\/?(?!(a|br|b|img)\b)\w+[^&gt;]*&gt;/g, '');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div dir="ltr"&gt;&lt;div class="gmail_quote"&gt;&lt;div dir="ltr"&gt;Hello,&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div style="font-size:12.8px"&gt;&lt;span style="font-size:12.8px"&gt;Thank you for your message.&lt;/span&gt;&lt;br&gt;&lt;/div&gt;&lt;div style="font-size:12.8px"&gt;&lt;br&gt;&lt;/div&gt;&lt;div style="font-size:12.8px"&gt;&lt;span style="font-size:12.8px"&gt;If the L&lt;span class="m_-527331299899979m_70391001927gmail-il"&gt;orem&lt;/span&gt;i&lt;/span&gt;&lt;span class="m_-527331299899979m_703910001927gmail-m_2466414472930393055gmail-il" style="font-size:12.8px"&gt;psum&lt;/span&gt;&lt;span style="font-size:12.8px"&gt; bla bla &lt;/span&gt;&lt;a href="http://example.com" style="font-size:12.8px" target="_blank"&gt;test&lt;/a&gt;&lt;span style="font-size:12.8px"&gt; window, then it will be like this.&lt;/span&gt;&lt;br&gt;&lt;/div&gt;&lt;div style="font-size:12.8px"&gt;Blah blah.&lt;/div&gt;&lt;div style="font-size:12.8px"&gt;&lt;br&gt;&lt;/div&gt;&lt;div style="font-size:12.8px"&gt;Lorem ipsum&lt;span style="font-size:12.8px"&gt;lorem ipsum &lt;/span&gt;&lt;span style="font-size:12.8px"&gt;blah blah and&lt;/span&gt;&lt;span style="font-size:12.8px"&gt; you can &lt;/span&gt;&lt;span style="font-size:12.8px"&gt;also &lt;i&gt;blah blah&lt;/i&gt; and finally &lt;i&gt;Blah&lt;/i&gt;.&lt;/span&gt;&lt;/div&gt;&lt;div style="font-size:12.8px"&gt;&lt;span style="font-size:12.8px"&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style="font-size:12.8px"&gt;&lt;span style="font-size:12.8px"&gt;-----------&lt;/span&gt;&lt;/div&gt;&lt;div style="font-size:12.8px"&gt;&lt;span style="font-size:12.8px"&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style="font-size:12.8px"&gt;&lt;span style="font-size:12.8px"&gt;Examples:&lt;/span&gt;&lt;/div&gt;&lt;div style="font-size:12.8px"&gt;&lt;span style="font-size:12.8px"&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span style="font-size:12.8px"&gt;example: &lt;a href="http://example.com" target="_blank"&gt;test1&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-size:12.8px"&gt;example: &lt;a href="http://example.com" target="_blank"&gt;test2&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span style="font-size:12.8px"&gt;example: &lt;a href="http://example.com" target="_blank"&gt;test3&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-size:12.8px"&gt;example: &lt;a href="http://example.com" target="_blank"&gt;test4&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-size:12.8px"&gt;example: &lt;a href="http://example.com" target="_blank"&gt;test4&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-size:12.8px"&gt;example: &lt;a href="http://example.com" target="_blank"&gt;test5&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-size:12.8px"&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-size:12.8px"&gt;example: &lt;a href="http://example.com" target="_blank"&gt;example&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-size:12.8px"&gt;example: &lt;a href="http://example.com" target="_blank"&gt;ex&lt;wbr&gt;ample&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-size:12.8px"&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-size:12.8px"&gt;example: &lt;a href="http://example.com" target="_blank"&gt;example&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-size:12.8px"&gt;example: &lt;a href="http://example.com" target="_blank"&gt;exam&lt;wbr&gt;ple&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-size:12.8px"&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="gmail_extra" style="font-size:12.8px"&gt;&lt;div class="m_-52733129979m_703911927gmail-m_24664144055gmail_signature"&gt;&lt;div dir="ltr"&gt;&lt;div dir="ltr"&gt;&lt;div dir="ltr"&gt;&lt;div dir="ltr"&gt;&lt;div dir="ltr"&gt;&lt;span style="font-size:small"&gt;Sincerly,&lt;/span&gt;&lt;br&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div class="m_-52722719979m_7039100982345401927gmail_signature"&gt;&lt;div dir="ltr"&gt;&lt;div&gt;&lt;div dir="ltr"&gt;&lt;div&gt;&lt;div dir="ltr"&gt;&lt;div&gt;&lt;div dir="ltr"&gt;&lt;div&gt;&lt;div dir="ltr"&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;Myself&lt;br&gt;&lt;/div&gt;&lt;div dir="ltr"&gt;&lt;br&gt;&lt;b&gt;example&lt;/b&gt;&lt;br&gt;web: &lt;a href="http://www.example.com" target="_blank"&gt;www.example.com&lt;/a&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;fb: &lt;a href="http://www.facebook.com/example/" target="_blank"&gt;www.facebook.com/LoremIp&lt;wbr&gt;sum/&lt;/a&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;mail: &lt;a href="mailto:contact@example.com" target="_blank"&gt;contact@example.com&lt;/a&gt;&lt;br&gt;&lt;/div&gt;&lt;div dir="ltr"&gt;&lt;br&gt;&lt;img src="http://example.com/example.png"&gt;&lt;br&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;br&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>(Click anywhere in the email after having run the Code Snippet to see what happens <em>after</em> the regex is applied)</strong></p>
  
  <p>Indeed:</p>
  
  <ul>
  <li>unuseful tags <code>&lt;span&gt;</code> or <code>&lt;/span&gt;</code> are successfully removed </li>
  <li><code>&lt;div fontstyle="..."&gt;</code> and <code>&lt;/div&gt;</code> are removed</li>
  </ul>
  
  <p>But there is a remaining problem when removing <code>&lt;div&gt;</code> like this:</p>
  
  <ul>
  <li><p>Empty lines are removed (see empty line between line 1 and 3 of the mail output, between line 3 and 5, etc.)</p></li>
  <li><p>The newline is removed after each <code>example: test1</code> (see when you run Code Snippet)</p></li>
  </ul>
  
  <p>I tried to replace <code>&lt;div.*?&gt;&lt;br&gt;&lt;/div&gt;</code> by <code>&lt;br&gt;&lt;br&gt;</code> but it's still not correct.</p>
  
  <p><strong>Question: How to clean this HTML code, discard the unwanted font changes, etc., and keep the same empty lines, and keep <code>&lt;a&gt;</code>, <code>&lt;b&gt;</code>, <code>&lt;br&gt;</code>, <code>&lt;i&gt;</code>, <code>&lt;img&gt;</code> tags?</strong></p>
  
  <p>Note: it has to finally run in a Google Apps Script, so I'm not sure it's possible to import third-party JS libraries...</p>