Fraction rendering in JavaScript

by jrunning

HTML

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&amp;dummy=.js"></script>
<span class="frac">1/2</span>
<span class="frac">3/4</span>
<span class="frac">5/8</span>
<span class="frac">7/16</span>

JavaScript

var numers = "⁰¹²³⁴⁵⁶⁷⁸⁹",
    denoms = "₀₁₂₃₄₅₆₇₈₉"

    function parseFrac(str) {
        return str.split('/')
    }

    function formatFrac(numer, denom) {
        numer = numer.replace(/[0-9]/g, function (chr) {
            return numers[parseInt(chr)]
        })
        denom = denom.replace(/[0-9]/g, function (chr) {
            return denoms[parseInt(chr)]
        })
        return numer + "\u2044" + denom;
    }

    function formatFracMathML(numer, denom) {
        return '<math xmlns="http://www.w3.org/1998/Math/MathML"><mfrac>' +
            "<mrow><mn>" + numer + "</mn></mrow>" +
            "<mrow><mn>" + denom + "</mn></mrow>" +
            "</mfrac></math>"
    }

$(function() {
    $('.frac').each(function () {
        var str = this.textContent
        numer_denom = parseFrac(str)
        frac = formatFrac.apply(this, numer_denom)
        this.innerHTML = frac
    })
})