2015-07-19 93 views
1

我正在對html解析器進行降價。我知道這是一個很大的項目,並且有第三方庫,但我更願意自己推出一個簡單的解決方案,而不必處理降價的每一個方面。JavaScript標記解析

到目前爲止,該過程是採取一個輸入(在我的情況下,一個textarea的值),並逐行解析它。

var html = []; 
var lines = txt.split('\n'); //Convert string to array 
//Remove empty lines 
for(var index = lines.length-1; index >= 0; index--) { 
    if(lines[index] == '') lines.splice(index, 1); 
} 
//Parse line by line 
for(var index = 0; index <= lines.length-1; index++) { 
    var str = lines[index]; 
    if(str.match(/^#[^#]/)) { 
     //Header 
     str = str.replace(/#(.*?)$/g, '<h1>$1</h1>'); 
    } else if(str.match(/^##[^#]/)) { 
     //Header 2 
     str = str.replace(/##(.*?)$/g, '<h2>$1</h2>'); 
    } else if(str.match(/^###[^#]/)) { 
     //Header 3 
     str = str.replace(/###(.*?)$/g, '<h3>$1</h3>'); 
    } else if(str.trim().startsWith('+')) { 
     //Unordered List 
     var orig = str; 
     str = str.replace(/\+(.*?)$/, '<li>$1</li>'); 

     var previous, next; 
     if(index > 0) previous = lines[index-1]; 
     if(!previous || previous && previous.indexOf('+') < orig.indexOf('+')) { 
      str = '<ul>' + str; 
     } 
     if(index < lines.length-1) next = lines[index+1]; 
     if(!next || next && next.indexOf('+') < orig.indexOf('+')) { 
      var count = Math.max(0, orig.indexOf('+')/4); 
      if(next) count = count - Math.max(0, next.indexOf('+')/4); 
      for(var i=1; i<=count; i++) { 
        str = str + '</ul>'; 
      } 
     } 
      if(next && next.trim().indexOf('+') == -1) str = str + '</ul>'; 
     } else if(str.match(/^[0-9a-zA-Z]/)) { 
      //Paragraph 
      str = str.replace(/^([0-9a-zA-Z].*?)$/g, '<p>$1</p>'); 
     } 
    //Inline formatting 
    str = str.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); //Bold 
    str = str.replace(/\_\_(.*?)\_\_/g, '<strong>$1</strong>'); //Another bold 
    str = str.replace(/\*(.*?)\*/g, '<em>$1</em>'); //Italics 
    str = str.replace(/\_(.*?)\_/g, '<em>$1</em>'); //Another italics 
    //Append formatted to return string 
    html.push(str); 
} 

我遇到問題的地方是嵌套塊,如ul。目前代碼查看以+開頭的行並將其封裝在li中。太棒了,但這些列表項目永遠不會被放在UL中。我可以在逐行之後再次運行輸出,並且只是包裝每一組li,但是當我嵌套li需要自己的ul時,這會將我擰緊。

有關如何應用這些附加包裝標籤的任何想法?我已經考慮在列表類型元素周圍使用我自己的特殊字符,所以我知道在哪裏添加封裝標籤,但是打破了傳統的降價。我無法將原始減價傳遞給除我之外的其他人,並且知道他們會理解正在發生的事情。

編輯我更新了我的代碼示例以包含工作示例。工作示例還支持嵌套列表。

回答

1

您需要一個非常簡單的狀態機。

當您遇到第一個+時,您將添加<ul>並引發一個標誌。

如果你沒有看到,隨着+開始,你的國旗升起一條線,然後關閉</ul>