Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use JavaScript+Node.js to write a markdown parser, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

1. Preparatory work

First write the getHtml function, pass in the markdown text string, here use fs to read the contents of the markdown file, and the return value is the converted string.

Const fs = require ('fs'); const source = fs.readFileSync ('. / test.md', 'utf-8'); const getHtml = (source) = > {/ / processing title return source;} const result = getHtml (source); console.log (result)

The main design is regular expressions and String.prototype.replace methods. The first parameter received by replace can be regular, and if the second parameter is a function, then the return value is the content to be replaced.

two。 Working with pictures & hyperlinks

The syntax of pictures and hyperlinks is very similar. [image] (url), [hyperlink] (url), you need to exclude `when using regular matching. Props will get $from the rule, $1 from the rule 2. That is, the matching character as a whole, the first parenthesis content, the second parenthesis content. For example, here props [0] is the complete content of the match, the fourth parameter props [3] is the alt in [], and the fifth parameter props [4] is the link address.

Const imageora = (source) = > {return source.replace (/ (`?) (!)\ [(. *)\]\ (. +) / gi, (. Props) = > {switch (props [0] .trim () [0]) {case'!': return `$ {props [3]}`; case'[': return `

`; default: return props [0];}});} const getHtml = (source) = > {source = imageora (source); return source;} 3. Dealing with blockquote

Match spaces using\ x20 here. If it matches the content, put the text props [3] on the blockquote tag and return it.

Const block = (source) = > {return source.replace (/ (. *) (`?)\ >\ x20 + (. +) / gi, (... props) = > {switch (props [0] .trim () [0]) {case'>': return `$ {props [3]}`; default: return props [0];}});} 4. Working with headings

The match must start with #, and the number of # cannot exceed 6, because H7 is the largest, there is no H7, and finally props [2] is the text followed by #.

Const formatTitle = (source) = > {return source.replace (/ (. * # +)\ x20? (. *) / g, (. Props) = > {switch (props [0] [0]) {case'#': if (props [1] .length {/ / processing ~ parcel text source = source.replace (/ ([`\] *\ {2}) (. *?)\ ~ {2} / g (. Props) = > {switch (props [0] .trim () [0]) {case'~': return `$ {props [2]} ` ; default: return props [0];}}); / / process *-the newline source = source.replace (/ ([`\\] *) [* -] {3,}\ nreturn g, (. Props) = > {switch (props [0] .trim () [0])) {case'*:; case'-': return `` Default: return props [0];}}) / / handle the bold or skew denoted by * *. Source = source.replace (/ ([`\] *\ * {1pr 3}) (. *?) (\ * {1pr 3}) / g, (... props) = > {switch (props [0] .trim () [0]) {case'*': if (props [1] = = props [3]) {if (props [1] .length = = 1) {return` ${props [2]} ` } else if (props [1] .length = 2) {return `${props [2]}`;} else if (props [1] .length = 3) {return `${props [2]}`; default: return props [0];}}) Return source;} 6. Working with code blocks

Use regular matching to use code blocks wrapped with `. Props [1] is the number of beginning` and props [5] is the number of ending `, which must be equal before it takes effect.

Const pre = (source) = > {source = source.replace (/ ([\\ `] +) (\ w+ (\ n))? ([^!`] *) (`+) / g, (. Props) = > {switch (props [0] .trim () [0]) {case'`: if (props [1] = = props [5]) {return `${props [3] |'} ${props [4]}` }; default: return props [0];}}); return source;} 7. Process list

This is just dealing with ul unordered lists, which is also troublesome to write. Mainly, my train of thought is really complicated. And there must be a lot of bug. Match-+ * with a space, and then replace it with ul based on the space in front of the line. So that every line is guaranteed to be wrapped by ulli.

The second step is to determine the number of differences between adjacent ul. If it is equal, it means that it should be the li of the same ul, and replace it with empty. If the latter ul is greater than the previous ul, it means that there is a backspace behind it. A new package backspace is generated. If it is the last ul, all the previous ones are made up.

Const list = (source) = > {source = source.replace (/. *? [\ x20\ t] * ([\ -\ +\ *] {1})\ x20 (.*) / g, (... props) = > {if (/ ^ [\ t\ x20\ -\ +\ *] / .test (props [0])) {return props [0] .replace (/ ([\ t\ x20] *) [\ -\ +\ *]\ x20 (.*) / g (. Props) = > {const len = props [1] .length | |'' Return `${props [2]}`;}} else {return props [0];}}); const set = new Set (); source = source.replace (/ (\ n)? / g, (. Props) = > {set.add (props [1]) If (props [1] = = props [3]) {return';} else if (props [1])

< props[3]) { return ''; } else { const arr = [...set]; const end = arr.indexOf(props[1]); let start = arr.indexOf(props[3]); if (start >

0) {return'. Repeat (end-start);} else {return'. Repeat (end + 1);}); return source.replace (/ / g,'');} 8. Deal with the table const table = (source) = > {source = source.replace (/\ |. *\ |\ n\ |\ props +\ s*\ |. *\ |. Props) = > {let str =''; const data = props [0]. Split (/\ n /) [0] .split ('|'); for (let I = 1; I

< data.length - 1; i++) { str += `${data[i].trim()}` } str += ''; return str; }); return formatTd(source);}const formatTd = (source) =>

{source = source.replace (/\ |. *\ |\ nfor g, (... props) = > {let str =''; const data = props [0] .split ('|'); for (let I = 1; I

< data.length - 1; i++) { str += `${data[i].trim()}` } str += ''; return str; }); if (source.includes('|')) { return formatTd(source); } return source;}9. 调用方法const getHtml = (source) =>

{source = imageora (source); source = block (source); source = formatTitle (source); source = formatFont (source); source = pre (source); source = list (source); source = table (source); return source;} const result = getHtml (source); console.log (result) Thank you for reading this article carefully. I hope the article "how to use JavaScript+Node.js to write a markdown parser" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.