JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tbody>
<tr><th id="out1"><code>123</code></th> <td>is <output>being processed…</output></td></tr>
<tr><th id="out2"><code>"123"</code></th> <td>is <output>being processed…</output></td></tr>
<tr><th id="out3"><code>null</code></th> <td>is <output>being processed…</output></td></tr>
<tr><th id="out4"><code>false</code></th> <td>is <output>being processed…</output></td></tr>
<tr><th id="out5"><code>true</code></th> <td>is <output>being processed…</output></td></tr>
<tr><th id="out6">nothing</th> <td>is <output>being processed…</output></td></tr>
</tbody>
</table>
CSS
:root {
font-family: sans-serif;
}
output {
font-family: monospace;
}
mark {
background: #FF7;
border: 1px solid #BB2;
border-radius: 2px;
box-shadow: 2px 2px 4px rgba(0,0,0, 0.5);
margin: -1px;
}
JavaScript
$("#out1+* output").html(isNumerical(123));
$("#out2+* output").html(isNumerical("123"));
$("#out3+* output").html(isNumerical(null));
$("#out4+* output").html(isNumerical(false));
$("#out5+* output").html(isNumerical(true));
$("#out6+* output").html(isNumerical());
function isNumerical(value) {
var isNum = !isNaN(value);
return isNum ? "<mark>numerical</mark>" : "not numerical";
}