Comportement étrange avec document.execCommand('insertHTML')

Question

J'essaie de mettre en évidence de manière programmée toutes les occurrences d'un mot recherché en ajoutant une classe CSS comme suit :

const style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = `
.word-occurence {
  background: yellow;
  color: red;
  font-weight: bold;
  cursor: pointer;
}
`;
document.head.append(style)

document.designMode = "on";

window.getSelection().collapse(document, 0);

const word = 'Ubuntu';

while (window.find(word)) {
  document.execCommand('insertHTML', false, '<span class="word-occurence">' + window.getSelection() + '</span>');
  window.getSelection().collapseToEnd();

}
document.designMode = "off";

Il fonctionne presque parfaitement. Lorsque j'essaie ceci sur le serveur HTML par défaut pour Apache sur Ubuntu (comme on peut le trouver ici : http://bl.ocks.org/SunDi3yansyah/raw/c8e7a935a9f6ee6873a2/ ), toutes les occurrences du mot "Ubuntu" sont devenues rouges sur un fond jaune, mais l'une d'entre elles (la quatrième, c'est-à-dire celle qui se trouve au début de son paragraphe) a reçu un style CSS en ligne au lieu de la classe. Il manque le cursor: pointer et il a un supplément font-size: 14.6667px;

Je sais que document.execCommand est déprécié mais je suis super curieux : que s'est-il passé ?

Answer 1

J'ai trouvé ce bogue facilement dans la dernière version de Chrome. La commande insertHTML a un bogue avec la modification ou même la suppression des attributs des éléments en ligne tels que [span]. Dans votre cas, elle supprime les attributs pour toutes les occurrences de mots qui sont le premier mot du nœud de texte.

Il n'y a pas de spécifications officielles mais il y a beaucoup d'informations sur les bugs possibles et les moyens de les contourner. Par exemple, j'ai corrigé votre code en remplaçant la balise [span] par [em] en suivant les conseils de cet article : Existe-t-il un moyen d'empêcher execCommand("insertHTML") de supprimer les attributs dans chrome ?

Partie fixe :

document.execCommand('insertHTML', false, '<em class="word-occurence">' + window.getSelection() + '</em>');

Par effet secondaire, les mots sont devenus italiques à cause de la balise elle-même, mais l'attribut de classe fonctionne maintenant parfaitement - pas de tailles de police supplémentaires et autres choses du genre. En parlant de taille de police supplémentaire. J'ai trouvé des problèmes non seulement avec la 4ème occurrence d'Ubuntu qui est le premier mot de la balise [p]. Le tout premier mot près du logo, qui se trouve à l'intérieur de l'élément [span], est également affecté par ce bogue.

En conclusion de tout cela, insertHTML présente divers bogues lorsqu'il travaille avec la balise [span].

Voici quelques informations supplémentaires sur ce sujet : https://w3c.github.io/editing/docs/execCommand/#fix-disallowed-ancestors