きょろきょろ(๑´• ₃ •̀๑)

特にWeb系についてのことを書いていきたいと思います。 基本的にメモ書きみたいなものです。

textareaで取得した改行を含むデータ(php側)をJavaScriptでそのデータを扱う。

textareaで取得したphpのデータをJavaScriptで取得しようと思ったら改行されてしまいうまいこといかない!

 

やりたいことは、JavaScriptで改行付きデータを表示させるって感じです。

 

ということで、今回、いろいろと調べてみると、

textareaのデータが以下のようである場合、

-------------------------データ---------------------------

test

hoge

-------------------------------------------------------------

改行が邪魔をして、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キーでソースみても改行は入らずうまいこと行けた。

参照:


phpで、引用・改行を含む文字列を、javascriptで展開する方法(382)|teratail