Wiki to HTML using JavaScript

In building the jQuery API browser, since the source of the API comes from the wiki pages over at docs.jquery.com, I had to handle some wiki parsing and convert it to HTML.

However, the more I browsed the API, the more I realised there were aspects of wiki parsing I had missed.

So I built a (fairly) fully fledged wiki parser in JavaScript.

I’ve not run any serious performance tests, but as simple parsing goes it does the job.

There’s two different modes you can use it – either straight function or extending the String object. Just change the boolean at the top of the script to flip between modes to suit your code.

Download wiki2html.js

Try out a live demo

Example usage

// include the script
var wikiContents = document.getElementById('wiki-content');
wikiContents.innerHTML = wikiContents.innerHTML.wiki2html();

There’s also a simple check method in the script that tests if the content looks like wiki text:

// include the script
var wikiContents = document.getElementById('wiki-content');
if (wikiContents.innerHTML.iswiki()) {
  wikiContents.innerHTML = wikiContents.innerHTML.wiki2html();
}

Notes

  • The wiki conversion is based on Wikipedia’s cheatsheet.
  • It doesn’t support images since the cheatsheet references them from an internal database.

Any feedback or bugs, let me know.

16 Responses to “Wiki to HTML using JavaScript”

  1. I guess it’s also worth noting that this is MediaWiki-specific syntax. (Which means it doesn’t handle Trac wiki, TiddlyWiki, etc…)

    Regardless, congrats on the code.. This will be quite useful.

    (… and OMFG. doubleclick to edit blog comments!!!!! amazing. :)

  2. You gotta try out Python Remy. You get to use awesome modules like Beautiful Soup for parsing pages.

  3. @Paul – darn, I’ve not played with wikis too much, but I had a sneaking suspicion that there was more than one type of format. I’m thinking about whether I can create a simple grammar that can be changed to support different wikis.

    @Yansky – I’m actually thinking about using Python to do some parsing of the jQuery API in to a JSON format for the next version of the API browser.

  4. Very cool, much better than others such as TinyMCE – how I loathe that!

  5. @Chris – if you don’t like TinyMCE (I’m with you on that – I prefer to rely on plain text), you should also look at Markdown. It’s incredibly simple for non-techies to learn.

    I use it for all my blog posts too.

  6. hello,it does not work correctly in IE if i input the string like this
    # hi
    # hello
    # lala
    # ok

    in your demo.
    it shows

    1. hi
    1. hello
    2. lala
    1. ok

    but in firefox it show well.i dont know why it is,and how to correct it ?
    thanks.

  7. .replace(RegEx, function (m, l) { return Something;});

    What Kind of Syntax It is . Really I gone Crazy. Can u Explain me/ Tell me where Can I read/learn about This Syntax.

  8. I recommend looking into the wikicreole parser implemented by Chris Purcell and then modified by Ivan Fomichev at http://www.ivan.fomichev.name/2008/04/javascript-creole-10-wiki-markup-parser.html. I’ve had to tweak it to allow inserting links inside of tables because of the vertical bar used in a link for link text, but other than that it is a very full featured parser. Also, I like the simplified wiki syntax identified at http://www.wikicreole.org/ where they provide a compact cheat sheet image. Great stuff!

  9. Am bakkiyaraj,

    i think u have done a great job, because without any help or use of wiki, u have done a conversion . Its helped me at the right time as well.

    thank you.

    Bakkkiyaraj.M
    hcl

  10. Great work and really useful.
    What I am missing is the —- -Syntax to create a horizontal line and the possibility indenting a line using colons.

  11. Hi, seems this is not working with DokuWiki syntax,

  12. Hi,
    Thanks for putting this excellent code online! I’ve found one error in the code though. In the part that translates blockquotes, it says
    </pre> instead of </blockquote>

    cheers,
    Thor

  13. Try the following content..
    It is not giving expected result…
    Could you plz resolve this?

    == Facts ==

    * Full name: The Democratic People’s Republic of Korea
    * Population: 23.9 million (UN, 2008)
    * Capital: Pyongyang
    * Area: 122,762 sq km (47,399 sq miles)
    * Major language: Korean
    * Major religions: Mainly atheist or non-religious, traditional beliefs
    * Life expectancy: 65 years (men), 69 years (women) (UN)
    * Monetary unit: 1 won = 100 chon
    * Main exports: Minerals and metals, cement, agricultural products
    * GNI per capita: n/a
    * Internet domain: .kp
    * International dialling code: +850

  14. Thank you for your job.
    I found a bug.
    Type
    http://www.google.com
    and press enter key.
    it links to “http://www.google.com[/p]
    or some html code
    Sorry for my poor english..

  15. Great tool, but as Thor Asmund pointed out earlier (in 2009), in your demo you should really change: /pre into /blockquote

    It’s a bug.

  16. Crap. Just change /pre into /blockquote

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight