javascript：檢查空白文本節點

Question

檢查DOM文本節點是否爲空白的最佳方法是什麼？通過空白我的意思是隻有空格，回報，標籤等，如果它包含一個nbsp;那麼它不是空白的。

我做：

element.nodeValue.trim().length != 0 

然而，這也擺脫的NBSP;，這是我不想要的。

（它是一款Chrome擴展程序，以便使用裝飾的正常 - 沒有IE！）

Answer 1

我最終取代了nbsp;用字符然後修剪。

element.nodeValue.replace(/\u00a0/g, "x").trim().length != 0 

基於Replacing   from javascript dom text node

Answer 2

if (element.textContent.trim()) ... 

編輯，真正的意思是說：

if (element.innerHTML.trim()) ... 

Answer 3

像這樣的事情

HTML

<div id="test1">   
    </div> 
<div id="test2"> &nbsp;  
    </div> 

Javascript

var test1 = document.getElementById("test1"); 
var test2 = document.getElementById("test2"); 

function escapeHTML(str) { 
    var pre = document.createElement('pre'); 
    pre.appendChild(document.createTextNode(str)); 
    return pre.innerHTML; 
} 

console.log(escapeHTML(test1.textContent).trim().length === 0); 
console.log(escapeHTML(test2.textContent).trim().length === 0); 

在jsfiddle

輸出

true 
false 

或用的nodeValue

的Javascript

var test1 = document.getElementById("test1").firstChild; 
var test2 = document.getElementById("test2").firstChild; 

function escapeHTML(str) { 
    var pre = document.createElement('pre'); 
    pre.appendChild(document.createTextNode(str)); 
    return pre.innerHTML; 
} 

console.log(escapeHTML(test1.nodeValue).trim().length === 0); 
console.log(escapeHTML(test2.nodeValue).trim().length === 0); 

輸出

true 
false 

在jsfiddle

參見Node.nodeValue和Node.textContent

Node.nodeValue

返回或設置當前節點的值。

下表顯示了不同元素的返回值： ...

文字：文本節點

Node.textContent

獲取的內容或設置文本節點及其後代的內容。

在第一種情況下，我得到了div元素及其後代的文本內容。

在第二種情況下，我選擇div的第一個文本節點，它恰好是第一個子節點，並獲取它的節點值。