How to detect whether HTML content, when rendered, is blank/whitespace?
考虑如下代码:
1 2 3 | <!-- comment --> <span></span><br /> <span class="foo"></span> |
在浏览器上会有效地呈现为一段空白。
我想知道,给定那个或类似的标记,是否有一种直接的、编程的方式来检测这个去掉空格的代码的最终结果是一个空字符串。
这里的实现是 JavaScript,但我也对更通用的(与语言无关的)解决方案感兴趣,如果存在的话。
请注意,仅删除标签并查看是否有任何文本不是真正的解决方法,因为有很多标签最终会呈现可见内容(例如 img、hr 等)。
这是我想出的答案。它使用假定在页面上呈现的标签白名单,无论它们是否有内容,所有其他标签都假定只有在它们具有实际文本内容时才会呈现。一旦你有了它,实际上解决方案就相当简单了,因为它依赖于
此解决方案还忽略基于 CSS 呈现的元素(例如,具有背景颜色的块或为
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | function htmlIsWhitespace(input) { \tvar visible = [ \t\t\t'img','iframe','object','hr', \t\t\t'audio', 'video', \t\t\t'form', 'button', 'input', 'select', 'textarea' \t\t], \t\tcontainer = document.createElement('div'); \tcontainer.innerHTML = input; \treturn !(container.innerText.trim().length > 0 || container.querySelector(visible.join(','))); } // And the tests (I believe these are comprehensive): var testStringsYes = [ \t\t"", \t\t"", \t\t"<span></span>", \t\t"<span> <!-- comment --></span>", \t\t"<span> </span>", \t\t"<span> </span>", \t\t"<span> </span>", \t\t"<p><span> </span> </p>", \t\t" <p><center>[wp_ad_camp_2]</center></p><p><span> </span> </p> ", \t\t"<p>\ \ </p> <ul> <li> </li> </ul> " \t], \ttestStringsNo = [ \t\t"<span> hi</span>", \t\t"<img src='#foo'>", \t\t"<hr />", \t\t"<object />", \t\t"<iframe />", \t\t"<object />", \t\t"<!-- hi -->bye", \t\t"<!-- what --></audio>", \t\t"<!-- what --><video></video>", \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) { \tconsole.debug("Testing", testStringsYes[yy]); \tconsole.assert(htmlIsWhitespace(testStringsYes[yy])); } for(var nn=0, nl=testStringsNo.length; nn < nl; nn += 1) { \tconsole.debug("Testing", testStringsNo[nn]); \tconsole.assert(!htmlIsWhitespace(testStringsNo[nn])); } |