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.

Book nowModern Universal React with Next.js

Stop worrying about configuration, and complex codebases: Next.js makes SSR with React easy. Book your masterclass today.

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.

Want more?

Posts, web development learnings & insights, exclusive workshop and training discounts and more, direct to your inbox.

I won't send you any spam, and you can unsubscribe at any time. Powered by ConvertKit