JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<h1>Result With No Line Breaks</h1>
<div id="result"></div>

<h1>Matches With No Line Breaks</h1>
<div id="match"></div>

<h1>Result With Line Breaks</h1>
<div id="result2"></div>

<h1>Matches With Line Breaks</h1>
<div id="match2"></div>

CSS

div {
    background: lightgray;
    padding: 1em;
    margin-bottom: 1em;
}

JavaScript

// regex pattern
var myRegexp = new RegExp("^===([^=]+)===*?[\s ]*?\n", "gim");

// readme with out new line characters
var readme = "=== This is a Header === And some other stuff ";

// run the replace
result = readme.replace(myRegexp, "#$1#\n");

// show the result
$("#result").html($("#result").html() + result + "<br>");

// show all matches
var match = myRegexp.exec(readme);
if( match != null ){ 
    for(var i in match) {
        $("#match").html($("#match").html() + match[i] + "<br/>");
    }
} else {
    $("#match").html("no matches");    
}



// readme with a new line character
var readme_n = "=== This is a Header === \n\n And some other stuff";

// run the replace 
result_n = readme_n.replace(myRegexp, "#$1#\n");

// show the result
$("#result2").html($("#result2").html() + result_n + "<br>");

// show all matches
var match_n = myRegexp.exec(readme_n);
if( match_n != null ){ 
    for(var i in match_n) {
        $("#match2").html($("#match2").html() + match_n[i] + "<br/>");
    }
} else {
    $("#match2").html("no matches");    
}