【jQuery】textメソッド改行入らない

Question

<div id="message_input" class="input" data-placeholder="メッセージを入力" contenteditable></div>

// 値取得
var post = $("#message_input").text();
post.replace(/(<br>|<br \/>)/gi, '\n');
console.log(post);

改行が反映されていません。

Answer 1

「$("#message_input").text()」では改行を含まない文字列が、「$("#message_input").html()」では改行が「<br>」として表現されている文字列が取得できます。

たとえば、

<div id="message_input" class="input" data-placeholder="メッセージを入力" contenteditable>12345</div>

のようにテキストが入っているときにブラウザ上で「3」と「4」の間で改行を入れると

$("#message_input").text(); //取得結果:「12345」
$("#message_input").html(); // 取得結果：「123<br>45」

のようになります。
「replace」の対象にするのは「$("#message_input").html()」の取得結果ですね。

なお、replaceの正規表現は質問文に記載されているもので問題ないと思います。

Comments

[NobumitsuHata]

正しいご回答ありがとうございます。
お手数おかけしました！

[NobumitsuHata]

すいません。
その逆でjQueryで\nが入ったものを文字列でなく、brタグにする場合ご存知でしょうか？

[tkturbo]

replaceで逆をやればいいのでは？
「text.replace(/\n/g, '<br>')」のように。

Answer 2

replaceはpostを置換した新しい文字列を返すのでpost.replace(...)だけではpostの値は変更されません。

post=post.replace(/(<br>|<br \/>)/gi, '\n');

と戻り値を受け取る必要があります。

Comments

[NobumitsuHata]

上記のようにしましたが、改行されません。
replaceの引数は、上記のままでよろしいですか？

[退会済みユーザー]

console.log(post);
post=post.replace(/(<br>|<br \/>)/gi, '\n');
console.log(post);
として結果を質問文に追記していただけますか

私の環境では
str = 'abcd<br>efg<br />hijk';
console.log(str);
str = str.replace(/(<br>|<br \/>)/gi, '\n');
console.log(str);
で確認して
//1回目
abcd<br>efg<br />hijk
//2回目
abcd
efg
hijk
となることを確認しています。