simple-squiggle/node_modules/mathjs/examples/browser/custom_separators.html

81 lines
1.9 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>math.js | custom separators</title>
<style>
body, input, select {
font: 11pt sans-serif;
}
input, select, th, #result {
padding: 5px 10px;
}
th {
text-align: left;
}
</style>
<script src="../../lib/browser/math.js"></script>
</head>
<body>
<p>
This code example shows how to apply custom separators for function arguments and decimal separator.
</p>
<table>
<tr>
<th>Argument separator</th>
<td>
<input id="args" type="text" value=";">
</td>
</tr>
<tr>
<th>Decimal separator</th>
<td>
<input id="decimals" type="text" value=",">
</td>
</tr>
<tr>
<th>Expression</th>
<td>
<input id="expression" type="text" value="sum(3,4; 2,1; 2,0)" />
<input id="evaluate" type="button" value="Evaluate">
</td>
</tr>
<tr>
<th>Result</th>
<td id="result"></td>
</tr>
</table>
<script>
// pointers to the input elements
const expression = document.getElementById('expression')
const evaluate = document.getElementById('evaluate')
const result = document.getElementById('result')
const args = document.getElementById('args')
const decimals = document.getElementById('decimals')
// attach event handler to the button
evaluate.onclick = function () {
// replace the custom separators in the input with the default separators
const expr = expression.value
.replace(new RegExp('\\' + decimals.value + '|\\' + args.value, 'g'), function (match) {
return match === decimals.value ? '.': ','
})
// do the actual evaluation
const res = math.evaluate(expr)
// replace the default separators in the output with custom separators
result.innerHTML = res.toString()
.replace(new RegExp(',|\\.', 'g'), function (match) {
return match === '.' ? decimals.value : args.value
})
}
</script>
</body>
</html>