Esta es una pregunta extraña que conozco, pero soy terrible escribiendo expresiones regulares.
El problema es bastante simple, tengo un montón de texto sin formato. Y en ese texto hay menciones de React Components.
Por ejemplo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fringilla maximus, sed < HelloThere /> velit porttitor sed. Fusce lacinia bibendum eros, a ultricies leo sodales eget.
Necesito crear una expresión regular que me permita extrapolar ese componente de reacción desconocido para poder envolverlo con algún marcado automáticamente.
Entonces, la expresión regular en el ejemplo anterior devolvería: "< HelloThere />"
La parte complicada es que puede ser cualquier componente de React. El componente también puede tener accesorios e hijos. Este es un ejemplo de algo allí también: < Componente >< Cuadro >< En línea >< Texto> Hola </ Texto ></ En línea ></ Cuadro ></ Componente>
Así que mi idea inicial fue tratar de encontrar el "<" de apertura y luego el "/>" de cierre y obtener todo lo que hay en el medio. Pero no tengo ni idea de cómo hacer eso.
¡Cualquier ayuda es muy apreciada!
PD Se agregaron espacios después del primer soporte en ángulo para que SO no intente meterse con él.
Editar:
Entonces, me está quedando claro que Regex podría ser demasiado limitado para esto. Es posible que deba encontrar una forma inteligente de JavaScript o agregar alguna etiqueta o símbolo al principio y al final del componente que me permita buscarlo más fácilmente.
Esta expresión regular coincidirá con todos los componentes válidos y, si el componente tiene elementos secundarios, solo coincidirá con la etiqueta abierta.
<[AZ]\w*\b.*?>|(?<=>)(\w+)(?=<) Un nombre de componente válido comienza con una letra mayúscula y continúa con cualquier cantidad de caracteres de palabra. Además, puede haber algunas propiedades hasta el final de la etiqueta (el signo > ).
Ver la demostración
let jsx = `<Component><Box><Inline><Text>Hello</Text></Inline></Box></Component>`; console.log(jsx.match(/<[AZ]\w*\b.*?>|(?<=>)(\w+)(?=<)/g)) // ["<Component>", "<Box>", "<Inline>", "<Text>", "Hello"]¡Gracias por todo el esfuerzo y la discusión! ¡Realmente lo aprecio!
Después de discutirlo también con un colega mío, nos comprometimos a mantener una lista de los posibles componentes que podrían usarse en el texto. Con ese compromiso, las cosas se vuelven mucho más simples y no tenemos que usar expresiones regulares en absoluto (siempre que hagamos esto del lado del cliente)
Digamos que tenemos estos datos
const string = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla et ligula consequat volutpat. In nec mauris nec dolor dapibus mollis in ut nibh. <AComponent prop="value">Hello<p> there</p></AComponent> Nam vulputate, sem vitae sollicitudin hendrerit, nibh mauris semper odio, ut gravida leo lacus sodales urna. Mauris nisl augue, elementum non ultricies et, semper quis diam. Integer vel fermentum ante.`Entonces puedo crear html a partir de esa cadena sobre la marcha:
const htmlObject = document.createElement('div'); htmlObject.innerHTML = string;Y luego simplemente use Vanilla JS para recorrer las etiquetas y ver si encuentro alguna (haciendo la única para mantenerlo simple)
const find = htmlObject.getElementsByTagName("AComponent") console.log('find', find) const string = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla et ligula consequat volutpat. In nec mauris nec dolor dapibus mollis in ut nibh. <AComponent prop="value">Hello<p> there</p></AComponent> Nam vulputate, sem vitae sollicitudin hendrerit, nibh mauris semper odio, ut gravida leo lacus sodales urna. Mauris nisl augue, elementum non ultricies et, semper quis diam. Integer vel fermentum ante.` const htmlObject = document.createElement('div'); htmlObject.innerHTML = string; const find = htmlObject.getElementsByTagName("AComponent") alert(find)