JavaScript+Node.js写一款markdown解析器

目录

1. 准备工作

首先编写gethtml函数，传入markdown文本字符串，这里使用fs读取markdown文件内容，返回值是转换过后的字符串。

const fs = require('fs');const source = fs.readfilesync('./test.md', 'utf-8');const gethtml = (source) => {  // 处理标题  return source;}const result = gethtml(source);console.log(result);

主要设计正则表达式和string.prototype.replace方法，replace接收的第一个参数可以是正则，第二个参数如果是函数那么返回值就是所替换的内容。

2. 处理图片&超链接

图片和超链接的语法很像，，[超链接](url)，使用正则匹配同时需要排除`。props会获取正则中的$，$1，$2。也就是匹配的字符整体，第一个括号内容，第二个括号内容。比如这里props[0]就是匹配到的完整内容，第四个参数props[3]是[]中的alt，第五个参数props[4]是链接地址。

const imageora = (source) => {  return source.replace(/(`?)(!?)\[(.*)\]\((.+)\)/gi, (...props) => {    switch (props[0].trim()[0]) {      ca '!': return `<a href="${props[4]}" rel="external nofollow"  描写春天的好句alt="${props[3]}">${props[3]}</a>`;      ca '[': return `<img src="${props[4]}" alt="${props[3]}"/>`;      default: return props[0];    }  });}const gethtml = (source) => {  source = imageora(source);  return source;}

3. 处理blockquote

这里使用\x20匹配空格。如果匹配到内容，将文本props[3]放在blockquote标签返回就行了。

const block = (source) => {  return source.replace(/(.*)(`?)\>\x20+(.+)/gi, (...props) => {    switch (props[0].trim()[0]) {      ca '>': return `<blockquote>${props[3]}</blockquote>`;      default: return props[0];    }  });}

4. 处理标题

匹配必须以#开头，并且#的数量不能超过6，因为h6是最大的了，没有h7，最后props[2]是#后跟随的文本。

const formattitle = (source) => {  return source.replace(/(.*#+)\x20?(.*)/g, (...props) => {    switch (props[0][0]) {      ca '#': if (props[1].length <= 6) {        return `<h${props[1].length}>${props[2].trim()}</h${props[1].length}>`;      };      default: return props[0];    }  })}

5. 处理字体

写的开始复杂了

const formatfont = (source) => {  // 处理 ~ 包裹的文本  source = source.replace(/([`\\]*\~{2})(.*?)\~{2}/g, (...props) => {    switch (props[0].trim()[0]) {      ca '~': return `<del>${props[2]}</del>`;;      default: return props[0];    }  });  // 处理 * - 表示的换行  source = source.replace(/([`\\]*)[* -]{3,}\n/g, (...props) => {    switch (props[0].trim()[0]) {      ca '*': ;      ca '-': return `<hr />`;      default: return props[0];    }  })  // 处理***表示的加粗或者倾斜。  source = source.replace(/([`\\]*\*{1,3})(.*?)(\*{1,3})/g, (...props) => {    switch (props[0].trim()[0]) {      ca '*': if (props[1] === props[3]) {        if (props[1].length === 1) {          return `<em>${props[2]}</em>`;;        } el if (props[1].length === 2) {          return `<strong>${props[2]}</strong>`;;        } el if (props[1].length === 3) {          return `<strong><em>${props[2]}</em></strong>`;;        }      };      default: return props[0];    }  });  return source;}

6. 处理代码块

使用正则匹配使用`包裹的代码块，props[1]是开头`的数量，props[5]是结尾`的数量，必须相等才生效。

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

7. 处理列表

这里只是处理了ul无序列表，写的同样很麻烦。主要我的思路是真复杂。而且bug肯定也不少。先匹配-+*加上空格，然后根据这一行前面的空格熟替换为ul。这样每一行都保证被ulli包裹。

第二步判断相邻ul之间相差的个数，如果相等则表示应该是同一个ul的li，替换掉</ul><ul>为空，如果后一个ul大于前一个ul，则表示后面有退格，新生成一个<ul>包裹退格后的li，如果是最后一个ul则补齐前面所有的</ul>。

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 `<ul${len}><li>${props[2]}</li></ul${len}>`;      })    } el {      return props[0];    }  });  const t = new t();  source = source.replace(/<\/ul(\d*)>(\n<ul(\d*)>)?/g, (...props) => {    t.add(props[1]);    if (props[1] == props[3]) {      return '';    } el if (props[1] < props[3]) {      return '<ul>';    } el {      const arr = [...t];      const end = arr.indexof(props[1]);      let start = arr.indexof(props[3]);      if (start > 0) {        return '</ul>'.repeat(end - start);      } el {        return '</ul>'.repeat(end +油条怎么做好吃又松软 1);      }          }  });  return source.replace(/<(\/?)ul(\d*)>/g, '<$1ul>');}

8. 处理表格

const table = (source) => {  source = source.replace(/\|.*\|\n\|\s*-+\s*\|.*\|\n/g, (...props) => {    let str = '<table><tr>';    const data = props[0].split(/\n/)[0].split('|');    for (let i = 1; i < data.length - 1; i++) {      str += `<th>${data[i].trim()}</th>`    }    str += '<tr></table>';    return str;  });  return formattd(source);}const formattd = (sou春暖 花开rce) => {  source = source.replace(/<\/table>\|.*\|\n/g, (...props) => {    let str = '<tr>';    const data = props[0].split('|');    for (let i = 1; i < data.length - 1; i++) {      str += `<td>${data[i].tr广东职业技术学院im()}</td>`    }    str += '<tr></table>';    return str;  });  if (source.includes('</table>|')) {    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);

到此这篇关于javascript+node.js写一款markdown解析器的文章就介绍到这了,更多相关写一款markdown解析器内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！