読者です 読者をやめる 読者になる 読者になる

女子WEBエンジニアのTechメモ

都内の某企業でマーケッターやってます。営業→WEBエンジニア・オフショア開発チーム駐在→マーケッター(SEO)ちょっと便利だなと思ったことをメモしています。

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

javascript

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は、変換したい文字列です。
文字コードによって改行コードが異なるので、2段階の処理が必要になります。(1行で記述してもOKです。)

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

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

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

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

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

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

今日は猫カフェに行きました。

とっても可愛い猫がたくさんいましたが、なかでも私のお気に入りはメインクーンです。

メインクーンは体がとても大きい猫なのですが、見た目とは反対にとても穏やかな性格の猫なんだそうです。
なんといっても、ふわふわの毛がたまりません。

今までゴリゴリの犬派だったわたしも、すっかり猫派になってしまうほど、可愛い猫でした。

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

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



f:id:bombomprin:20161121200239j:plain

メインクーンが可愛い。

ずっといっしょ。子猫カレンダー2017 ([カレンダー])

ずっといっしょ。子猫カレンダー2017 ([カレンダー])

cute cats13 メインクーン

cute cats13 メインクーン



f:id:bombomprin:20161121201749j:plain

可愛い・・・。