JSでPHPのnl2brと同じ処理をする方法（改行コード→brに変換）

PHPだと標準で用意されているnl2br関数。

でも、Javascriptにはこの関数が用意されていません。
そのため、改行がある複数行のデータが入ってくるとかなり見づらくなってしまいます。

そんなときにサクっと使えるように、JSでnl2br関数と同じ処理をするコードを書きました。

JSでnl2brと同じ処理をするコード（HTML/XHTML）

HTMLの場合

function nl2br(str) {
  var res = str.replace(/\r\n/g, "<br>");
  res = res.replace(/(\n|\r)/g, "<br>");
  return res;
}

XHTMLの場合

function nl2br(str) {
  var res = str.replace(/\r\n/g, "<br />");
  res = res.replace(/(\n|\r)/g, "<br />");
  return res;
}

引数のstrは、変換したい文字列です。
文字コードによって改行コードが異なるので、２段階の処理が必要になります。（１行で記述してもOKです。）

HTMLとXHTML、どちらを使えば良いかわからないという方は、とりあえずXHTMLの方を使っておけば、動く可能性が高いと思います。
（HTMLとXHTMLの違いはまた今度書きます・・・）

改行が反映されてないと、どれくらい見にくい？

蛇足ですが、エンジニアさんだと稀に「別に改行くらいええやん・・・」という方もいるので、どれくらい見にくいのか見比べてみましょう(｀・ω・´)

改行コードで改行されていない、複数行のデータ↓

今日は猫カフェに行きました。とっても可愛い猫がたくさんいましたが、なかでも私のお気に入りはメインクーンです。メインクーンは体がとても大きい猫なのですが、見た目とは反対にとても穏やかな性格の猫なんだそうです。なんといっても、ふわふわの毛がたまりません。今までゴリゴリの犬派だったわたしも、すっかり猫派になってしまうほど、可愛い猫でした。

改行コードで改行された、複数行のデータ↓

今日は猫カフェに行きました。
とっても可愛い猫がたくさんいましたが、なかでも私のお気に入りはメインクーンです。
メインクーンは体がとても大きい猫なのですが、見た目とは反対にとても穏やかな性格の猫なんだそうです。
なんといっても、ふわふわの毛がたまりません。
今までゴリゴリの犬派だったわたしも、すっかり猫派になってしまうほど、可愛い猫でした。

短い文章だとあまり恩恵がないように見えますが、やっぱり改行されていたほうがみやすいですね。

適当に作ったテストデータでバタバタ実装しているとつい忘れがちなところですが、細かいところも忘れずに、使いやすい・見やすいものを作るように心がけようと思います。

f:id:bombomprin:20161121200239j:plain