javascript 로 구현한 markdown 파서 함수 예제
페이지 정보
작성자 관리자 (112.♡.173.204) 작성일 21-04-14 22:59 조회 2,184 댓글 0본문
## 출처
https://jung-max.github.io/2019/09/27/Web-Javascript-MarkDown%EA%B5%AC%ED%98%84/
```
function parseMd(md){
//ul
md = md.replace(/^\s*\n\*/gm, '<ul>\n*');
md = md.replace(/^(\*.+)\s*\n([^\*])/gm, '$1\n</ul>\n\n$2');
md = md.replace(/^\*(.+)/gm, '<li>$1</li>');
//ol
md = md.replace(/^\s*\n\d\./gm, '<ol>\n1.');
md = md.replace(/^(\d\..+)\s*\n([^\d\.])/gm, '$1\n</ol>\n\n$2');
md = md.replace(/^\d\.(.+)/gm, '<li>$1</li>');
//blockquote
md = md.replace(/^\>(.+)/gm, '<blockquote>$1</blockquote>');
//h
md = md.replace(/[\#]{6}(.+)/g, '<h6>$1</h6>');
md = md.replace(/[\#]{5}(.+)/g, '<h5>$1</h5>');
md = md.replace(/[\#]{4}(.+)/g, '<h4>$1</h4>');
md = md.replace(/[\#]{3}(.+)/g, '<h3>$1</h3>');
md = md.replace(/[\#]{2}(.+)/g, '<h2>$1</h2>');
md = md.replace(/[\#]{1}(.+)/g, '<h1>$1</h1>');
//alt h
md = md.replace(/^(.+)\n\=+/gm, '<h1>$1</h1>');
md = md.replace(/^(.+)\n\-+/gm, '<h2>$1</h2>');
//images
md = md.replace(/\!\[([^\]]+)\]\(([^\)]+)\)/g, '<img src="$2" alt="$1" />');
//links
md = md.replace(/[\[]{1}([^\]]+)[\]]{1}[\(]{1}([^\)\"]+)(\"(.+)\")?[\)]{1}/g, '<a href="$2" title="$4">$1</a>');
//font styles
md = md.replace(/[\*\_]{2}([^\*\_]+)[\*\_]{2}/g, '<b>$1</b>');
md = md.replace(/[\*\_]{1}([^\*\_]+)[\*\_]{1}/g, '<i>$1</i>');
md = md.replace(/[\~]{2}([^\~]+)[\~]{2}/g, '<del>$1</del>');
//pre
md = md.replace(/^\s*\n\`\`\`(([^\s]+))?/gm, '<pre class="$2">');
md = md.replace(/^\`\`\`\s*\n/gm, '</pre>\n\n');
//code
md = md.replace(/[\`]{1}([^\`]+)[\`]{1}/g, '<code>$1</code>');
//p
md = md.replace(/^\s*(\n)?(.+)/gm, function(m){
return /\<(\/)?(h\d|ul|ol|li|blockquote|pre|img)/.test(m) ? m : '<p>'+m+'</p>';
});
//strip p from pre
md = md.replace(/(\<pre.+\>)\s*\n\<p\>(.+)\<\/p\>/gm, '$1$2');
return md;
}
```
위 함수가 생각대로 정확하게 동작하지는 않았지만,
그래도 참고로 하면 될 듯해서 갈무리 해 놓는다.
https://jung-max.github.io/2019/09/27/Web-Javascript-MarkDown%EA%B5%AC%ED%98%84/
```
function parseMd(md){
//ul
md = md.replace(/^\s*\n\*/gm, '<ul>\n*');
md = md.replace(/^(\*.+)\s*\n([^\*])/gm, '$1\n</ul>\n\n$2');
md = md.replace(/^\*(.+)/gm, '<li>$1</li>');
//ol
md = md.replace(/^\s*\n\d\./gm, '<ol>\n1.');
md = md.replace(/^(\d\..+)\s*\n([^\d\.])/gm, '$1\n</ol>\n\n$2');
md = md.replace(/^\d\.(.+)/gm, '<li>$1</li>');
//blockquote
md = md.replace(/^\>(.+)/gm, '<blockquote>$1</blockquote>');
//h
md = md.replace(/[\#]{6}(.+)/g, '<h6>$1</h6>');
md = md.replace(/[\#]{5}(.+)/g, '<h5>$1</h5>');
md = md.replace(/[\#]{4}(.+)/g, '<h4>$1</h4>');
md = md.replace(/[\#]{3}(.+)/g, '<h3>$1</h3>');
md = md.replace(/[\#]{2}(.+)/g, '<h2>$1</h2>');
md = md.replace(/[\#]{1}(.+)/g, '<h1>$1</h1>');
//alt h
md = md.replace(/^(.+)\n\=+/gm, '<h1>$1</h1>');
md = md.replace(/^(.+)\n\-+/gm, '<h2>$1</h2>');
//images
md = md.replace(/\!\[([^\]]+)\]\(([^\)]+)\)/g, '<img src="$2" alt="$1" />');
//links
md = md.replace(/[\[]{1}([^\]]+)[\]]{1}[\(]{1}([^\)\"]+)(\"(.+)\")?[\)]{1}/g, '<a href="$2" title="$4">$1</a>');
//font styles
md = md.replace(/[\*\_]{2}([^\*\_]+)[\*\_]{2}/g, '<b>$1</b>');
md = md.replace(/[\*\_]{1}([^\*\_]+)[\*\_]{1}/g, '<i>$1</i>');
md = md.replace(/[\~]{2}([^\~]+)[\~]{2}/g, '<del>$1</del>');
//pre
md = md.replace(/^\s*\n\`\`\`(([^\s]+))?/gm, '<pre class="$2">');
md = md.replace(/^\`\`\`\s*\n/gm, '</pre>\n\n');
//code
md = md.replace(/[\`]{1}([^\`]+)[\`]{1}/g, '<code>$1</code>');
//p
md = md.replace(/^\s*(\n)?(.+)/gm, function(m){
return /\<(\/)?(h\d|ul|ol|li|blockquote|pre|img)/.test(m) ? m : '<p>'+m+'</p>';
});
//strip p from pre
md = md.replace(/(\<pre.+\>)\s*\n\<p\>(.+)\<\/p\>/gm, '$1$2');
return md;
}
```
위 함수가 생각대로 정확하게 동작하지는 않았지만,
그래도 참고로 하면 될 듯해서 갈무리 해 놓는다.
추천0
댓글목록 0
등록된 댓글이 없습니다.