devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Regex para encontrar etiquetas HTML

Usa /<\/?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>/g para encontrar todas las coincidencias en un texto. Cada ejemplo de abajo se ha probado con el patrón, y puedes abrirlo en el probador de Regex con los textos de muestra ya cargados.

Actualizado el 

/<\/?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>/g
Abrir en el probador de Regex

Texto de ejemplo

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

7 coincidencias

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

Cómo funciona el patrón

ParteSignificado
<Corchete angular de apertura
\/?Barra opcional para etiquetas de cierre
[A-Za-z][A-Za-z0-9-]*Nombre de la etiqueta, incluidos los elementos personalizados como my-card
(?:\s[^<>]*)?Atributos opcionales
\/?>Barra opcional de autocierre y el corchete de cierre

Ejemplos de código

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];

Notas y limitaciones

Sirve bien para búsquedas rápidas y resaltado, pero las regex no pueden analizar HTML de forma fiable (comentarios, scripts, atributos que contienen >). Usa DOMParser o un parser real para cualquier caso importante. Para eliminar etiquetas y conservar el texto, consulta eliminar etiquetas HTML con regex.

Preguntas frecuentes

¿Cuál es la regex para encontrar etiquetas HTML?
/<\/?[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>/g — encuentra cada coincidencia en un texto. Consulta la tabla de arriba para ver qué hace cada parte.
¿Funciona en Python y PHP?
Sí: los ejemplos de código de arriba usan el mismo patrón con re en Python y funciones preg en PHP.
¿Cómo pruebo esta regex?
Haz clic en «Abrir en el probador de Regex»: el patrón, los flags y el texto de ejemplo se cargan automáticamente, y las coincidencias se resaltan mientras editas.