Jor*_*ter 6 html whitespace is-empty
考虑如下代码：
<p> </p><!-- comment -->
<span></span><br />
<div><span class="foo"></span></div>
在浏览器上它会有效地呈现为一段空白。
我想知道，考虑到该标记或类似的标记，是否有一种简单的编程方法来检测删除了空格的该代码的最终结果是一个空字符串。
这里的实现是 JavaScript，但我也对一种更通用（与语言无关）的解决方案感兴趣（如果存在）。
请注意，仅删除标签并查看是否保留任何文本并不是真正的解决方案，因为有大量标签最终会呈现可见内容（例如 img、hr 等）。
这就是我想出的答案。它使用标签白名单，假定这些标签在页面上呈现，无论它们是否有内容 \xe2\x80\x94 所有其他标签都假定仅在具有实际文本内容时呈现。一旦你做到了这一点，实际上解决方案相当简单 \xe2\x80\x94 它依赖于以下事实：innerText自动删除所有标签的事实。
该解决方案还忽略基于 CSS 渲染的元素（例如具有背景颜色的块或为或设置内容的块:after）:before伪元素设置内容的位置），但幸运的是这与我的用例无关。
function htmlIsWhitespace(input) {\r\n\tvar visible = [\r\n\t\t\t\'img\',\'iframe\',\'object\',\'hr\', \r\n\t\t\t\'audio\', \'video\', \r\n\t\t\t\'form\', \'button\', \'input\', \'select\', \'textarea\'\r\n\t\t],\r\n\t\tcontainer = document.createElement(\'div\');\r\n\tcontainer.innerHTML = input;\r\n\treturn !(container.innerText.trim().length > 0 || container.querySelector(visible.join(\',\')));\r\n}\r\n\r\n// And the tests (I believe these are comprehensive):\r\n\r\nvar testStringsYes = [\r\n\t\t"",\r\n\t\t"<a href=\'#\'></a>",\r\n\t\t"<a href=\'#\'><span></span></a>",\r\n\t\t"<a href=\'#\'><span> <!-- comment --></span></a>",\r\n\t\t"<a href=\'#\'><span> </span></a>",\r\n\t\t"<a href=\'#\'><span> </span></a>",\r\n\t\t"<a href=\'#\'><span> </span></a> ",\r\n\t\t"<p><a href=\'#\'><span> </span></a> </p>",\r\n\t\t" <p><a href=\'#\'><span> </span></a> </p> <p></p>",\r\n\t\t"<p>\\n \\n</p><ul><li></li></ul>"\r\n\t],\r\n\ttestStringsNo = [\r\n\t\t"<a href=\'#\'><span> hi</span></a>",\r\n\t\t"<img src=\'#foo\'>",\r\n\t\t"<hr />",\r\n\t\t"<div><object /></div>",\r\n\t\t"<div><iframe /></div>",\r\n\t\t"<div><object /></div>",\r\n\t\t"<div><!-- hi -->bye</div>",\r\n\t\t"<div><!-- what --><audio></audio></div>",\r\n\t\t"<div><!-- what --><video></video></div>",\r\n\t\t\'<form><!-- empty --></form>\',\r\n\t\t\'<input type="text">\',\r\n\t\t\'<select name="foo"><option>1</option></select>\',\r\n\t\t\'<textarea>\',\r\n\t\t\'<input type="text">\',\r\n\t\t\'<form><input type="button"></form>\',\r\n\t\t\'<button />\',\r\n\t\t\'<button>Push</button>\',\r\n\t\t"yo"\r\n\t];\r\n\r\nfor(var yy=0, yl=testStringsYes.length; yy < yl; yy += 1) {\r\n\tconsole.debug("Testing", testStringsYes[yy]);\r\n\tconsole.assert(htmlIsWhitespace(testStringsYes[yy]));\r\n}\r\n\r\nfor(var nn=0, nl=testStringsNo.length; nn < nl; nn += 1) {\r\n\tconsole.debug("Testing", testStringsNo[nn]);\r\n\tconsole.assert(!htmlIsWhitespace(testStringsNo[nn]));\r\n}