JSFiddle - React, Tailwind, and code Playground

by alexdickson

HTML

<textarea></textarea><button type="submit">valid?</button>

<p>In reality these will <strong>not</strong> be user entered</p>

card1
<input type="text" name="card1" id="card1" value="1" />
card2
<input type="text" name="card2" id="card2" value="2" />

<div id="result">Result</div>

JavaScript

var textarea = document.getElementsByTagName('textarea')[0],
    placeholders = ['CARD1', 'CARD2'];

document.getElementsByTagName('button')[0].onclick = function() {

    var value = textarea.value;

    // Strip placeholders
    var placeholderStripped = value.replace(new RegExp(placeholders.join('|'), 'g'), '');
    console.log(placeholderStripped);
    var safe = placeholderStripped.match(/^[\d\+\-\/\*\(\)]+$/);

    if (safe == null) {

        alert('Not a valid equation');
        return;

    }

    for (var i = 0, placeholdersLength = placeholders.length; i < placeholdersLength; i++) {
        value = value.replace(new RegExp(placeholders[i], 'g'), document.getElementById(placeholders[i].toLowerCase()).value);
    }

    document.getElementById('result').innerHTML = eval(value);

}