JSFiddle - React, Tailwind, and code Playground

by epinapala

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);

/**
 * 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 str.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);
}