Search for a command to run...
No comments yet. Be the first to comment.
A quick analysis of the top 25 CWEs in the last 5 years show a repeating pattern
JavaScript is a scripting language, therefore you can write scripts to automate your workflow with JavaScript. The background of the snippet I created a node script recently to automate one workflow that I do repeatedly. Every time I create a new Jav...
Handling error in express applications can be more challenging than building web applications and APIs Building web applications or APIs with express.js is not difficult in my opinion. I think it is more difficult to handle errors, error status codes...
This blog is a follow-up to my last blog in which I talked about promises. If you are unfamiliar with promises in JavaScript, please read that article before reading this one. Also, some familiarity with exception handling would be useful. Async Awai...
Markdown is a markup language like HTML. It is quite popular among developers to write blogs, readme files, and documentation. Some of the popular websites that support rich text like Reddit, GitHub, Notion etc allow you to write Markdown. I use Markdown to convert my blog from a Markdown file to HTML web pages. Markdown is simple yet very powerful. In this blog, I will be writing about how to build a simple Markdown parser to convert Markdown to HTML with JavaScript using Regular Expressions.
Markdown Parser
If you open a markdown file, you’ll see the following syntax.
Markdown text example
Learn more from this Markdown cheatsheet.
A regular expression is a character sequence that helps us to capture patterns in a text. We can use it to validate user input, find and replace texts and yup, you guessed it, build our Markdown parser. 😉
Different languages have different ways to represent RegEx. Here is how it is done in JavaScript.
Markdown example in JavaScript
I will explain the patterns we use in our parser as we reach that section. However, if you want to read more about regular expressions, visit https://javascript.info.
The Markdown parser I intend to build is a function that takes Markdown text as input and returns HTML.
Markdown parser function
Here, we want to find a certain pattern in markdownText and perform replace operations.
Our Markdown parser is simple. It captures a pattern from Markdown string passed to the function as markdownText argument and replaces it with certain HTML pattern.
Here is how the string replace function works.
Working of replace function
Note: Here the i flag represents case insensitive and g flag represents global*, which means it matches patterns everywhere on the string, not just the first match.*
Regular Expressions allows us to capture patterns of text and reference them with something like an index. We can use the index in the replace operation. To represent a group, we can simply wrap it in a parenthesis ().
Capturing groups in Regular Expression
Here, we have stored the starting hello in a group. The group can then be referenced with $1 on our replace operation.
Now, we want to parse the Markdown text and replace it with HTML.
Here are the RegExes we will use in our parser and their explanation.
Heading
For heading, we want a string that starts with a hash(es) and captures everything after those characters.
RegEx for h3
Here the first carat ^ represents line starting with and m flag represents multiple lines and by doing .* we are capturing everything (letters, numbers, special characters) that exists there.
Blockquote
For blockquote, we want a line that starts with> and captures everything after that character.
Blockquote RegEx
Note: \> represents escaping > character. That means, don’t treat > as a part of special regEx character but as a part of that text itself.
Bold Text
For bold text, we want to capture a text between 2 asterisks.
RegEx for Bold text
Italics Text
For italic text, we want to capture a text between one asterisk.
RegEx for Italics
Image, links and line break
RegEx for Image, Link and Line break
By this point, you probably have all the background necessary to understand the concepts. Let’s fit all the things that we have learnt up to now and build the parser.
Time to test the parser.
Testing the parser
Should print:
Output
Our Markdown parser is now completed. It doesn’t cover everything that Markdown supports. Try implementing them and share the solution with me via twitter.
Originally published at https://www.bigomega.dev.