Vložení řetězce na označené místo v inputu

Ahoj,
chci vytvořit na svém webu virtuální matematickou klávesnici, aby bylo snadnější zadávání delších matematických zápisů a časté akce šly "vyklikat".

Moje představa je taková, že budu mít nějaké textové políčko pro dotaz (stejně jako teď) a pod ním bude otevírací box s tlačítky, které budou již zadaný řetězec nějakým způsobem formátovat. Jak ale udělat následující?

1. Po kliknutí na tlačítko se vloží předem definovaný řetězec (podle toho, co to tlačítko znamená) na místo v inputu, které je označené kurzorem myši (je to vůbec možné?).
2. Pokud bude nějaký řetězec v inputu označen, tak bude místo vložení dalšího řetězce ten původní přepsán. Ještě před přepsáním ten řetězec ale potřebuji získat do proměnné, abych ho mohl případně přepsat rovnou s nějakou úpravou.
Moje vize je taková, že například napíši: "x+3/2-x*pi", poté myší označím část zadaného řetězce (například "x*pi") a poté kliknu například na tlačítko "sin()" a vstupní řetězec bude upraven na: "x+3/2-sin(x*pi)"

Je vůbec něco takového možné? Ideálně bych chtěl použít javascript a rovnou říkám, že se chci vyhnout jQuery, protože nejsem spokojen s jeho výkonností na mobilních zařízeních.