目的
CMSのようなシステムで入力された文字列をHTMLに展開したいときがあります。
その時テキストエリアで空白文字や改行を入力すると、HTMLに展開すると連続した空白がつめられて改行は空白にされます。
入力した通りに表示する方法を検討します。
方法
タグや実体参照に置き換える
よくある手としては改行コードを見つけたらbrタグに置き換え、空白を「＆ｎｂｓｐ；」に置き換えます。
RubyのERBでは以下のようになります。
<p><%= contents.gsub(/\R/, "<br/>").gsub(/ /, " ") %></p>
HTMLのエスケープをするなら以下のようになります。
<p><%= ERB::Util.html_escape(contents).gsub(/\R/, "<br/>").gsub(/ /, " ") %></p>
CSSで調整する
white-spaceというCSSのプロパティは改行と空白文字を制御します。
詳細はMDN Web Docsにあります。
<p style="white-space: pre-wrap;"><%= contents %></p>
まとめ
CSSの方が記述が簡単ですしCSSをファイルで切り出しておけば調節もしやすいので、CSSを使うと良いと思います。
↧