Debugging & Troubleshooting

BeautifulSoup : prettify() modifie votre HTML, utilisez decode()

Avec BeautifulSoup, prettify() ajoute des retours à la ligne et des espaces qui peuvent modifier l’affichage HTML. Utilisez decode() ou str(soup).

Photo de profil de Long Nguyen

Long Nguyen

Développeur fullstack · Ingénieur IA · Chercheur

• • 3 min de lecture •

Lorsque vous traitez une description produit en HTML avec BeautifulSoup avant de l’enregistrer à nouveau, la méthode utilisée pour sérialiser le soup est importante. soup.prettify() et soup.decode() transforment toutes deux un arbre d’analyse en chaîne de caractères, mais elles ne sont pas interchangeables : prettify() peut modifier discrètement l’affichage de la description et la valeur enregistrée, tandis que decode() en fournit une copie fidèle.

La différence

soup.decode() est le sérialiseur compact : c’est exactement ce que str(soup) appelle en interne. Il renvoie le HTML tel quel, sans ajouter d’espaces à des fins esthétiques. soup.prettify() utilise le même mécanisme de sérialisation, mais active la mise en forme : chaque balise est placée sur sa propre ligne et indentée pour rendre le balisage plus lisible. Cette lisibilité repose sur l’insertion de retours à la ligne (\n) et d’espaces dans la sortie, alors qu’ils n’existaient pas dans le document d’origine.

Pourquoi prettify() modifie la description

Une fois le contenu affiché, ces caractères ajoutés ne sont pas toujours purement esthétiques. Lorsque prettify() place un élément inline sur sa propre ligne, le retour à la ligne et l’indentation entre cet élément et le texte voisin sont réduits — dans un navigateur — à un seul espace. Cet espace n’existait pas auparavant.

À l’origine :

<p>Size: <b>Large</b>. Ships free.</p>

Après prettify() :

<p>
 Size:
 <b>
  Large
 </b>
 .
 Ships free.
</p>

La version d’origine s’affiche ainsi : « Size: Large. Ships free. » La version mise en forme s’affiche ainsi : « Size: Large . Ships free. » — un espace superflu apparaît avant le point, car le retour à la ligne entre </b> et . est devenu un espace. Répétez cela pour chaque balise inline (<a>, <span>, <em>, <strong>) d’une description riche et le texte affiché s’éloigne progressivement de l’original.

Le problème est encore plus marqué si la description enregistrée est ensuite affichée dans un contexte qui préserve les espaces — à l’intérieur de <pre>, d’un <textarea>, d’un élément utilisant white-space: pre, ou lorsqu’un système en aval la traite comme du texte brut. Dans ces cas, chaque retour à la ligne et chaque espace d’indentation ajoutés par prettify s’affichent littéralement.

Que faut-il utiliser ?

  1. Pour lire, modifier puis réenregistrer une description HTML, utilisez str(soup) ou soup.decode(). Ces méthodes conservent le balisage lors de la conversion, sans introduire d’espaces supplémentaires.
  2. Utilisez soup.prettify() uniquement pour une inspection humaine — dans les journaux, pour le débogage ou pour examiner rapidement la structure — et jamais pour la valeur que vous enregistrez ou renvoyez à un autre système.
  3. Si vous avez déjà enregistré des descriptions mises en forme, ne partez pas du principe qu’elles sont intactes : elles peuvent contenir des modifications d’espacement aux limites des éléments inline, qu’une nouvelle analyse ne corrigera pas automatiquement.

La règle à retenir : prettify() est fait pour vos yeux, decode() pour vos données.

La normalisation propre des descriptions HTML entre différentes marketplaces est un piège étonnamment courant pour les bugs d’affichage discrets comme celui-ci. Après avoir développé des intégrations multicanales sur plus de 20 canaux de vente, je travaille régulièrement sur l’assainissement des descriptions et la conversion du HTML sans perte. Si vous avez besoin d’aide pour le support e-commerce ou l’intégration d’API de marketplace, consultez le service de support e-commerce de Netalith ou contactez-moi directement sur LinkedIn.

FAQ

Questions fréquentes

Quelle est la différence entre soup.prettify() et soup.decode() ?

decode() (ce qu’appelle str(soup)) sérialise fidèlement le HTML, sans ajouter d’espaces. prettify() utilise le même sérialiseur avec la mise en forme activée : il ajoute donc des retours à la ligne et des indentations pour améliorer la lisibilité.

Pourquoi prettify() modifie-t-il l’apparence de ma description ?

Lorsque prettify() place un élément inline sur sa propre ligne, le retour à la ligne et l’indentation qui l’entourent sont réduits à un seul espace dans le navigateur. Des espaces apparaissent alors — par exemple avant un point placé après un mot en gras — alors qu’ils n’existaient pas dans le document d’origine.

Lequel dois-je utiliser pour enregistrer une description HTML ?

Utilisez str(soup) ou soup.decode(). Ces méthodes conservent le balisage lors de la conversion sans ajouter d’espaces esthétiques. Réservez prettify() au débogage et à l’inspection humaine.

Les espaces ajoutés par prettify() peuvent-ils s’afficher littéralement ?

Oui. Si la description est affichée dans un contexte qui préserve les espaces, comme une balise pre, un textarea ou un élément utilisant white-space: pre, ou si elle est traitée comme du texte brut par un système en aval, chaque retour à la ligne et chaque espace ajoutés par prettify s’affichent littéralement.

Restez informé avec Netalith

Recevez des ressources de développement, des mises à jour produit et des offres spéciales directement dans votre boîte mail.