JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<input id="formulaInput"/>
<p>Result:</p>
<div class="result-container">
    <span id="formulaResult"></span>
</div>

CSS

body {
    font-family: sans-serif;
}

.result-container {
    border: 1px solid gray;
    padding: 10px;
    
}

JavaScript

var $formulaInput = $("#formulaInput");
var $formulaResult = $("#formulaResult");
var folmulaValue = $formulaInput.val();
var validFormulaRegEx = /^[a-z|A-Z|\d*]*$/;
var formulaRegEx = /(\d+)/gi;

var makeFormulaHtml = function (formulaValueString) {
    return formulaValueString.replace(formulaRegEx, "<sub>$1</sub>");
};

var updateFormulaResult = function(formulaValueString) {
    var formulaResultHtml = makeFormulaHtml(formulaValueString);
    $formulaResult.html(formulaResultHtml);
};

$formulaInput.on("keypress", function(e) {
    var character = String.fromCharCode(e.keyCode);
    var isValid = validFormulaRegEx.test(character);
    if (!isValid) {
        console.log("preventDefault");
        e.preventDefault();
    }
});

$formulaInput.on("keyup", function() {
    var newFormulaValue = $formulaInput.val();
    if (folmulaValue !== newFormulaValue) {
        formulaValue = newFormulaValue;
        updateFormulaResult(formulaValue);
    }
});