markdown数学表达式_具有JavaScript和正则表达式的简单Markdown解析器

markdown数学表达式

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是HTML之类的标记语言。 在开发人员中编写博客，自述文件和文档非常受欢迎。 一些支持富文本的流行网站，例如Reddit，GitHub，Notion等，使您可以编写Markdown。 我使用Markdown将博客从Markdown文件转换为HTML网页。 Markdown很简单，但功能非常强大。 在这个博客中，我将写有关如何构建一个简单的Markdown解析器，以使用正则表达式使用JavaScript将Markdown转换为HTML的文章。

Markdown文字看起来如何 (How does Markdown text look like)

If you open a markdown file, you’ll see the following syntax.

如果打开降价文件，您将看到以下语法。

演示地址

Markdown text example

降价文字示例

Learn more from this Markdown cheatsheet.

从此Markdown速查表中了解更多信息。

常用表达 (Regular Expressions)

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. 😉

正则表达式是一个字符序列，可帮助我们捕获文本中的模式。 我们可以使用它来验证用户输入，查找和替换文本，是的，您猜对了，构建了我们的Markdown解析器。 😉

Different languages have different ways to represent RegEx. Here is how it is done in JavaScript.

不同的语言具有不同的表示RegEx的方式。 这是用JavaScript完成的方法。

演示地址

Markdown example in JavaScript

JavaScript中的Markdown示例

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.

在到达该部分时，我将解释在解析器中使用的模式。 但是，如果您想了解有关正则表达式的更多信息，请访问https://javascript.info 。

Markdown解析器 (Markdown parser)

The Markdown parser I intend to build is a function that takes Markdown text as input and returns HTML.

我打算构建的Markdown解析器是一个将Markdown文本作为输入并返回HTML的函数。

演示地址

Markdown parser function

Markdown解析器功能

Here, we want to find a certain pattern in markdownText and perform replace operations.

在这里，我们要在markdownText找到特定的模式并执行替换操作。

字符串替换功能 (String replace function)

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.

我们的Markdown解析器很简单。 它捕获从Markdown字符串(作为markdownText参数)传递给函数的模式，并将其替换为某些HTML模式。

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.

注意：这里的 i标志表示不区分大小写， 而 g标志表示global ，这意味着它在字符串的所有位置都匹配模式，而不仅仅是第一次匹配。

捕获正则表达式中的组 (Capturing groups in Regular Expression)

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.

在这里，我们已将开始的问候存储在一个组中。 然后可以在我们的替换操作中以$ 1引用该组。

返回解析器 (Back to the parser)

Now, we want to parse the Markdown text and replace it with HTML.

现在，我们要解析Markdown文本并将其替换为HTML。

Here are the RegExes we will use in our parser and their explanation.

这是我们将在解析器中使用的RegExes及其说明。

Heading For heading, we want a string that starts with a hash(es) and captures everything after those characters.

标题 对于标题，我们需要一个以哈希开头的字符串，并捕获这些字符之后的所有内容。

演示地址

RegEx for h3

适用于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.

在这里，第一克拉^代表以'。'开始的行，而m标志代表多行，通过执行。*，我们捕获了那里存在的所有内容(字母，数字，特殊字符)。

BlockquoteFor 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.

注意：\>表示转义>字符。 这意味着，不要将>视为特殊regEx字符的一部分，而应将其视为文本本身的一部分。

Bold Text For bold text, we want to capture a text between 2 asterisks.

粗体文本对于粗体文本，我们要捕获2个星号之间的文本。

演示地址

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

用于图像，链接和换行符的RegEx

全部组装在一起 (Fitting it all together)

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.

我们的Markdown解析器现已完成。 它没有涵盖Markdown支持的所有内容。 尝试实施它们，并通过Twitter与我分享解决方案。

Originally published at https://www.bigomega.dev.

最初发布在 https://www.bigomega.dev 。

翻译自: https://medium.com/javascript-in-plain-english/simple-markdown-parser-with-javascript-and-regular-expressions-f0c8d53449a4

markdown数学表达式