ParseWiki.js - A JavaScript Wiki Parsing Engine

Like most developers, I have a list of applications or pet project that address various scenarios I would like to develop or find solutions for.  While I have to admit my pet project list seems to grow more than shrink, I do knock things out on occasion.  One of these items was a wiki parsing engine.  Now there are plenty of wiki-based solutions out there; however, I wasn't able to find one that allowed me to bring just the parsing engine into my own solution.  Most of the solutions that are available are full solutions that include the parsing engine, data store, and full UI.  Sure they can be tweaked a bit but having a simple tool that will allow me to mark up some text in a <textarea> field and then preview it is usually too simple for these solutions.  WikiPlex is a great solution to fill this gap on the server side and recommend everyone to check it out; however, it got me wondering if a JavaScript solution could be done for client side parsing.  This is when I started to work on ParseWiki.js.

 

An Overview of the Wiki Parsing Engine:

After looking at a lot of wiki solutions and engines, almost all of them use Regular Expressions to parse the raw text.  I decided to do a similar approach since JavaScript has a pretty good RegEx system.  Since the focus is to just build the engine and not a full solution like Luminotes or Tiddlywiki, I needed to look at the bare minimum items to parse in my engine.  Below is a list of what version 1 of ParseWiki.js has:

• Headings 1-6
• bold/italic/underline
• horizontal rule
• Named Anchors and Internal Links
• External Links
• Ordered and Unordered Lists (1 level only right now)

 

The Syntax:

I've used a lot of wiki platforms from Wikia to CodePlex to Luminotes and SharePoint.  Of the differences in wiki markup each provide, I found it that CodePlex's engine provided the easiest/fastest to use for me.  Because of this, I based a lot of my syntax on such as well. 

• Headings:
  ! Heading1 text
  !! Heading2 test 
  !!! Heading3 text
  ect.
  
• Bold:
  *Bolded Text*
  
• Italic:
  _Italicized Text_
  
• Underline:
  +Underlined Text+
  
• Horizontal Rule:
  ---- (4 hyphens)
  
• Named Anchors:
  [a:Anchor Name]
  
• Internal Link:
  [goto:Anchor Name|Link Text]
  
• External Link:
  [url:External Url|Link Text]
  
• Unordered Lists:
  * Item 1
  * Item 2
  * Item 3
  * etc.
  
• Ordered Lists:
  # Item 1
  # Item 2
  # Item 3
  # etc.

 

Using ParseWiki.js:

Since I wanted a simple wiki engine, using ParseWiki is very simple.

1. Download ParseWiki.js
2. Add it to your Html page
3. Have your own JavaScript Code pass the marked up text into the ParseWiki() Method
4. Do with the outputted text as wish.

In the example files provided with the ParseWiki.js download, a full implementation has been provided where I pass the contents of a <textarea> field into the ParseWiki() method and then output it into a <div> to preview.

 

Download the Code with Example:

 

Download ParseWiki.js and Examples: Link

 

Next Steps:

What's next on this pet project?  Well, there are a few things that I need to work on in order to make it better and provide more features.  There's a number of syntax features that I still need to add to the engine (obvious ones are multi-level lists and escape syntax).  Until that time, feel free to play around and with it and let me know what you think.