javascript - 在内容可编辑的 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);

查看小提琴来玩弄它。