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>

Could you clarify the functionality you're looking to have? I think the details of MathJax may be unnecessary, if all you are looking for is certain text/DOM to be moved or edited. Specifically, when you say "Textbox should not contain any delimiters", can you give an example of the input (presumably `\(\frac{a}{b}\)`) and your expected output (I'm guessing here, but maybe `frac{a}{b}`)? — WOUNDEDStevenJones, Aug 28 '20 at 22:12
yes - expectation is - `\frac{a}{b}` - I do not want to get rid of - slash of `frac`, this is latex command, which should remain — , Aug 29 '20 at 01:11

WOUNDEDStevenJones · Accepted Answer · 2020-08-29T03:24:56.863

0

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>

edited Aug 29 '20 at 03:24

answered Aug 29 '20 at 03:12

WOUNDEDStevenJones

5,150
6
41
53

Can there be working example without button? but your code does not work with this example `\(\require{color}\)\[\color{cyan}{sin(x)}_{\color{red}{\tan(x)}}\]` - well in place of square bracket, there can be parentheses – Aug 29 '20 at 03:20
Sure, updated. There's an `input` event (https://stackoverflow.com/questions/17384218/jquery-input-event) that will update on every input change. I also moved your MathJax script above jQuery so when the initial jQuery `.trigger('input')` on load happens, MathJax is already loaded. – WOUNDEDStevenJones Aug 29 '20 at 03:27
ha just trying to spread the knowledge. For your example of `\(\require{color}\)\[\color{cyan}{sin(x)}_{\color{red}{\tan(x)}}\]`, could you again show what you'd expect to see in the `input` for this? – WOUNDEDStevenJones Aug 29 '20 at 03:44
1

this particular example works straight - in the previous textbox - as the code use package - `color` - leave, all problems need not to solve - MathJax is not complete either, it is just for showing Maths - so many missing commands(which are given in LaTex by package though) - to Provide all examples by MathJax would be overkill though, cause it's just Math renderer, not actual latex - - for the given example - - input can not be replaced like previous example - where `\( \)` delimiter was blank, and appended, but here delimiter is already present - after package - `\[ \]`- this is delimiter – Aug 29 '20 at 12:28

jQuery to change DOM element

1 Answers1