黑马程序员技术交流社区

标题: JS实现的MarkDwon解释器 [打印本页]
作者: yxz    时间: 2013-8-27 17:30
标题: JS实现的MarkDwon解释器
几天前做的MD解释器拿出来和大家交流一下吧。现在已经实现了标题、段落和换行、强调、分隔线
MarkDown的内容请看这里http://www.oschina.net/question/100267_75314
目前还很不完善，不过重要功能都已经实现了，其他功能也就不在话下了。
最近没时间搞这个了，我也是云六的，自荐信只拿了7分，真愁人。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>MarkWown</title>
  5. </head>
  6. <body>
  7. <textarea style="width: 400px;height: 300px" id="rawtext"></textarea>     <p>
  8. <input type="button" value="submit" onclick="Compiler=new compiler('rawtext','OutputHTML');
  9. Compiler.encode()">
  10. <div id="OutputHTML"></div>

  12. <script>
  13.     function compiler(mid,pid){
  14.         var rawlist=document.getElementById(mid);
  15.         var raws="";
  16.         var rawi=0;
  17.         var regexlst;
  18.         var mdbox=document.getElementById(pid);
  19.         var passline=[];

  21.         dict=[
  22.             {"match":/^#{1,6}/,"value":"_ishead()"},
  23.             {"match":/^\*{3,}$/,"value":"_outkit('<hr/>')"},
  24.             {"match":/^\-{3,}$/,"value":"_outkit('<hr/>')"},
  25.             {"match":/^[\* ]*$/,"value":"_outkit('<hr/>')"},
  26.             {"match":/((^(\*|\_){1,3})|((\*|\_){1,3}$))/g,"value":"_textstype()"},
  27.             {"match":/^\- \- \-/,"value":"_outkit('<hr/>')"}
  28.         ];

  30.         function getrawstring(){
  31.             if(rawlist.value==""){
  32.                 return 0;
  33.             }
  34.             mdbox.innerText="";
  35.             rawlist=rawlist.value.split("\n")
  36.             _encode();
  37.         }

  39.         //处理文字样式
  40.         function _textstype(){
  41.             if(regexlst.length<2||regexlst[0].length==0||regexlst[1].length==0){
  42.                 _outkit(raws);
  43.             }else{
  44.                 lst=Min(regexlst[0].length,regexlst[1].length);
  45.                 raws=raws.substring(lst[0],raws.length-lst[0])
  46.                 switch (lst[0]){
  47.                     case 1:
  48.                         _outkit("<em>"+raws+"</em>");break;
  49.                     case 2:
  50.                         _outkit("<strong>"+raws+"</strong>");break;
  51.                     case 3:
  52.                         _outkit("<em><strong>"+raws+"</strong></em>");
  53.                 }
  54.             }
  55.         }


  58.         //图片处理
  59.         function _isimage(){

  61.         }

  63.         //处理开头
  64.         function _ishead(){
  65.             mf=regexlst[0].length;
  66.             _outkit("<h"+mf+">"+raws.substr(mf)+"</h"+mf+">");
  67.         }

  69.         function _outkit(html){
  70.             mdbox.innerHTML+=html;
  71.         }

  73.         //处理-和=的情况
  74.         function _ismaintitle(){
  75.             for(raw in rawlist){
  76.                 if(rawlist[raw-1]!=undefined){
  77.                     if(rawlist[raw].match(/^\-{1,}$/)!=null){
  78.                         passline.push(raw-1);
  79.                         rawlist[raw-1]="<h2>"+rawlist[raw-1]+"</h2>"
  80.                         rawlist.splice(raw,1);
  81.                     }else if(rawlist[raw].match(/^\={1,}$/)!=null){
  82.                         passline.push(raw-1);
  83.                         rawlist[raw-1]="<h1>"+rawlist[raw-1]+"</h1>"
  84.                         rawlist.splice(raw,1);
  85.                     }
  86.                 }
  87.             }
  88.         }

  90.         //最小的数
  91.         function _sort(a, b){
  92.             return a - b
  93.         }
  94.         function Min(){
  95.             var ilist=[]
  96.             for(i in arguments)
  97.                 ilist.push(arguments[i])
  98.             return ilist.sort(_sort);
  99.         }

  101.         //判断array是否存在某个item
  102.         function isExist(arr,item){
  103.             var sum=0;
  104.             for(i in arr){
  105.                 if(arr[i]===item)
  106.                     sum++;
  107.             }
  108.             return sum;
  109.         }

  111.         function _encode(){
  112.             _ismaintitle();
  113.             for(rawi in rawlist){
  114.                 raws=rawlist[rawi];
  115.                 if(raws==""){
  116.                     _outkit("<p>");
  117.                     continue;
  118.                 }
  119.                 if(isExist(passline,rawi)){
  120.                     _outkit(raws);
  121.                     continue;
  122.                 }
  123.                 for(j in dict){
  124.                     if((regexlst=raws.match(dict[j].match))!=null){
  125.                         eval(dict[j].value);
  126.                         break;
  127.                     }
  128.                     if(j==(dict.length-1))
  129.                         _outkit(raws);
  130.                 }
  131.             }
  132.         }
  133.         this.encode=getrawstring;
  134.     }
  135. </script>
  136. </body>
  137. </html>
复制代码
作者: yxz    时间: 2013-8-27 17:31
版主看看能不能加点技术分。



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2