Convert markdown image to html image

Sometimes I want to add some specific style element to an image in a blogpost. Actually I want to add a class-attribute to it. So I have to rewrite ![]() into <img src="" alt="" class=""/> for everytime I want to have an image appear in a special way. I was thinking about a regular expression to automate this and put it with javascript in a html-page I can load.

When I was coding, I thought of asking an AI agent for this. The result is ok, I can use it.

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown → HTML afbeeldingen</title>
<style>
  body {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
    color: #222;
  }
  h1 { font-size: 1.4rem; }
  label { font-weight: 600; display: block; margin: 1rem 0 .3rem; }
  textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    font-family: ui-monospace, monospace;
    font-size: 0.9rem;
    padding: .6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
  }
  .resultaat {
    white-space: pre-wrap;
    word-break: break-all;
    font-family: ui-monospace, monospace;
    font-size: 0.9rem;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: .6rem;
    min-height: 60px;
  }
  .preview img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin-top: .5rem;
  }
  .knoppen { margin-top: .5rem; }
  button {
    padding: .4rem .9rem;
    border: 1px solid #999;
    border-radius: 6px;
    background: #eee;
    cursor: pointer;
  }
  button:hover { background: #ddd; }
</style>
</head>
<body>
  <h1>Markdown-afbeeldingen naar HTML converteren</h1>

  <label for="invoer">Markdown-invoer</label>
  <textarea id="invoer" placeholder="Plak hier je markdown, bijv. ![Man rennend van VS naar EU](https://i.snap.as/BRigJDHX.png)">![Man rennend van VS naar EU](https://i.snap.as/BRigJDHX.png)</textarea>

  <div class="knoppen">
    <label for="classInvoer">Class-attribuut:</label>
    <input type="text" id="classInvoer" value="img_main" size="20">
  </div>

  <label for="uitvoer">HTML-uitvoer</label>
  <div class="resultaat" id="uitvoer"></div>

  <div class="knoppen">
    <button id="kopieer">Kopieer HTML</button>
  </div>

  <label>Voorbeeldweergave</label>
  <div class="preview" id="preview"></div>

<script>
  const invoer    = document.getElementById('invoer');
  const uitvoer   = document.getElementById('uitvoer');
  const preview   = document.getElementById('preview');
  const classInvoer = document.getElementById('classInvoer');

  function converteer() {
    const cls = classInvoer.value.trim() || 'img_main';
    return invoer.value.replace(
      /!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g,
      (_m, alt, src) => `<img src="${src}" alt="${alt}" class="${cls}"/>`
    );
  }

  function update() {
    const html = converteer();
    uitvoer.textContent = html || '(geen afbeeldingen gevonden)';
    preview.innerHTML = html;
  }

  invoer.addEventListener('input', update);
  classInvoer.addEventListener('input', update);

  document.getElementById('kopieer').addEventListener('click', async () => {
    const html = converteer();
    if (html) {
      await navigator.clipboard.writeText(html);
      alert('HTML gekopieerd naar klembord!');
    }
  });

  update();
</script>
</body>
</html>