Supprimer les balises HTML en JavaScript

Methode recommandee: DOMParser

DOMParser transforme une chaine HTML en document DOM. Vous pouvez ensuite lire textContent ou parcourir l'arbre pour conserver les sauts de ligne. Cette methode gere les balises imbriquees, les entites HTML et une partie du HTML mal forme beaucoup mieux qu'une regex.

function htmlVersTexte(html) {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  doc.querySelectorAll('script, style, template').forEach(el => el.remove());
  return doc.body.textContent.trim();
}

Cette version courte extrait le texte, mais elle ne preserve pas finement les paragraphes. Pour un rendu lisible, il faut parcourir les noeuds et ajouter des retours a la ligne autour des balises de bloc comme p, div, h1, li ou blockquote.

Element temporaire: simple mais limite

Une autre technique consiste a creer un element, a assigner innerHTML, puis a lire textContent. Elle est concise et fonctionne dans beaucoup de cas.

function stripHtmlSimple(html) {
  const div = document.createElement('div');
  div.innerHTML = html;
  div.querySelectorAll('script, style, template').forEach(el => el.remove());
  return div.textContent.trim();
}

Cette approche reste cote navigateur et decode les entites, mais elle ne donne pas automatiquement une structure texte agreable. Elle peut egalement declencher des comportements indesirables si vous inserez ensuite le contenu dans le DOM visible. Pour une extraction locale dans un element detache, le risque est limite; pour afficher du HTML utilisateur, ce n'est pas suffisant.

Regex: pourquoi c'est fragile

La regex classique /<[^>]+>/g supprime les sequences entre chevrons. Elle est rapide a ecrire, mais elle ne comprend pas HTML. Elle ne sait pas decoder  , ne gere pas proprement les attributs contenant des chevrons, ne retire pas le contenu des scripts et ne preserve pas la structure. Sur un fragment controle, elle peut depanner; sur une page reelle, elle finit souvent par produire des erreurs silencieuses.

Il faut aussi distinguer extraction de texte et sanitization. Supprimer les balises pour obtenir du texte brut n'est pas la meme chose que rendre du HTML utilisateur "sur". Si vous voulez afficher du HTML fourni par un utilisateur, utilisez une bibliotheque de sanitization reconnue, avec une liste blanche de balises et attributs. Si vous voulez seulement du texte, convertissez en texte et n'injectez pas le HTML original.

Preserver les retours a la ligne en JavaScript

Pour obtenir un texte propre, parcourez recursivement le DOM. Ajoutez un retour a la ligne avant ou apres les balises de bloc, transformez <br> en \n, prefixez les <li> avec une puce, puis normalisez les lignes vides. C'est exactement la logique utilisee par l'outil Flowfiles.

const blocs = new Set(['P','DIV','H1','H2','H3','LI','BLOCKQUOTE','SECTION']);

function walk(node) {
  let out = '';
  for (const child of node.childNodes) {
    if (child.nodeType === Node.TEXT_NODE) out += child.textContent;
    if (child.nodeType === Node.ELEMENT_NODE) {
      if (child.matches('script,style,template')) continue;
      if (child.tagName === 'BR') out += '\n';
      else out += (blocs.has(child.tagName) ? '\n' : '') + walk(child);
    }
  }
  return out;
}

Quand utiliser une bibliotheque serveur

Si vous traitez des milliers de documents en production, un parseur cote serveur peut etre plus approprie: Cheerio, parse5, jsdom, BeautifulSoup en Python ou une bibliotheque specialisee selon votre stack. Le principe reste le meme: parser le HTML, exclure les noeuds non visibles, extraire le texte, normaliser les espaces. Evitez de baser un pipeline critique sur une regex globale.

Pour les tests rapides, les extraits ponctuels et la verification d'un rendu, l'outil en ligne reste pratique. Il vous montre immediatement ce que donne l'extraction avec DOMParser, sans installer de dependance ni exposer vos donnees a un serveur.