フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

jQueryでnl2br(改行コードをbrタグに)

かなり使い古された話題だとは思いますが、自身の備忘も兼ねて。

PHPのnl2brに当たる関数はないため、以下のように正規表現で置換することになります。

let brstr = str.replace(/r?n/g, "<br>");

注意点としてはjQueryでHTML要素にセットする際、text()ではなくhtml()を使う必要があるということ。

$('#hoge').text(brstr); //"<br>"も文字列として出力される
$('#hoge').html(brstr); //<br>がタグとして認識される

とはいえ、元の文字列がユーザー入力値だったりするとインジェクションを考慮しなければいけないわけです。
そこで、エスケープしてからセットして上げる必要があります。

1行で書くステキな方法がありました。

$('#hoge').html($('#hoge').text(str).html().replace(/r?n/g, "<br>"));

一度要素内の値としてセットした上で要素HTML全体を置換するという方法です。

(参考)
[jQuery]たった1行でHTML文字列をサニタイズし改行コードはbrタグに置き換えする

ちなみに、text()と同様の使い勝手で利用できる関数をつくる方法もありました。
jQueryで改行を含む文字列(非HTML)を挿入する方法

[紹介元] jQueryタグが付けられた新着投稿 – Qiita jQueryでnl2br(改行コードをbrタグに)

コメント

記事に戻る

コメントを残す