JSFiddle - React, Tailwind, and code Playground

HTML

<div class="editable" contenteditable=true>Write fracs here!<div>

CSS

.editable{
    height:200px;
    width:200px;
   
}

JavaScript

function transformFracs() {
 //Grab digits with in {} recording only the numbers
 var regex = /{(\d+)}\|{(\d+)}/;
 //Cache for performance!
 var div = $(this);
 //Replace using html fraction notaion
 var afterReplace = div.html().replace(regex,
     "<sup>$1</sup>" +
     "&frasl;" +
     "<sub>$2</sub>")
 //Replace content of original div
 div.html(afterReplace);
 }
$(".editable").blur(transformFracs);