Question

考虑以下代码：

<p>&nbsp;</p><!-- comment -->
<span></span><br />
<div><span class="foo"></span></div>

在浏览器上有效地呈现为一段空格。

我想知道，鉴于该标记或类似标记，是否有一种直接的，编程方式来检测此代码的最终结果是否为空白字符串。

这里的实现是JavaScript，但我也对更通用（语言不可知）的解决方案感兴趣，如果存在的话。

请注意，只是剥离标记并查看是否有任何文本仍然不是真正的修复，因为有很多标记最终会呈现可见内容（例如img，hr等）。

Answer 1

这是我想出的答案。它使用假定在页面上呈现的标签白名单，无论它们是否具有内容 - 假定所有其他标签仅在具有实际文本内容时呈现。一旦你有了这个，实际上解决方案相当容易 - 它依赖于innerText属性自动剥离所有标签这一事实。

此解决方案还忽略了基于CSS渲染的元素（例如，具有背景颜色的块或为:after或:before伪元素设置内容的块）但幸运的是，这与我的用例。

function htmlIsWhitespace(input) {
	var visible = [
			'img','iframe','object','hr', 
			'audio', 'video', 
			'form', 'button', 'input', 'select', 'textarea'
		],
		container = document.createElement('div');
	container.innerHTML = input;
	return !(container.innerText.trim().length > 0 || container.querySelector(visible.join(',')));
}

// And the tests (I believe these are comprehensive):

var testStringsYes = [
		"",
		"<a href='#'></a>",
		"<a href='#'><span></span></a>",
		"<a href='#'><span> <!-- comment --></span></a>",
		"<a href='#'><span> &nbsp;</span></a>",
		"<a href='#'><span> &nbsp; </span></a>",
		"<a href='#'><span> &nbsp;</span></a> &nbsp;",
		"<p><a href='#'><span> &nbsp;</span></a> &nbsp;</p>",
		" <p><a href='#'><span> &nbsp;</span></a> &nbsp;</p> &nbsp; <p></p>",
		"<p>\n&nbsp;\n</p><ul><li></li></ul>"
	],
	testStringsNo = [
		"<a href='#'><span> &nbsp;hi</span></a>",
		"<img src='#foo'>",
		"<hr />",
		"<div><object /></div>",
		"<div><iframe /></div>",
		"<div><object /></div>",
		"<div><!-- hi -->bye</div>",
		"<div><!-- what --><audio></audio></div>",
		"<div><!-- what --><video></video></div>",
		'<form><!-- empty --></form>',
		'<input type="text">',
		'<select name="foo"><option>1</option></select>',
		'<textarea>',
		'<input type="text">',
		'<form><input type="button"></form>',
		'<button />',
		'<button>Push</button>',
		"yo"
	];

for(var yy=0, yl=testStringsYes.length; yy < yl; yy += 1) {
	console.debug("Testing", testStringsYes[yy]);
	console.assert(htmlIsWhitespace(testStringsYes[yy]));
}

for(var nn=0, nl=testStringsNo.length; nn < nl; nn += 1) {
	console.debug("Testing", testStringsNo[nn]);
	console.assert(!htmlIsWhitespace(testStringsNo[nn]));
}

如何检测HTML内容在呈现时是否为空白/空白？

1 个答案: