I'm trying to parse markdown-style content into HTML content.
e.g. [test](https://test.com) --> <a href="https://test.com">test</a>
To turn hyperlinks into anchor tags, I have this statement:
.replace(/\[([^\[]+)\](\(([^)]*))/gim, '<a href="$3">$1</a>');
Currently, this regex accepts [test](https://test.com) as an input, but it fails to match the entire string — it only recognizes [test](https://test.com. So it outputs <a href="https://test.com">test</a>) with that trailing parenthesis.
Can someone help me fix the statement above, so that it takes markdown links and renders anchor tags as expected? For documentation, here is the full function to make this conversion:
const markdown = `[test](https://test.com)`
const html = markdown.replace(/^### (.*$)/gim, '<h3>$1</h3>') // h3 tag
.replace(/^## (.*$)/gim, '<h2>$1</h2>') // h2 tag
.replace(/^# (.*$)/gim, '<h1>$1</h1>') // h1 tag
.replace(/\*\*(.*)\*\*/gim, '<b>$1</b>') // bold text
.replace(/\*(.*)\*/gim, '<i>$1</i>') // italic text
.replace(/\r\n|\r|\n/gim, '<br>') // linebreaks
.replace(/\[([^\[]+)\](\(([^)]*))/gim, '<a href="$3">$1</a>'); // anchor tags
console.log(html)You just missed a \)
const markdown = `[test](https://test.com)`
const html = markdown.replace(/^### (.*$)/gim, '<h3>$1</h3>') // h3 tag
.replace(/^## (.*$)/gim, '<h2>$1</h2>') // h2 tag
.replace(/^# (.*$)/gim, '<h1>$1</h1>') // h1 tag
.replace(/\*\*(.*)\*\*/gim, '<b>$1</b>') // bold text
.replace(/\*(.*)\*/gim, '<i>$1</i>') // italic text
.replace(/\r\n|\r|\n/gim, '<br>') // linebreaks
.replace(/\[([^\[]+)\](\(([^)]*))\)/gim, '<a href="$3">$1</a>'); // anchor tags
console.log(html)Shouldn't be much more complex than this:
https://regex101.com/r/wKvNuy/1
const rxCommonMarkLink = /(\[([^\]]+)])\(([^)]+)\)/g;
function commonMarkLinkToAnchorTag(md) {
const anchor = md
? md.replace( rxCommonMarkLink , '<a href="$3"> $2 </a>' )
: md
;
}
But really, shouldn't you just use a proper parser?
Remark is built on top of: