在内容可编辑的div中使用Javascript动态创建分数

Question

我正在开发的是一个网页，允许用户在不使用实际键盘的情况下将数学方程式和短语输入视觉空间。到目前为止，我所拥有的是视觉空间，这是一个令人满意的div标签，以及下面的区域，带有用于将数字和数学符号放入所述div的输入按钮。现在我需要的是允许用户在div中输入分数的一些方法。我想过可能以某种方式使用Javascript进入和退出下标/上标“模式”并将数字堆叠在一起由一条线分隔，然后有一个按钮表示用户已完成在分数中输入数字，但是我对JS的了解非常有限。我该怎么做呢？

Answer 1

这里有解析问题。我使用正则表达式来匹配我选择的预定义模式 laTex风格{DIGIT}|{DIGIT}

 function transformFracs() {
 //Grab digits with in {} recording only the numbers
 var regex = /{(\d+)}\|{(\d+)}/;
 //Cache for performance!
 var div = $(this);
 //Replace using html fraction notaion
 var afterReplace = div.html().replace(regex,
     "<sup>$1</sup>" +
     "&frasl;" +
     "<sub>$2</sub>")
 //Replace content of original div
 div.html(afterReplace);
 }
$(".editable").blur(transformFracs);

查看the fiddle即可使用它。