Search code examples
javascriptreactjsstringescapingmathjax

Escape backslash in math formula String


I use MathJax with React to display math formulas (mathjax-react). I need to extract the formula code from a JSON.

I have this :

import React from 'react'
import { MathComponent } from 'mathjax-react'

function Card({ formula }) {
    return (
         <div>
               <MathComponent tex={String.raw`\int_0^1 x^2\ dx`} />
         </div>
    )
}

Instead I want to insert the formula :

<MathComponent tex={ formula } />

formula will be extracted from a JSON :

{
    "formula": `\int_0^1 x^2\ dx`
}

But JSON does not permit using backticks. And String.raw seems to work escape backslash correctly only with backticks. I would like to escape \ without modify the TeX formula (like adding a second \ manually).

How could I do?

Thanks!

PS: I precise that there can be multiple backslash and everywhere in the string. Here some examples and how to create a math formula. Using String.raw() as un function, the backslash is not extracted without the character just after. Only String.raw with backticks works well.


Solution

  • JS

    const fx = {
      formula: `\int_0^1 x^2\ dx`
    };
    
    const formula = "\\" + String.raw({ raw: fx.formula });
    

    in JSX

    <MathComponent tex={formula} />
    

    Codesandbox example https://codesandbox.io/s/late-morning-538gf

    MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw