テキストエリアの改行をにする方法(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, "<br />");
  txtVal = txtVal.replace(/(\n|\r)/g, "<br />");
  $('#testpre').html('<p>'+ txtVal +'</p>');
});

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

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

関連記事: