Custom separators

File: custom_separators.html (click for a live demo)

<!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="https://unpkg.com/mathjs@12.4.1/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>
Fork me on GitHub