は、次のようなコードを考えてみましょう：レンダリング時にHTMLコンテンツが空白/空白であるかどうかを検出する方法は？
ブラウザ上で効果的に空白のストレッチとしてレンダリングされ<p> </p><!-- comment -->
<span></span><br />
<div><span class="foo"></span></div>
。
ものまたは類似のマークアップ与えられ、取り除か空白で、このコードの最終結果は空の文字列であることを検出するための簡単な、プログラム的な方法があり、場合、私は思ったんだけど。ここ
実装では、JavaScriptのですが、私は同様に存在する場合にも、より一般的な（言語に依存しない）ソリューションに興味があります。
タグを取り除き、テキストが残っているかどうかを確認するだけでは、目に見えるコンテンツ（例：img、hrなど）のレンダリングにつながるタグがたくさんあるため、実際の修正はありません。
これは私が思いついた答えです。ページ上にレンダリングすると思われるタグのホワイトリストを使用します。タグはコンテンツの有無にかかわらず、他のタグはすべて実際のテキストコンテンツがある場合にのみレンダリングされると見なされます。あなたの場所で、実際に解決策は非常に簡単であることをしたら - それはinnerText属性が自動的にすべてのタグを除去しますという事実に依存しています。
この解決策はまた、幸いにも、これは私のユースケースに関連しないCSS（背景色や場所のコンテンツが:afterまたは:before擬似要素に設定されていると、例えばブロック）に基づいてレンダリング要素を無視します。
function htmlIsWhitespace(input) {
\t var visible = [
\t \t \t 'img','iframe','object','hr',
\t \t \t 'audio', 'video',
\t \t \t 'form', 'button', 'input', 'select', 'textarea'
\t \t ],
\t \t container = document.createElement('div');
\t container.innerHTML = input;
\t return !(container.innerText.trim().length > 0 || container.querySelector(visible.join(',')));
}
// And the tests (I believe these are comprehensive):
var testStringsYes = [
\t \t "",
\t \t "<a href='#'></a>",
\t \t "<a href='#'><span></span></a>",
\t \t "<a href='#'><span> <!-- comment --></span></a>",
\t \t "<a href='#'><span> </span></a>",
\t \t "<a href='#'><span> </span></a>",
\t \t "<a href='#'><span> </span></a> ",
\t \t "<p><a href='#'><span> </span></a> </p>",
\t \t " <p><a href='#'><span> </span></a> </p> <p></p>",
\t \t "<p>\n \n</p><ul><li></li></ul>"
\t ],
\t testStringsNo = [
\t \t "<a href='#'><span> hi</span></a>",
\t \t "<img src='#foo'>",
\t \t "<hr />",
\t \t "<div><object /></div>",
\t \t "<div><iframe /></div>",
\t \t "<div><object /></div>",
\t \t "<div><!-- hi -->bye</div>",
\t \t "<div><!-- what --><audio></audio></div>",
\t \t "<div><!-- what --><video></video></div>",
\t \t '<form><!-- empty --></form>',
\t \t '<input type="text">',
\t \t '<select name="foo"><option>1</option></select>',
\t \t '<textarea>',
\t \t '<input type="text">',
\t \t '<form><input type="button"></form>',
\t \t '<button />',
\t \t '<button>Push</button>',
\t \t "yo"
\t ];
for(var yy=0, yl=testStringsYes.length; yy < yl; yy += 1) {
\t console.debug("Testing", testStringsYes[yy]);
\t console.assert(htmlIsWhitespace(testStringsYes[yy]));
}
for(var nn=0, nl=testStringsNo.length; nn < nl; nn += 1) {
\t console.debug("Testing", testStringsNo[nn]);
\t console.assert(!htmlIsWhitespace(testStringsNo[nn]));
}
あなたは – Musa
使用するDOM APIは十分ではないかもしれないだけでマークアップを見て、ページにコンテンツをレンダリングするためにCSSを使用することができ、あなたは空白を考慮する文字のリストを持って、再帰的に確認与えられたノードの唯一の内容が空白文字であるか（またはそのノードがコメントなどであるか）、そのノードを削除するかどうか。ノードがなくなってしまった場合は、すべて空白になります。 - これは、たとえば、白い背景に白いテキストをキャッチしないことに注意してください... – deceze