PHP 處理 Textarea 換行符的正確姿勢：告別 JS 調用報錯

問題場景

用戶在 <textarea> 中輸入多行文本提交後，PHP 接收到的數據包含換行符。直接存入數據庫或前端 JS 調用時，常因換行符處理不當導致：

• 頁面顯示出現多餘空格
• JavaScript 字符串語法錯誤（未轉義換行符）
• 數據庫存儲格式混亂

核心知識：換行符的本質

PHP 中 chr(13) 即 \r，chr(10) 即 \n。

錯誤示範（原文代碼分析）

<?php
if ($_POST) {
    // 錯誤：僅替換 \r，遺留 \n 導致 JS 報錯；且邏輯混亂
    $textarea = str_replace('n', '', str_replace(chr(13), '', $_POST['textarea']));
    echo $textarea;
}
?>

問題：'n' 是字符「n」，而非 \n；未處理 \r\n 組合；直接輸出未轉義字符串極易導致 JS 語法錯誤。

標準解決方案

1. 統一轉換為 HTML 換行標籤（用於頁面直接顯示）

<?php
$text = $_POST['textarea'] ?? '';
// 統一將各種換行符轉為 <br>
$html = nl2br(htmlspecialchars($text, ENT_QUOTES, 'UTF-8'));
echo $html;
?>

nl2br() 會在 \n、\r\n、\r 前插入 <br>，配合 htmlspecialchars() 防 XSS。

2. 存入數據庫：保留原始換行符（推薦）

<?php
$text = $_POST['textarea'] ?? '';
// 僅做安全過濾，保留 \n
$safeText = htmlspecialchars($text, ENT_QUOTES, 'UTF-8');
// 入庫前可統一轉為 \n（可選）
$normalized = str_replace(["\r\n", "\r"], "\n", $safeText);
// 執行入庫操作...
?>

3. 供 JavaScript 調用：必須 JSON 編碼

<script>
var textareaData = <?php echo json_encode($normalized, JSON_UNESCAPED_UNICODE); ?>;
console.log(textareaData); // 安全的 JS 字符串，含 \n 轉義
</script>

json_encode() 會自動將換行符轉義為 \n，雙引號轉義為 \"，徹底消除 JS 語法錯誤。

綜合最佳實踐代碼

<?php
// 1. 獲取並標準化換行符為 \n
$raw = $_POST['content'] ?? '';
$normalized = str_replace(["\r\n", "\r"], "\n", $raw);

// 2. 不同場景輸出
// 【頁面直接顯示】
$forDisplay = nl2br(htmlspecialchars($normalized, ENT_QUOTES, 'UTF-8'));

// 【JS 變量賦值】
$forJS = json_encode($normalized, JSON_UNESCAPED_UNICODE);

// 【入庫存儲】
$forDB = $normalized; // 配合預處理語句防注入
?>

<!-- 頁面顯示 -->
<div class="content"><?php echo $forDisplay; ?></div>

<!-- JS 調用 -->
<script>
const content = <?php echo $forJS; ?>;
// 安全使用 content 變量
</script>

總結原則

1. 統一標準化：入口處將所有換行符統一為 \n。
2. 按場景輸出：HTML 用 nl2br + htmlspecialchars，JS 用 json_encode，數據庫存原始 \n。
3. 絕不手拼字符串：任何輸出到 JS 的 PHP 變量，必須經 json_encode()。