3

I have a textarea HTML element where users can input math expressions like 2 * 5 or 3^2 - 14 (React app to be specific). I would like to replace symbols/expressions such as *, ^2 or pi with their prettier Unicode alternatives: ×, ², π.

Obviously, the expression parser would need to understand the alternative symbols, but that's easy to do.

The problem is replacing them properly - when you modify the textarea's value via the String.replace function, it moves the cursor to the end of its content. While it's possible to do so (see update textarea value, but keep cursor position) it requires a significant amount of code (or at least that's what I can see so far).

Are there any better ways to achieve this goal? I was thinking about modifying the font so that when a user types * it will display × - this strategy would definitely not work for something like pi => π and I'm not sure whether it's even possible. The font I'm using is Menlo.

Antoni Kępiński
  • 329
  • 3
  • 13
  • 1
    Might be useful: https://stackoverflow.com/questions/38385936/change-the-cursor-position-in-a-textarea-with-react – Matt Jul 06 '21 at 18:10
  • 1
    or this: [Rendering user input from dynamically created textarea using MathJax](https://stackoverflow.com/questions/16600130/rendering-user-input-from-dynamically-created-textarea-using-mathjax) – pilchard Jul 06 '21 at 18:12

0 Answers0