javascript - javascript: 空白の textNode を確認します

Question

DOM テキストノードが空白かどうかを確認する最良の方法は何ですか? 空白とは、スペース、改行、タブなどのみを意味します。nbsp が含まれている場合。空白ではありません。

やっていた：

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

ただし、これにより nbsp; も削除されますが、これは望ましくありません。

(これは Chrome 拡張用なので、trim を使用しても問題ありません - IE は使用できません!)

Answer 1

このようなもの

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 要素とその子孫のテキスト コンテンツを取得します。

2 番目のケースでは、最初の子ノードである div の最初のテキスト ノードを選択し、そのノード値を取得します。