Regex pour trouver les balises HTML

Utilisez /<\/?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>/g pour trouver toutes les correspondances dans un texte. Chaque exemple ci-dessous est testé avec ce motif, et vous pouvez l'ouvrir dans le testeur de regex avec les exemples préchargés.

Mis à jour le

/<\/?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>/g
Ouvrir dans le testeur de regex

Texte d'exemple

<p class="intro">Hello <strong>world</strong><br/></p><my-card id="x"></my-card>

7 correspondances

<p class="intro"> <strong> </strong> <br/> </p> <my-card id="x"> </my-card>

Fonctionnement du motif

ÉlémentRôle
<Chevron ouvrant
\/?Barre oblique facultative pour les balises de fermeture
[A-Za-z][A-Za-z0-9-]*Nom de la balise, y compris les éléments personnalisés comme my-card
(?:\s[^<>]*)?Attributs facultatifs
\/?>Barre oblique facultative des balises auto-fermantes et chevron fermant

Exemples de code

JavaScript

const matches = text.match(/<\/?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>/g) ?? [];

Python

import re

matches = re.findall(r'</?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?/?>', text)

PHP

preg_match_all('/<\/?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>/', $text, $m);
$matches = $m[0];

Remarques et limites

Suffisant pour des recherches rapides et la mise en surbrillance, mais les regex ne peuvent pas analyser le HTML de façon fiable (commentaires, scripts, attributs contenant >). Pour tout usage important, utilisez DOMParser ou un analyseur HTML complet. Pour supprimer les balises en conservant le texte, consultez supprimer les balises HTML avec une regex.

Questions fréquentes

Quelle est la regex pour trouver les balises HTML ?
/<\/?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>/g — elle trouve toutes les correspondances dans un texte. Consultez le tableau ci-dessus pour le rôle de chaque partie.
Fonctionne-t-elle en Python et en PHP ?
Oui : les exemples de code ci-dessus utilisent le même motif avec re en Python et les fonctions preg en PHP.
Comment tester cette regex ?
Cliquez sur « Ouvrir dans le testeur de regex » : le motif, les drapeaux et le texte d'exemple se chargent automatiquement, et les correspondances se surlignent pendant que vous modifiez.