PHP JS PHP輸出換行字元導致JS停止執行

說明

有時候我們會需要把從PHP取得的資料，放到JS的code中執行。


今天碰到了問題，所以記錄下來。

狀況

當PHP取得的字串echo到JS的字串時，換行字元會導致JS語法錯誤，進而使JS停止執行。


先來看看一般JS的物件宣告

// 一般JS正常的物件宣告

<script>  

var tmp = {  

'key' : 'variable'  

}  

</script>  

利用PHP輸出到JS物件的值

// 加入PHP值的JS物件宣告

<?php $php_string = "test123"; ?>  

<script>  

var tmp = {  

'key' : '<?= $php_string ?>'  

}  

</script>  

其輸出會長這樣

// 輸出(加入PHP值的JS物件宣告)

<script>  

var tmp = {  

'key' : 'test123'  

}  

</script>  

今天碰到的狀況(遇到換行字元)

// 加入PHP值(帶有換行字元)的JS物件宣告

<?php $php_string = "test\r\n123"; ?>  

<script>  

var tmp = {  

'key' : '<?= $php_string ?>'  

}  

</script>  

其輸出會長這樣

// 輸出(入PHP值(帶有換行字元)的JS物件宣告)

<script>  

var tmp = {  

'key' : 'test  

123'  

}  

</script>  

發現問題了嗎？？


在JS中字串是不允許換行的，所以程式報錯，瀏覽器中斷JS的執行。


然後這個世界就爆炸啦！！

解決

方法就是把換行字元替換掉

<?php  

$php_string = "test\r\n123";  

preg_replace("/(?:\r\n|\r|\n)/", '<br>', $php_string);  

?>  

<script>  

var tmp = {  

'key' : '<?= $php_string ?>'  

}  

</script>  

其輸出會長這樣

<script>  

var tmp = {  

'key' : 'test<br>123'  

}  

</script>  

這樣就不會有換行的問題了，換成<br>是因為html中是換行。

★ nl2br 不會取代\r\n只會在旁邊加上<br>，所以JS還是會壞掉


★ preg_replace(取代的正則式, 取代字串, 被取代的字串);


★ \n Unix類系統的換行


★ \r\n Windows系統的換行


★ \r Mac以前的換行</div>