Numeral i18n (JS)

by Manuel Souto Pico

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arabic Numerals</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Number i18n (JS)</h1>
    <table>
    <tr>
      <th>Figure</th>
      <th>Description</th>
    </tr>
    <tr>
      <td class="figure">3,230</td>
      <td>Original Western Arabic numerals, rendered as Indic Arabic numerals by the <a href=" https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat">Intl.NumberFormat Javascript object</a>.</td>
    </tr>
    <tr>
      <td class="figure">٣,٢٣٠</td>
      <td>Original Indic Arabic numerals, rendered as such.</td>
    </tr>
    </table>
    <p> The figures in the two rows should look alike.</p>
</body>
</html>

CSS

.figure {
  font-size: 3em;
  font-weight: bold;
}

table, table td, table th {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 10px;
}

JavaScript

function replaceTextContent(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    node.textContent = node.textContent.replace(/(?<=\b|\p{Zs}|^)\d+(?<=\b|\p{Zs}|$)/g, function(match) {
      return new Intl.NumberFormat('ar-EG').format(match);
    });
  } else {
    node.childNodes.forEach(replaceTextContent);
  }
}

document.body.childNodes.forEach(replaceTextContent);