Parsing Wiki markup in Javascript using regex

Question

Hi folks,

I'm attempting to parse some Wiki-style markup using the Javascript Creole Wiki Markup Parser as found here. I'm attempting to extend the parser to parse div tags like so:

Markup: << any_content_here <<
HTML: <div class="left">content</div>

Markup: >> any_content_here >>
HTML: <div class="right">content</div>

Markup: ^^ any_content_here ^^
HTML: <div class="horz">content</div>

The parser uses regular expressions to parse the markup but regex is definitely not my strong point, and as the js file has virtually no comments I'm finding it particularly difficult to edit. I've posted on the guy's blog asking for some help with this but as the post is about 2 years old I'm not expecting to hear back anytime soon...

Any help with customising this, or if someone could point out a javascript parser that already supports div's, it would be most appreciated.

Answer 1

If you don't care about nesting, you don't even need a regex. Simply replace "<<" with "<div class='left'>" and so on.

To allow for nesting, you will have to (1) change the markup so the end is different from the start (e.g. <L>content</L>) and (2) run a regex as many times as there are levels. The regex (for the left div) would be:

<L>(((?!</?L>).)*)</L>

And the replacement string:

<div class="left">$1</div>

Here's a function that will take care of parsing all levels:

function parseLeft(markup) {
  var regex = /<L>(((?!<\/?L>).)*)<\/L>/g;
  out = markup.replace(regex, '<div class="left">$1</div>');
  if (out.length == markup.length) {
    return out;
  } else {
    return parseLeft(out);
  }
}

Example in action:

> parseLeft('<L> Outer div <L>inner div</L>outer again </L>');
<div class="left"> Outer div <div class="left">inner div</div>outer again </div>