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)

CodePudding user response：

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)

CodePudding user response：

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?

• https://remark.js.org/
  this parses CommonMark and gives you an AST that you can traverse to accomplish what you need: https://astexplorer.net/#/gist/0a92bbf654aca4fdfb3f139254cf0bad/ffe102014c188434c027e43661dbe6ec30042ee2

Remark is built on top of:

• https://www.npmjs.com/package/micromark
  The CommonMark parser itself
• https://github.com/syntax-tree/mdast-util-from-markdown
  Wraps Micromark and produces the AST