Javascript не анализирует вложенный Bbcode

Я закодировал Javascript bbcode, похожий на тот, который я использую для написания этого сообщения. Он также включает окно предварительного просмотра в реальном времени, подобное тому, которое я вижу ниже. Единственная проблема, с которой я сталкиваюсь на данный момент, заключается в том, что некоторый вложенный bbcode не анализируется.

Например:

[quote]
   [quote][/quote]
[/quote]

Не правильно разбирает.

Это мой Javascript в настоящее время.

function preview() {

    var txt = $('#editor').val();
    txt = txt.replace(/</g,'&lt;');
    txt = txt.replace(/>/g,'&gt;');

    txt = txt.replace(/[\r\n]/g,'%lb%');

    var find    = [
                   /\[quote\](.*?)\[\/quote\]/gi,
                   /\[quote author="(.*?)" date="(.*?)"\](.*?)\[\/quote\]/gi,
                   /\[b\](.*?)\[\/b\]/gi,
                   /\[i\](.*?)\[\/i\]/gi,
                   /\[u\](.*?)\[\/u\]/gi,
                   /\[left\](.*?)\[\/left\]/gi,
                   /\[center\](.*?)\[\/center\]/gi,
                   /\[right\](.*?)\[\/right\]/gi,
                   /\[size=(10|12|24|30)](.*?)\[\/size\]/gi,
                   /\[font=(.*?)](.*?)\[\/font\]/gi,
                   /\[color=(.*?)](.*?)\[\/color\]/gi,
                   /\[url(?:\=?)(.*?)\](.*?)\[\/url\]/gi,
                   /\[email=(.*?)\](.*?)\[\/email\]/gi,
                   /\[email\](.*?)\[\/email\]/gi,
                   /\[img(.*?)\](.*?)\[\/img\]/gi,
                   /(?:%lb%|\s)*\[code(?:\=?)(?:.*?)\](?:%lb%|\s)*(.*?)(?:%lb%|\s)*\[\/code\](?:%lb%|\s)*/gi,

                   /\[list(.*?)\](.*?)\[\*\](.*?)(?:%lb%|\s)*(\[\*\].*?\[\/list\]|\[\/list\])/i,
                   /(?:%lb%|\s)*\[list\](?:%lb%|\s)*(.*?)(?:%lb%|\s)*\[\/list\](?:%lb%|\s)*/gi,
                   /(?:%lb%|\s)*\[list=(\d)\](?:%lb%|\s)*(.*?)(?:%lb%|\s)*\[\/list\](?:%lb%|\s)*/gi,
                   /(?:%lb%){3,}/g

                   ];
    var replace = [
                   '<blockquote><div class="quote"><div class="quote_body">$1</div></div></blockquote>',
                   '<blockquote><div class="quote"><div class="quote_author"><span class="quote_from">Quote from</span> <span class="author">$1</span> on <span class="date">$2</span></div><div class="quote_body">$3</div></div></blockquote>',
                   '<b>$1<\/b>',
                   '<i>$1<\/i>',
                   '<u>$1<\/u>',
                   '<div class="align_left">$1<\/div>',
                   '<div class="align_center">$1<\/div>',
                   '<div class="align_right">$1<\/div>',
                   '<span style="font-size:$1px;">$2</span>',
                   '<span style="font-family:$1;">$2</span>',
                   '<span style="color:$1;">$2</span>',
                   '<a href="$1">$2</a>',
                   '<a href="mailto:$1">$2</a>',
                   '<a href="mailto:$1">$1</a>',                   
                   '<img $1 src="$2" />',
                   '<pre><code>$1</code></pre>',
                   '[list$1]$2<li>$3</li>$4',
                   '<ul>$1</ul>',
                   '<ol start=$1>$2</ol>',
                   '%lb%%lb%'

                   ];

    // fix [*] so that they only work inside [/list]
    for(var i in find)
    {
        txt = txt.replace(find[i],replace[i]);
        if(i == 17) while(txt.match(find[i],replace[i])) txt = txt.replace(find[i],replace[i]);
    }

    // Fix Smilies
    txt = txt.replace(/%lb%/g,'<br />');
    txt = txt.replace(/\:\)/g, '<img class="smiley" src="/img/smilies/smile.gif">');
    txt = txt.replace(/\:-\)/g, '<img class="smiley" src="/img/smilies/happy.gif">');
    txt = txt.replace(/\:D/g, '<img class="smiley" src="/img/smilies/biggrin.gif">');
    txt = txt.replace(/\:\(/g, '<img class="smiley" src="/img/smilies/sad.gif">');
    txt = txt.replace(/8\)/g, '<img class="smiley" src="/img/smilies/cool.gif">');
    txt = txt.replace(/=O/g, '<img class="smiley" src="/img/smilies/surprised.gif">');
    txt = txt.replace(/\:-\|\|/g, '<img class="smiley" src="/img/smilies/mad.gif">');
    txt = txt.replace(/\:P/g, '<img class="smiley" src="/img/smilies/stongue.gif">');
    txt = txt.replace(/\}\-\(/g, '<img class="smiley" src="/img/smilies/confused.gif">');

    // Format Dates
    txt = txt.replace(/\d{10}/g, function($0) {
        var d = new Date($0*1000);
        var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
        return "" + months[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear() + ", " + (d.getHours()%12) + ":" + d.getMinutes() + " " + (d.getHours()<12 ? 'AM' : 'PM');
    });

    // Update the preview box
    $('.preview').html(txt);
}

Это переворачивает почти все мои теги bbcode. Тег цитаты проблематичен, поскольку иногда он не переворачивает вложенные теги цитаты или не анализирует содержимое внутренних тегов цитаты.

Если кто-то может предложить решение, я был бы очень благодарен. Спасибо!


person Mark Anderson    schedule 10.03.2010    source источник
comment
Ваш BBCode не является обычным языком и поэтому не может быть проанализирован с помощью регулярного выражения. Напишите синтаксический анализатор, который отслеживает открытые и закрытые теги, чтобы найти совпадающие пары. При этом вы даже можете обнаружить синтаксические ошибки (неправильное вложение, отсутствие открывающего/закрывающего тега и т. д.).   -  person Gumbo    schedule 11.03.2010
comment
То же самое верно и для HTML: сопоставлять открытые теги, кроме автономных тегов xhtml"> stackoverflow.com/questions/1732348/   -  person Marcel Korpel    schedule 11.03.2010


Ответы (1)


Три решения:

  1. Написать парсер. Это даст наилучшее решение, но требует нетривиальных усилий.

  2. Найдите библиотеку разбора BBCode. Вероятно, не уступает по качеству №1 и значительно проще.

  3. Добавьте отрицательный прогноз внутри каждого регулярного выражения тега и непрерывно применяйте до тех пор, пока не будет найдено совпадение. Например.:

    \[quote\]((?:[^](?!\[quote\]))*?)\[\/quote\]
    

    Это зафиксирует внутреннюю цитату, а затем, после ее замены, внешнюю. Не так чисто, как два других, но, вероятно, самое быстрое решение.

person Max Shawabkeh    schedule 10.03.2010
comment
Я настоятельно рекомендую № 2: существующая библиотека, вероятно, будет содержать меньше ошибок, чем ваша собственная, по крайней мере, в первую очередь. - person Marcel Korpel; 11.03.2010