JSFiddle - React, Tailwind, and code Playground

by stevenschemers

HTML

<span class="readme">Whats up, here's a fraction. [math][top]1[/top][line][bot]2[/bot][/math] Whats up, here's a fraction.&nbsp;&nbsp;Hello? Whats up, here's a fraction.&nbsp;[math][top]1[/top][line][bot]2[/bot][/math] Whats up, here's a fraction.</span>

CSS

.readme{font-size:16px;

    line-height:45px;

    vertical-align:middle;

    font-family:Arial, Helvetica, sans-serif;}



.container{    position:relative;

            width:15px;}

.containme{    position:absolute;

            top:-21px;

            left:-10px;

            width:20px;

            vertical-align:top;

            text-align:center;}

.containme2{position:absolute;

            top:2px;

            left:-10px;

            width:20px;

            text-align:center;}

.borderme{    border-collapse:collapse;

            border-bottom:1px solid #000;

            position:absolute;

            top:-33px;

            left:-8px;

            width:15px;

            text-align:center;}

JavaScript

$(document).ready(function() {    

// Using just replace
    var text = $('body').text();
$("body").html(text.replace(/\[math\]/g,'<span class="container">').replace(/\[\/math\]/g,'</span>'));

    var textt = $('body').text();
$("body").html(textt.replace(/\[top\]/g,'<div class="containme">').replace(/\[\/top\]/g,'</div>'));
    
    var textl = $('body').text();
$("body").html(textl.replace(/\[line\]/g,'<div class="borderme">&nbsp;</div>'));
    
    var textb = $('body').text();
$("body").html(textb.replace(/\[bot\]/g,'<div class="containme2">').replace(/\[\/bot\]/g,'</div>'));
});