JSFiddle - React, Tailwind, and code Playground

by Alphonsio

HTML

<h2>Input</h2>

<pre id='input'>#Regex for images and links

## Links

[example 1](https://example.com)
This [link](https://example2.com) is inline

## Images

![Mon image](https://image.com)
![Non secure http](http://image.com)
[![Nested image and link](http://nested-image.com)](http://link.com)
</pre>
<h2>Output</h2>
<div id="output">
  
</div>

JavaScript

const markdown = document.getElementById('input').textContent;

const regex = /(?=\[(!\[.+?\]\(.+?\)|.+?)]\(((http|https):\/\/[^\)]+)\))/gi;

let links = [...markdown.matchAll(regex)];
console.log (links)
document.getElementById('output').innerHTML = JSON.stringify(links).replaceAll('],[', '],<br>[')