一行一行解析，然後逐字逐句從jquery中的textarea

Question

我正在創建一個基本的.fountain編輯器到html解析器，該解析器幾乎檢查在關鍵字上的textarea中鍵入的單詞。

逐行解析以下的作品，當然，用戶將輸入「** **大膽然後*斜體*」在一個單一的線，但我似乎無法得到它以掃描線的每個字。

下面是我的代碼：

jQuery.fn.parseAsFountain = function(window, jQuery){ 
    jQuery = $; 
    var storybox = $(this).val(); 
    story = storybox.split('\n'); 


    // Process The entire box 

    for(var i=0;i<story.length;i++){ 

     var line = story[i]; 

     SubstitutePerLine(line); 


    } 

    story_cleared = story.join('\n'); 
    story_breaks = story_cleared.replace(/(?:\r\n|\r|\n)/g, '<br />'); 
    return story_breaks; 

    function SubstitutePerLine(line){ 

     if(line.match(/^[*].*[*]$/)){ 
      newval = line.slice(1, -1); 

      if(newval.match(/^[*].*[*]$/)){ 
       newval2 = newval.slice(1, -1); 

       if(newval2.match(/^[*].*[*]$/)){ 
        newval3 = newval2.slice(1, -1); 

        if(newval3.match(/\\/)) { 
         if(newval3.match(/\\\*/)){ 
         slash_val = newval3.replace(/\\/, ''); 
         story[i] = '<b><i>' + slash_val + '</i></b>'; 
         } 
         else { 
         story[i] = '<b><i>' + newval3 + '</i></b>'; 
         } 
        } 

        else { 
        story[i] = '<b><i>' + newval3 + '</i></b>'; 
        } 

       } 

       else if(newval2.match(/\\/)) { 
        if(newval2.match(/\\\*/)){ 
        slash_val = newval2.replace(/\\/, ''); 
        story[i] = '<b>' + slash_val + '</b>'; 
        } 
        else { 
        story[i] = '<b>' + newval2 + '</b>'; 
        } 
       } 

       else { 
       story[i] = '<b>' + newval2 + '</b>'; 
       } 

      } 

      else if(newval.match(/\\/)) { 
       if(newval.match(/\\\*/)){ 
       slash_val = newval.replace(/\\/, ''); 
       story[i] = '<i>' + slash_val + '</i>'; 
       } 
       else { 
       story[i] = '<i>' + newval + '</i>'; 
       } 
      } 

      else { 
       story[i] = '<i>' + newval + '</i>'; 
      } 

     } 


     if(line.match(/#/)){ 
      newval = line.replace(/^#/, ''); 
      story[i] = '<p hidden>' + newval + '</p>'; 
     } 
     if(line.match(/##/)){ 
      newval = line.replace(/^##/, ''); 
      story[i] = '<p hidden>' + newval + '</p>'; 
     } 
     if(line.match(/###/)){ 
      newval = line.replace(/^###/, ''); 
      story[i] = '<p hidden>' + newval + '</p>'; 
     } 

    return story; 

    } 



} 

我試圖重新分割它通過文字在另一個分裂（」「）內循環，然後再加入它之後，但無濟於事。

Answer 1

解析標記不是一個簡單的任務。舉幾個例子：

• 如果星號後跟一個空格，它將不是格式化文本片段的開頭;
• 幾部分可以​​格式化在一行中，不僅單個單詞，而且單詞組;
• 格式化甚至可能會跨越換行符。
• 星號前面可能有偶數的斜線，這種情況下星號是而不是轉義。

這裏是一個解決方案，只用斜體，粗體和斜體+粗體格式的交易，和除去逸出斜線。我沒有處理的哈希（#），因爲這是已經爲問答&相當寬：

jQuery.fn.parseAsFountain = function() { 
 
    var txt = this.val(), 
 
     re = /(\s?)(\\*)(\*+)(?=(\s?))/g, 
 
     arr, 
 
     openAsterisks = 0, 
 
     result = [], 
 
     last = 0, 
 
     start; 
 
    while ((arr = re.exec(txt)) !== null) { 
 
     var [all, prefix, escaped, asterisks, suffix] = arr; 
 
     if (escaped.length % 2) { // First asterisk is escaped 
 
      escaped += asterisks[0]; 
 
      asterisks = asterisks.substr(1); 
 
      if (!asterisks.length) continue; // Nothing to do 
 
     } 
 
     var useAsterisks = 0; 
 
     if (openAsterisks && !prefix.length) { 
 
      useAsterisks = Math.min(openAsterisks, asterisks.length); 
 
      // Add HTML for bold, italic or both 
 
      result.push(
 
       txt.substr(last, start - useAsterisks - last), 
 
       ['<i>','<b>','<i><b>'][useAsterisks-1], 
 
       txt.substr(start, arr.index + escaped.length - start), 
 
       ['</i>','</b>','</b></i>'][useAsterisks-1]); 
 
      last = arr.index + escaped.length + useAsterisks; 
 
      openAsterisks = 0; 
 
     } 
 
     if (!openAsterisks && asterisks.length > useAsterisks && !suffix.length) { 
 
      openAsterisks = asterisks.length - useAsterisks; 
 
      start = arr.index + prefix.length + escaped.length + asterisks.length; 
 
     } 
 
    } 
 
    // Flush remaining text 
 
    result.push(txt.substr(last)); 
 
    // Remove escaping slashes (not escaped ones!): 
 
    result = result.join('').replace(/\\(.)/g, '$1'); 
 
    return result; 
 
} 
 

 
$('textarea').on('input', function() { 
 
    $('pre').html($(this).parseAsFountain()); 
 
}).trigger('input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea style="width:100%" rows=5> 
 
This is **a** test *with several* ***formats 
 
but*** keeping asterisks \*where* needed. 
 
</textarea> 
 
<h3>Rendered:</h3> 
 
<pre> 
 
</pre>