Comment détecter si le contenu HTML, lorsqu'il est rendu, est vide/espace?

Question

Tenir compte du code comme le suivant:

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

qui, un navigateur pourrait rendre plus efficace un tronçon d'espaces. Je me demande si, compte tenu de ce balisage ou d'un balisage similaire, il existe un moyen simple et programmatique de détecter que le résultat final de ce code avec un espace vide est une chaîne vide.

La mise en œuvre ici est JavaScript mais je suis également intéressé par une solution plus générale (agnostique) si elle existe. Notez que le simple fait d'enlever les étiquettes et de voir s'il reste du texte n'est pas une vraie solution car il y a beaucoup de balises qui finissent par rendre le contenu visible (par exemple, img, hr, etc.).

Answer 1

Voici la réponse que j'ai trouvée. Il utilise une liste blanche de balises qui sont censées rendre sur la page si elles ont du contenu ou non - toutes les autres balises sont supposées rendre seulement si elles ont du contenu textuel réel. Une fois que vous avez cela en place, en fait la solution est assez facile - elle repose sur le fait que l'attribut innerText supprime automatiquement toutes les balises.

Cette solution ne tient pas compte également des éléments qui rendent basés sur CSS (par exemple des blocs avec une couleur d'arrière-plan ou lorsque le contenu est défini pour les :after ou :before pseudo-éléments) mais heureusement ce n'est pas pertinent pour mon cas d'utilisation.

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> &nbsp;</span></a>", 
 
\t \t "<a href='#'><span> &nbsp; </span></a>", 
 
\t \t "<a href='#'><span> &nbsp;</span></a> &nbsp;", 
 
\t \t "<p><a href='#'><span> &nbsp;</span></a> &nbsp;</p>", 
 
\t \t " <p><a href='#'><span> &nbsp;</span></a> &nbsp;</p> &nbsp; <p></p>", 
 
\t \t "<p>\n&nbsp;\n</p><ul><li></li></ul>" 
 
\t ], 
 
\t testStringsNo = [ 
 
\t \t "<a href='#'><span> &nbsp;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])); 
 
}