Vereinfachen Sie die Eingabe mathematischer Symbole, um Ihnen das Surfen im Internet zu erleichtern

Question

Gibt es eine Lösung für eine React-Bibliothek, mit der Benutzer problemlos mathematische Symbole eingeben und diese im Backend in LaTeX konvertieren können? Ich meine, wie ein benutzerfreundlicher Editor, vielleicht mit anklickbaren Schaltflächen? Diese Elemente werden dann im Backend in LaTeX konvertiert.

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>