JSFiddle - React, Tailwind, and code Playground
HTML
<textarea id="wikitext" cols="20" rows="10">* hsdhdashdas
sdhjkasdhkjsad
* jkfhsjdjkhjksdh
saldkjsdlk</textarea>
<br>
<input id="btnsave" type="button" value="Preview HTML" />
<br>
<hr>
<div id="html"></div>
JavaScript
document.getElementById("btnsave").addEventListener("click", parseWiki, false);
var test = '<blockquote><p>There's something happening here.</p></blockquote><ul><li>What it is ain't exactly clear</li><li>B</li></ul><ol><li>Numbers</li><li>numbers</li></ol><p><strong>Thinking.</strong></p><table border="1" cellpadding="1" cellspacing="1" style="width: 500px;"><tbody><tr><td>Tables?</td><td>Yes please</td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></tbody></table><p> </p>';
/**
* Lists need to be recursively parsed. So the below function is used
* to recursively convert wiki markup to html.
* @param {String} str
* @returns {String}
*/
function parseLists(str)
{
return test.replace(/(?:(?:(?:^|\n)[\*#].*)+)/g, function (match) {
var listType = match.match(/(^|\n)#/) ? 'ol' : 'ul';
match = match.replace(/(^|\n)[\*#][ ]{0,1}/g, "$1");
match = parseLists(match);
return '<'
+ listType + '><li>'
+ match.replace(/^\n/, '').split(/\n/).join('</li><li>')
+ '</li></' + listType
+ '>';
});
}
function parseWiki() {
var textArea = document.getElementById('wikitext');
var div = document.getElementById('html');
div.innerHTML = parseLists(textArea.value);
}