jQuery to change DOM element

Question

I am testing a jQuery Library MathJax which gets Mathematics code in Latex format, and shows Mathematics expression in html.

MathJax works - two ways - \ [ latex-code \ ] and \ ( latex-code \ ), in this code, jquery appends <p> tag, but I can not append, either \ ( \ ) or \ [ \ ] which are latex delimiters.

I want the textbox has only the latex command, not the delimiters, which will be good for handling and testing latex, basically web-math testing.

Can anyone, with jquery knowledge help this? This does require, some DOM manipulation.

Objective Textbox should not contain any delimiters, the delimiters should be anyway added by other methods.

Bonus: 1 Can, button be removed - the jquery is to be updated on every input, and tries to render in every change of input

Bonus: 2(can brake, not necessary) If possible, can there be two line, and after Enter inside textbox, the two expressions, get \\ delimiter between them, which will show Mathematics expression, in next line

like: \sin(x) \ \tan(x) {two backslash between \sin(x), \tan(x) commands}

 $("#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

I think the easiest way to accomplish this is to move the \( and \) outside of the input field and into #qPreview instead. Additionally, you need to escape the \ in the prefix/postfix with another \ . This keeps your input value as just \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>