In building the [jQuery API browser](/jquery-api/), since the source of the API comes from the wiki pages over at [docs.jquery.com](http://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.

[![](/images/terminal-600.jpg)](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[$49 - only from this link](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

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](/downloads/wiki2html.js)

[Try out a live demo](/demo/wiki2html.html)

Example usage[](#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[](#notes)

Any feedback or bugs, let me know.

Published 1-Apr 2008 under #code & #javascript & #project & #wiki. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/wiki-to-html-using-javascript.md)

Comments

Lock Thread

Login

Add Comment[M ↓   Markdown]()

[Upvotes]()[Newest]()[Oldest]()

?

Anonymous

0 points

12 years ago

Crap. Just change /pre into /blockquote

?

Anonymous

0 points

12 years ago

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.

?

Anonymous

0 points

14 years ago

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

?

Anonymous

0 points

14 years ago

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

?

Anonymous

0 points

15 years ago

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

?

Anonymous

0 points

15 years ago

Hi, seems this is not working with DokuWiki syntax,

?

Anonymous

0 points

15 years ago

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.

?

Anonymous

0 points

15 years ago

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

?

Anonymous

0 points

15 years ago

I recommend looking into the wikicreole parser implemented by Chris Purcell and then modified by Ivan Fomichev at [http://www.ivan.fomichev.na…​;](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!

?

Anonymous

0 points

15 years ago

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.

?

Anonymous

0 points

15 years ago

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

  2. hello

  3. lala

  4. ok

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

?

Anonymous

0 points

16 years ago

@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.

?

Anonymous

0 points

16 years ago

Very cool, much better than others such as TinyMCE - how I loathe that!

?

Anonymous

0 points

16 years ago

@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.

?

Anonymous

0 points

16 years ago

You gotta try out Python Remy. You get to use awesome modules like [Beautiful Soup](http://www.crummy.com/software/BeautifulSoup/) for parsing pages.

![](/images/no-user.svg)

Paul Irish

0 points

16 years ago

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. :)

[Commento](https://commento.io)