JSFiddle - React, Tailwind, and code Playground

by MartijnR

HTML

<div class="md">
    A [md link](http://enketo.org) 
    _emphasis md_  
    <span data-value="/data/_node/_node">_hey I'm in a child!_
        <span data-value="/data/_node/_node">_hey I'm in a child of a child!_</span>
    </span>
    *emphasis md* 
    __strong emphasis md__ 
    **strong emphasis md**
</div>

JavaScript

(function ($) {
    "use strict";
    $.fn.markdownToHtml = function () {
        return this.each(function () {
            var $childStore = $('<div/>');
            $(this).children().each(function (index) {
                var name = '$$$' + index;
                $(this).clone().markdownToHtml().appendTo($childStore);
                $(this).replaceWith(name);
            });
            var html = $(this).html();
            html = html.replace(/__([^\s].*[^\s])__/gm, "<strong>$1</strong>");
            html = html.replace(/\*\*([^\s].*[^\s])\*\*/gm, "<strong>$1</strong>");
            html = html.replace(/_([^\s].*[^\s])_/gm, '<em>$1</em>');
            html = html.replace(/\*([^\s].*[^\s])\*/gm, '<em>$1</em>');
            //only replaces if url is valid (worthwhile feature?)
            html = html.replace(/\[(.*)\]\(((https?:\/\/)(([\da-z\.\-]+)\.([a-z\.]{2,6})|(([0-9]{1,3}\.){3}[0-9]{1,3}))([\/\w \.\-]*)*\/?[\/\w \.\-\=\&\?]*)\)/gm, '<a href="$2">$1</a>');
            html = html.replace(/\n/gm, '<br />');
            $childStore.children().each(function(i){
                var regex = new RegExp('\\$\\$\\$' + i);
                html = html.replace(regex, $(this)[0].outerHTML);
            });
            $(this).text('').append(html);
        });
    };
})(jQuery);


$('.md').markdownToHtml();