前端實戰：將 Textarea 多行文字自動包裹為 <p> 標籤

需求場景

使用者在 <textarea> 輸入多行文字（以換行符分隔），儲存至資料庫或提交表單前，需自動將每一段文字包裹在 <p></p> 標籤中，以利前端顯示排版。

JavaScript 實作範例

<textarea id="ta"></textarea>
<br />
<input type="button" value="輸入完畢" onclick="replaceText()" />

<script>
function replaceText() {
  var v = document.getElementById('ta').value.replace(/\r/g, '');
  if (v != '') {
    // 移除結尾換行，再以 </p><p> 取代內部換行，最後補上首尾標籤
    v = '<p>' + v.replace(/\n*$/g, '').replace(/\n/g, '</p><p>') + '</p>';
    alert(v); // 實際專案中可送往後端或顯示於預覽區
  }
}
</script>

核心正則說明

• /\r/g：移除 Windows 風格換行符 \r\n 中的 \r，統一為 \n。
• /\n*$/g：移除字串尾部多餘的換行，避免產生空段落。
• /\n/g：將剩餘換行符替換為 </p><p>，形成段落分隔。

進階考量

• 若內容需支援 HTML 標籤，請先進行 escapeHtml 處理，防止 XSS。
• 後端儲存時建議保留原始換行文字，僅在前端渲染時轉換，利於後續編輯。
• 若使用 Vue/React 等框架，可封裝為可復用元件，綁定 onBlur 或 onChange 即時轉換。