jQuery 更改 DOM 元素

Question

我正在测试一个 jQuery 库MathJax ，它以 Latex 格式获取数学代码，并以 html 显示数学表达式。

MathJax 的作品 - 两种方式 - \ [ latex-code \ ] 和 \ ( latex-code \ )，在此代码中，jquery 附加<p>标签，但我不能 append，\ ( \ ) 或 \ [ \ ]是 latex 个分隔符。

我希望文本框只有 latex 命令，没有分隔符，这将有助于处理和测试 latex，基本上是网络数学测试。

有 jquery 知识的任何人都可以帮助这个吗？ 这确实需要一些 DOM 操作。

目标文本框不应包含任何分隔符，分隔符无论如何都应通过其他方法添加。

奖励：1可以，按钮被删除 - jquery 将在每次输入时更新，并尝试在每次输入更改时呈现

Bonus: 2(can brake, not necessary)如果可能的话，是否可以有两行，在文本框内输入后，这两个表达式，在它们之间得到\\分隔符，这将在下一行显示数学表达式

像：\sin(x) \\tan(x) {\sin(x), \tan(x) 命令之间的两个反斜杠}

 $("#check").click(function (){ $("#qPreview").empty().append("<p>" + $("#input").val() + "</p>"); MathJax.typeset(["#qPreview"]); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <strong> Type Latex code Here:<br></strong> <input type="text" id=input class="form-control" value="\(\frac{a}{b}\)"> <div id="qPreview"></div> <button id="check">Click</button> </div>

Answer 1

我认为完成此操作的最简单方法是将\(和\)移到输入字段之外并移至#qPreview中。 此外，您需要使用另一个\ \ 这使您的input值保持为\frac{a}{b} 。

 let prefix = "\\("; let postfix = "\\)"; $("#input").on('input', function() { $("#qPreview").empty().append( "<p>" + prefix + $("#input").val() + postfix + "</p>" ); MathJax.typeset(["#qPreview"]); }).trigger('input');

 <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <strong> Type Latex code Here:<br></strong> <input type="text" id="input" class="form-control" value="\frac{a}{b}" autocomplete="off"> <div id="qPreview"></div>