UNPKG

1.99 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>math.js | custom separators</title>
6 <style>
7 body, input, select {
8 font: 11pt sans-serif;
9 }
10 input, select, th, #result {
11 padding: 5px 10px;
12 }
13 th {
14 text-align: left;
15 }
16 </style>
17
18 <script src="../../lib/browser/math.js"></script>
19</head>
20<body>
21
22<p>
23 This code example shows how to apply custom separators for function arguments and decimal separator.
24</p>
25
26<table>
27 <tr>
28 <th>Argument separator</th>
29 <td>
30 <input id="args" type="text" value=";">
31 </td>
32 </tr>
33 <tr>
34 <th>Decimal separator</th>
35 <td>
36 <input id="decimals" type="text" value=",">
37 </td>
38 </tr>
39 <tr>
40 <th>Expression</th>
41 <td>
42 <input id="expression" type="text" value="sum(3,4; 2,1; 2,0)" />
43 <input id="evaluate" type="button" value="Evaluate">
44 </td>
45 </tr>
46 <tr>
47 <th>Result</th>
48 <td id="result"></td>
49 </tr>
50</table>
51
52<script>
53 // pointers to the input elements
54 const expression = document.getElementById('expression')
55 const evaluate = document.getElementById('evaluate')
56 const result = document.getElementById('result')
57 const args = document.getElementById('args')
58 const decimals = document.getElementById('decimals')
59
60 // attach event handler to the button
61 evaluate.onclick = function () {
62 // replace the custom separators in the input with the default separators
63 const expr = expression.value
64 .replace(new RegExp('\\' + decimals.value + '|\\' + args.value, 'g'), function (match) {
65 return match === decimals.value ? '.': ','
66 })
67
68 // do the actual evaluation
69 const res = math.evaluate(expr)
70
71 // replace the default separators in the output with custom separators
72 result.innerHTML = res.toString()
73 .replace(new RegExp(',|\\.', 'g'), function (match) {
74 return match === '.' ? decimals.value : args.value
75 })
76 }
77</script>
78
79
80</body>
81</html>
\No newline at end of file