JSFiddle - React, Tailwind, and code Playground

by ysis81

HTML

<div align="CENTER" class="mathdisplay"><a name="eq153"></a>

    <!-- MATH \begin{equation} \mathbf{e'_{k}}\otimes\mathbf{e'_{l}}=(A^{i}_{k}\,\mathbf{e_{i}})\otimes(A^{j}_{l}\,\mathbf{e_{j}})=(A^{i}_{k}\,A^{j}_{l})\,\mathbf{e_{i}}\otimes\mathbf{e_{j}} \end{equation} -->
    <table class="equation" cellpadding="0" width="100%" align="CENTER">
        <tr valign="MIDDLE">
            <td nowrap align="CENTER"><span class="MATH"><img width="361" height="43" align="MIDDLE" border="0" src="img832.gif" alt="$\displaystyle \mathbf{e'_{k}}\otimes\mathbf{e'_{l}}=(A^{i}_{k}\,\mathbf{e_{i}})...
...l}\,\mathbf{e_{j}})=(A^{i}_{k}\,A^{j}_{l})\,\mathbf{e_{i}}\otimes\mathbf{e_{j}}$"></span>

            </td>
            <td nowrap class="eqno" width="10" align="RIGHT">(<span class="arabic">3</span>.<span class="arabic">32</span>)</td>
        </tr>
    </table>
</div>
<p>
    <!-- MATH \begin{displaymath} \begin{array}[b]{lcl} (\mathbf{x}+\mathbf{y})\otimes\mathbf{z}&=&(x^{i}\,\mathbf{e_{i}}+y^{i}\,\mathbf{e_{i}})\otimes z^{k}\,\mathbf{e_{k}}=(x^{i}+y^{i})\,\mathbf{e_{i}}\otimes z^{k}\,\mathbf{e_{k}}=(x^{i}+y^{i})\,z^{k}\,(\mathbf{e_{i}}\otimes \mathbf{e_{k}}) \\ &=&x^{i}\,z^{k}\,(\mathbf{e_{i}}\otimes \mathbf{e_{k}})+y^{i}\,z^{k}\,(\mathbf{e_{i}}\otimes \mathbf{e_{k}})=\mathbf{x}\otimes \mathbf{z}+\mathbf{y}\otimes \mathbf{z} \end{array} \end{displaymath} -->
</p>
<div align="CENTER" class="mathdisplay">
    <img width="669" height="53" border="0" src="img773.gif" alt="\begin{displaymath}\begin{array}[b]{lcl}
(\mathbf{x}+\mathbf{y})\otimes\mathbf{z...
...f{x}\otimes \mathbf{z}+\mathbf{y}\otimes \mathbf{z}
\end{array}\end{displaymath}">
</div>
<p>De m&#234;me qu'on a d&#233;fini les espaces vectoriels, au cours du premier chapitre, uniquement &#224; partir des propri&#233;t&#233;s op&#233;ratoires entre vecteurs, on va d&#233;finir le produit tensoriel de deux espaces vectoriels &#224; partir des propri&#233;t&#233;s pr&#233;c&#233;dentes.
    <br>Pour cela, donnons-nous deux...

JavaScript

var walker;
var comments;
var div_span;

[].forEach.call(document.querySelectorAll("div.mathdisplay > img"), function (img) {
        img.parentNode.parentNode.removeChild(img.parentNode);
    });

    [].forEach.call(document.querySelectorAll("div.mathdisplay"), function (div_tag) {
        walker = document.createTreeWalker(
        div_tag,
        NodeFilter.SHOW_COMMENT);
        if (walker.nextNode() !== null) {
            comments = walker.currentNode.textContent;
            comments = comments.replace("MATH", "");
            div_span = div_tag.querySelector("table.equation span.MATH");
            if (div_span != null)
            div_span.innerHTML = comments;
        }
    });

    [].forEach.call(document.querySelectorAll("p"), function (p_tag) {
        walker = document.createTreeWalker(
        p_tag,
        NodeFilter.SHOW_COMMENT);
        if (p_tag.innerHTML.match(/^\s*<!--/)) {
            comments = walker.nextNode().textContent;
            if (comments) {
                comments = comments.replace("MATH", "");
                p_tag.innerHTML = comments;
            }
        }
    });

    var span_text;
    var img_text;
    var number_span_text;
    var span_convert;
    var shift = 0;

    [].forEach.call(document.querySelectorAll("span.MATH"), function (span) {
        if (span.innerHTML.match(/<img/i)) {
            span_text = span.innerHTML.split(/<img[^>]*>/gi);
            number_span_text = span_text.length;
            span_convert = "";

            [].forEach.call(span.querySelectorAll("img"), function (img) {
                img_text = img.getAttribute("alt");
                img_text = img_text.replace(/\\displaystyle /g, "");
                span_convert = span_convert + span_text[shift] + img_text;
                shift++;
            });
            shift = 0;
            span.innerHTML = span_convert;
        };

    });