Base64 img decoder

Paste base64 in multiple lines, and this will attempt to parse it as an image.

by David Iglesias

HTML

<h1>
  Base64 img decoder
</h1>

<label for="bytes">Paste base64:<br />
  <textarea id="bytes"></textarea>
</label>
<hr>

<p>
Output: 
</p>
<div>
  <img id="destination" />
</div>

CSS

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

JavaScript

// Regex that matches characters that don't belong in a base64 encoded string
let invalid = /[^A-Za-z0-9\+/]/g;

bytes.addEventListener('input', (_) => {
  let cleanValue = bytes.value.replaceAll(invalid, '');
  destination.src = 'data:image/*;base64,' + cleanValue;
});