[ブロガー向け]文章スタイルプレビュー ver2.0

昨日公開したver1.0だが、Twitterで早速指摘を頂いた。

@retore 中身のスクリプト禁止しないと色々危ないで pic.twitter.com/Ooh3wScjjB

— あら (@Aramata29) 2015, 4月 27

→XSSの脅威もあるので、<や>などをエスケープすることで対応（ver1.1）

それは言うたらアカン RT @Aramata29 (そもそも行間とかいう項目あんのに改行に対応してないって)

— 紅茶狩人 (@kochan8104) 2015, 4月 27

そしてこの指摘。ごもっともである。一応言い訳をすると、段落ごとの入力を想定していて、本来しっかりとした文章ならば段落内での改行はまずないわけで…
とは言っても、ブログとレポートや論文は違うし、むしろどこで改行を入れれば見やすくなるか、というのもまた重大な問題であるから、これに対応しようじゃないか、というのが今回のver2.0である。

CSS反映できるね。できるなら荒さんのコードパクったほうがスマートだ pic.twitter.com/KRATaeAhSs

— レトレ (@retore) 2015, 4月 27

昨日の段階で、textareaにCSSを適用できることを発見した。故にこの仕様を使って改変することにした。

ver1.1では入力欄の文字列を取得し、1文字ずつエスケープが必要かどうかを判定し新たな文字列を作成。その文字列を結果表示欄に挿入し、結果表示欄にCSSを適用していた。
一方ver2.0では入力欄のtextareaそのものにCSSを適用することで、処理が大幅に減った上に、textareaであるためHTMLタグなどのエスケープも必要無くなり、コードも大幅にシンプルになっている。

→文章スタイルプレビュー ver2.0 ソースコードは以下。