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の違いはまた今度書きます・・・)
改行が反映されてないと、どれくらい見にくい?
蛇足ですが、エンジニアさんだと稀に「別に改行くらいええやん・・・」という方もいるので、どれくらい見にくいのか見比べてみましょう(`・ω・´)
改行コードで改行されていない、複数行のデータ↓
今日は猫カフェに行きました。とっても可愛い猫がたくさんいましたが、なかでも私のお気に入りはメインクーンです。メインクーンは体がとても大きい猫なのですが、見た目とは反対にとても穏やかな性格の猫なんだそうです。なんといっても、ふわふわの毛がたまりません。今までゴリゴリの犬派だったわたしも、すっかり猫派になってしまうほど、可愛い猫でした。
改行コードで改行された、複数行のデータ↓
今日は猫カフェに行きました。
とっても可愛い猫がたくさんいましたが、なかでも私のお気に入りはメインクーンです。
メインクーンは体がとても大きい猫なのですが、見た目とは反対にとても穏やかな性格の猫なんだそうです。
なんといっても、ふわふわの毛がたまりません。今までゴリゴリの犬派だったわたしも、すっかり猫派になってしまうほど、可愛い猫でした。
短い文章だとあまり恩恵がないように見えますが、やっぱり改行されていたほうがみやすいですね。
適当に作ったテストデータでバタバタ実装しているとつい忘れがちなところですが、細かいところも忘れずに、使いやすい・見やすいものを作るように心がけようと思います。
メインクーンが可愛い。

2017板東寛司 猫壁掛 いろいろこねこ12ヵ月こねこ図鑑カレンダー (風呂猫アートカレンダー)
- 作者: 板東寛司
- 出版社/メーカー: 風呂猫
- 発売日: 2016/09/01
- メディア: カレンダー
- この商品を含むブログを見る
![ずっといっしょ。子猫カレンダー2017 ([カレンダー]) ずっといっしょ。子猫カレンダー2017 ([カレンダー])](http://ecx.images-amazon.com/images/I/515r-WcbDzL._SL160_.jpg)
- 作者: 中津昌彦
- 出版社/メーカー: 主婦の友社
- 発売日: 2016/09/07
- メディア: カレンダー
- この商品を含むブログを見る

- 出版社/メーカー: アキバ書房
- 発売日: 2015/01/30
- メディア: Kindle版
- この商品を含むブログを見る
可愛い・・・。