テキストエリアの改行をにする方法(PHP,JavaScript各々で)

formのテキストエリアなどで入力された改行はメタ文字である「\n」になります。
そのテキストエリアに入力された文字列を一度データベースに入れて、もう一度出力しようと思ったとき、普通にechoで出力すると改行が入っていた部分に空白が入るだけです。

「じゃぁそれを「<br>」になおそうよ！」と思ったのでまとめます。
PHPでやる方法とJavaScriptでやる方法をまとめます。

まずは上記のことを簡単に実装出来るPHPからいきましょう。

PHPで「\n」の部分を「<br>」に

PHPではメタ文字である「\n」を「<br>」に変換してくれる関数があります。
それが、nl2br()関数です。

nl2br – PHP公式ドキュメント

この関数の引数として、文字列を渡すと「\n」を「<br>」にして返してくれます。
一番簡単な方法がこの方法です。

JavaScriptで「\n」の部分を「<br>」に

THE HAM MEDIA BLOGさんのブログに答えが書いてありました。

以下のスクリプトを使用すると「\n」を「<br>」に変換出来ます。（jQueryを使用しています）

$("textarea").change( function() {
  var txtVal = $(this).val();
  txtVal = txtVal.replace(/\r\n/g, "&lt;br /&gt;<br />");
  txtVal = txtVal.replace(/(\n|\r)/g, "&lt;br /&gt;<br />");
  $('#testpre').html('<p>'+ txtVal +'</p>');
});

 

JavaScriptで\nを認識するためには正規表現を使います。
正規表現で「\n」は「\r\n、\n、\r」でマッチするため、それを使用します。
またマッチしたものをbrに置き換えています。上記ではメソッドである「.replace」を使用していますね。

何か質問がございましたら以下コメント欄、またはリプライ(@DAI199)までお願いします。

更新情報はFacebookページで！

ブログの更新、読んで役立つ他ブログの記事などを更新しています。