簡化數學符號輸入，讓你在網路上更輕鬆

Question

有沒有一個React函式庫的解決方案，讓使用者可以輕鬆輸入數學符號，並在後端將其轉換為LaTeX？我的意思是，像一個用戶友好的編輯器，可能帶有可點擊的按鈕？然後在後端將這些元素轉換為LaTeX。

Answer 1

您可以嘗試使用MathJax。版本3是最新版本，非常強大。

根據這個問題，它是最好的JavaScript LaTeX渲染器。

在下面的範例中，您可以將現有內容渲染為LaTeX，或動態新增元素。

const expressions = [
  '\frac{a}{b}',
  '\(V = {4 \over 3} \pi^3 \)'
];

document.querySelectorAll('.expression').forEach(el => {
  el.replaceWith(MathJax.tex2chtml(el.textContent));
});

expressions.forEach(expression => {
  document.body.append(MathJax.tex2chtml(expression));
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

body > * {
  border: thin solid grey;
  padding: 1rem;
}

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<div class="expression">(\int_{a}^{b} x^2 \,dx)</div>

將中綴表達式解析為LaTeX

##如果您想解釋表達式並將其轉換為LaTeX，可以嘗試以下內容：

const form = document.forms['latex-add'];
const container = document.querySelector('#expression-list');
const expressions = ['\frac{a}{b}', '\frac{{(25 \cdot 5)}}{6}'];

const main = () => {
  form.elements.expression.value = '(25*5)/b';
  form.addEventListener('submit', handleAdd);
  renderExpressions();
};

const handleAdd = (e) => {
  e.preventDefault();
  const expression = e.target.elements.expression.value.trim();
  const tex = texFromExpression(expression);
  console.log(tex);
  expressions.push(tex);
  renderExpressions();
  e.target.reset();
};

const renderExpressions = () => {
  container.innerHTML = '';
  expressions.forEach(expression => {
    const wrapper = document.createElement('div');
    wrapper.classList.add('expression');
    const tex = document.createElement('div');
    tex.classList.add('tex');
    tex.textContent = expression;
    wrapper.append(tex);
    wrapper.append(MathJax.tex2chtml(expression));
    container.append(wrapper);
  });
};

// Credit: https://stackoverflow.com/a/57449164/1762224
const texFromExpression = (str) => {
  let pos = -1, ch;

  const nextChar = () => {
    ch = (++pos < str.length) ? str.charAt(pos) : -1;
  };

  const eat = (charToEat) => {
    while (ch == ' ') nextChar();
    if (ch == charToEat) {
      nextChar();
      return true;
    }
    return false;
  };

  const parse = () => {
    nextChar();
    const x = parseExpression();
    if (pos < str.length) throw new Error(`Unexpected: ${ch}`)
    return x;
  };

  const parseExpression = () => {
    let x = parseTerm();
    while (true) {
      if (eat('+')) x = `${x} + ${parseTerm()}` // addition
      else if (eat('-')) x = `${x} - ${parseTerm()}` // subtraction
      else return x;
    }
  };

  const parseTerm = () => {
    var x = parseFactor();
    while (true) {
      if (eat('*')) x = `${x} \cdot ${parseTerm()}`; // multiplication
      else if (eat('/')) x = `\frac{${x}}{${parseTerm()}}`; // division
      else return x;
    }
  };

  const parseFactor = () => {
    if (eat('+')) return parseFactor(); // unary plus
    if (eat('-')) return `-${parseFactor()}`; // unary minus
    let x;
    const startPos = pos;
    if (eat('(')) { // parentheses
      x = `{(${parseExpression()})}`
      eat(')');
    } else if ((ch >= '0' && ch <= '9') || ch == '.') { // numbers
      while ((ch >= '0' && ch <= '9') || ch == '.') nextChar();
      x = str.substring(startPos, pos);
    } else if (ch >= 'a' && ch <= 'z') { // variables
      while (ch >= 'a' && ch <= 'z') nextChar();
      x = str.substring(startPos, pos);
      if (x.length > 1) {
        x = `\${x} {${parseFactor()}}`;
      }
    } else {
      throw new Error(`Unexpected: ${ch}`);
    }
    if (eat('^')) x = `${x} ^ {${parseFactor()}}` // superscript
    if (eat('_')) x = `${x}_{${parseFactor()}}`;
    return x;
  }
  return parse();
}

main();

#expression-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.expression {
  padding: 0.5rem;
  border: thin solid grey;
}

.tex {
  font-family: monospace;
  font-size: smaller;
}

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<form name="latex-add" autocomplete="off">
  <label for="expression">Expression:</label>
  <input type="text" id="expression" name="expression"
         value="" placeholder="Expression..." />
  <button type="submit">Add</button>
</form>
<hr />
<div id="expression-list"></div>