textareaで取得した改行を含むデータ(php側)をJavaScriptでそのデータを扱う。
textareaで取得したphpのデータをJavaScriptで取得しようと思ったら改行されてしまいうまいこといかない!
やりたいことは、JavaScriptで改行付きデータを表示させるって感じです。
ということで、今回、いろいろと調べてみると、
textareaのデータが以下のようである場合、
-------------------------データ---------------------------
test
-------------------------------------------------------------
改行が邪魔をして、htmlのソースを見ると、JSには
--------------------------ソース--------------------------
var text = 'test
hoge';
-------------------------------------------------------------
となっていて、Errorとなる。
これを解消するために、まずphp側で、改行(\n)を<br>に置き換えてあげる。
textareのデータがphpの変数dataに入っているとすると、
$data = str_replace('\n','<br>',$data);
str_replace関数を使用することで、置き換えることが出来る。
これで、普通にソース見るだけだと改行は入ってない。
しかし、F12キーでソースを見ると、なぜかまだ改行が反映されており、以下のようになっている。
---------------------------ソース(F12キーでの)---------------------------
var text = 'test
<br>hoge';
---------------------------------------------------------------------------------
ここで、json_encode関数を使うことで、解決することが出来た。
var text = <?php echo json_encode(str_replace("\n","<br>",$post->content)) ?>;
このような感じである。
本当は ' か " で<?php ?>を囲むのだが、str_replaceで勝手に " で囲んでくれるので、外を " でくくるとダメと言われるので注意。
こんな感じで、json_encode関数を使うことで、F12キーでソースみても改行は入らずうまいこと行けた。
参照: