Javascript Wikidot Syntax Rendering
I have been investigating the syntax engine (Text_Wiki) used in Wikidot recently and found in the Open Source Wikidot, the Parser and the Render"er". I tried to move the Regular Expressions in the parser together with the output in the Render"er" to create a Javascript based Wikidot Syntax parser.
At the moment, the below is what I have done so far. However, because JS regular expression isn't the same as PHP. Some modifiers don't work.
function parse(){ function rep(match,replace){ var str=document.getElementById('wiki').innerHTML; document.getElementById('wiki').innerHTML=document.getElementById('wiki').innerHTML.replace(match,replace); } rep(/\n/gi, "<br />"); rep(/\[\[button\s+([a-z0-9\-_]+)(?:\s+(.+?))?\]\]/i,"<a href='#'>WDButton::$1</a>"); rep(/\*\*(.*?)\*\*/gi,"<span style=\"font-weight: bold;\">$1</span>"); rep(/--(.*?)--/gi,"<span style=\"text-decoration: line-through;\">$1</span>"); rep(/\{\{(.*?)\}\}/gi,"<pre>$1</pre>"); rep(/\^\^(.*?)\^\^/gi,"<sup>$1</sup>"); rep(/,,(.*?),,/gi,"<sub>$1</sub>"); rep(/\[\[span(.*)?\]\](.*?)\[\[\/span\]\]/mi,"<span $1>$2</span>"); rep(/\[\[table(.*)?\]\](.*?)\[\[\/table\]\]/mi,"<table$1>$2</table>"); rep(/\[\[row(.*)?\]\](.*?)\[\[\/row\]\]/mi,"<tr$1>$2</tr>"); rep(/\[\[cell(.*)?\]\](.*?)\[\[\/cell\]\]/mi,"<th$1>$2</th>"); rep(/\[\[size ([a-zA-Z]+|.*?(%|em|px))\]\](.*?)\[\[\/size\]\]/gi,"<span style=\"font-size: $1\">$3</span>"); rep(/\#\#([a-zA-Z]+)\|(.+?)\#\#/,"<span style=\"color: $1;\">$2</span>"); rep(/\#\#([0-9A-Fa-f]{6})\|(.+?)\#\#/,"<span style=\"color: #$1;\">$2</span>"); rep(/\/\/(.*?)\/\//gi,"<span style=\"font-style: italic;\">$1</span>"); rep(/__(.*?)__/gi,"<span style=\"text-decoration: underline;\">$1</span>"); rep(/\[\[image ([^\"]*?)\]\]/gi,"<img src=\"$1\" />"); rep(/^\* (.*?)$/gi, "<li>$1</li>"); rep(/\[\[image ([^\"]*?)\]\]/gi,"<img src=\"$1\" />"); rep(/\[([^\]]+) ([\s\S]*?)\]/gi,"<a href=\"$1\">$2</a>"); rep(/\[code\]([\s\S]*?)\[\/code\]/gi,"<pre>$1</pre> "); rep(/(\[\[# )([-_A-Za-z0-9.%]+?)(\]\])/i,"<a name=\"$2\"></a>"); rep(/\(\(bibcite\s([a-z0-9]+)\)\)/i,"Not Yet Supported"); rep(/ _\n/,"<br />\n"); rep(/\n\= (.*?)\n/,'<p style="text-align: center;">$1</p>'); }
I have been trying to parse a chunk of basic Wikidot syntax examples from the Wikidot Themes site and this is what comes out:
EDIT: Forums don't show HTML.. :S
Kenneth Tsang (@jxeeno)





