jQuery 判斷 div.innerHTML 為空卻返回 false？隱形空白字元陷阱

現象重現

alert($("#CanlenderInfo").html());      // 彈出視覺上「空」
alert($("#CanlenderInfo").html() == ""); // 顯示 false

原因分析

.html() 返回的字串可能包含不可見字元：換行符（\n）、製表符（\t）、空格（ ）或   等 HTML 實體。直接比較 == "" 自然為 false。

快速排查技巧

// 在字串前後加入可見標記，觀察是否有隱形內容
alert("[" + $("#CanlenderInfo").html() + "]");
// 或使用 console.log 觀察原始字元編碼
console.log($("#CanlenderInfo").html().split('').map(c => c.charCodeAt(0)));

正確判斷「實質為空」的方法

1. 修剪後比較：$.trim($("#CanlenderInfo").html()) === ""
2. 正則檢測非空白字元：/^\s*$/.test($("#CanlenderInfo").html())
3. jQuery 內建：$("#CanlenderInfo").is(':empty')（僅檢測無子節點，不包含文字節點）

最佳實踐建議

• 後端輸出時避免在容器標籤間留下換行縮進，或在前端統一用 .html($.trim(html)) 淨化。
• 若需判斷用戶是否輸入內容，建議綁定 input 事件即時維護狀態標記，而非依賴 DOM 文本解析。