読者です 読者をやめる 読者になる 読者になる

I=envS

興味のあることをまとめて書きます

化学式の上付き・下付き文字を自動化するスクリプト

Web プログラミング

前回の化学まとめ記事で「下付き文字」と「上付き文字」がマジで地獄だったので、自動化出来るようにしてみました。 というのも、「[Ag(NH3)2]^+」と打つだけでも、

「[Ag(NH<sub>3</sub>)<sub>2</sub>]<sup>+</sup>」と打つ必要があるのです。。。果てしなく打ちにくいし、書いてる側からとんでもなく読みにくい。

というわけで、みんな大好きJQueryでほぼ完全に自動化しました。多分どこかに先例があると思うんですが僕は見つけられなかった。

使い方

はてな民は、ある記事のみで使いたいなら記事のHTML欄、または、はてな記法・Markdown記法の編集欄に以下のコードを貼り付けよう。化学記事をバンバン御投稿なさる方は「ブログの設定>詳細設定>headに要素を追加」と辿って、以下のコードを貼り付けよう。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
  jQuery(function ($) {
    $(".chemistry-full").each(function(){
      var txt = $(this).html();
      txt = txt.replace(/(\)|\]|H|He|Li|Be|B|C|N|O|F|Ne|Na|Mg|Al|Si|P|S|Cl|Ar|K|Ca|Sc|Ti|V|Cr|Mn|Fe|Co|Ni|Cu|Zn|Ga|Ge|As|Se|Br|Kr|Rb|Cs|Fr|Sr|Ba|Ra|Y|Zr|Nb|Mo|Tc|Ru|Rh|Pd|Ag|Cd|In|Sn|Sb|Te|I|Xe|Pt|Au|Hg|Tl|Pb|Bi|Po|At|Rn|La|Ce|Pr|Nd|Pm|Sm|Eu|Gd|Tb|Dy|Ho|Er|Tm|Yb|Lu|Hf|Ta|W|Re|Os|Ir|Ac|Th|Pa|U|Np|Pu|Am|Cm|Bk|Cf|Es|Fm|Md|No|Lr|Rf|Db|Sg|Bh|Hs|Mt|Ds|Rg|Cn|Uut|Fl|Uup|Lv|Uus|Uuo)(\d+)/gm,'$1<sub>$2</sub>');
      txt = txt.replace(/\^(\d*[\+\-]|\d+)/gm,'<sup>$1</sup>');
      txt = txt.replace(/(SO|NO)x/gm,'$1<sub>x</sub>');
      txt = txt.replace(/\)(n|m)/gm,')<sub>$1</sub>');
      txt = txt.replace(/K(w|a|b|sp|h)( |\n)/gm,'K<sub>$1</sub>$2');
      $(this).html(txt);
    });
    $(".chemistry-short").each(function(){
      var txt = $(this).html();
      txt = txt.replace(/(\)|\]|H|He|Li|Be|B|C|N|O|F|Ne|Na|Mg|Al|Si|P|S|Cl|Ar|K|Ca|Sc|Ti|V|Cr|Mn|Fe|Co|Ni|Cu|Zn|Ga|Ge|As|Se|Br|Kr|Rb|Cs|Fr|Sr|Ba|Ra|Y|Zr|Nb|Mo|Tc|Ru|Rh|Pd|Ag|Cd|In|Sn|Sb|Te|I|Xe|Pt|Au|Hg|Tl|Pb|Bi|Po|At|Rn)(\d+)/gm,'$1<sub>$2</sub>');
      txt = txt.replace(/\^(\d*[\+\-]|\d+)/gm,'<sup>$1</sup>');
      txt = txt.replace(/(SO|NO)x/gm,'$1<sub>x</sub>');
      txt = txt.replace(/\)(n|m)/gm,')<sub>$1</sub>');
      txt = txt.replace(/K(w|a|b|sp|h)( |\n)/gm,'K<sub>$1</sub>$2');
      $(this).html(txt);
    });
  });
</script>

・非はてな民はなんとかして使いたいページのHTMLに上のコードを貼り付けよう。場所はheadの中でもbodyの中でもどっちでも良い。

・使いたい場面をdivで囲んで、クラス名を"chemistry-short"か"chemistry-full"にしよう。違いはランタノイドとか絶対に必要ない元素に対応してるかしてないかの違いだけだ。通常"chemistry-short"にしとけば問題ない。

・下付き文字はそのまま入力、上付き文字は「^」の後に入力。累乗入力と同じだ。

・後は自動的に相手のパソコンが処理して、ちゃんと上付き・下付きにしてくれるはずだ。もちろんJQueryなので、相手のブラウザでJavascriptが無効になっていたら処理されない。



まあなんかあったらコメントください。