1.結論

See the Pen by F.M (@kobe2018) on CodePen.

2.プログラムの操作方法

　上側のテキストエリアに半角英数字を入力し、「上付き」or「下付き」ボタンを押す。
　　↓
　下側のテキストエリアにUnicodeで定義された「上付き文字」「下付き文字」に変換され出力されます。
　
　尚、Unicodeで「上付き」「下付き」が未定義の文字は変換されず、そのまま出力されます。
　　（例:「Q」や「S」は未定義なのでそのまま出力）

3.補足説明

　Unicodeでは「上付き文字」「下付き文字」が定義されています。

　HTMLやMathMLのタグで表現する場合は以下
「上付き」はA<sup>test</sup>です。→　A^test
「下付き」はA<sub>test</sub>です。→　A_test

　LaTeX記法で表現する場合は以下
「上付き」はA^{test}です。→　A^test
「下付き」はA_{test}です。→　A_test

　タグでの表現はWebで幅広い活用でき、LaTeX記法は主に数式で活用できますが、テキストエディタしか使わない場合は、Unicode文字を使ったほうが便利です。

4.蛇足

　今回ような自作した文字変換ツールをQiita上ににCodePenで動くように置いとけば、どこでも利用可能な事を知る。