Question

0

226

Views

Regex clases coincidentes en className de un elemento React/jsx

El siguiente es un fragmento de mi componente React

 <div className="grid lg:grid-cols-2 xl:grid-cols-1 lg:gap-x-5"> <article className={`${index > 0 ? 'border-t lg:border-t-0 xl:border-t border-gray-300/70' : ''} py-8 sm:flex xl:items-center lg:flex-col xl:flex-row`}> ... </article> </div>

Necesito obtener todas las clases que están en el componente. Pude hacer coincidir las clases dentro de className="grid lg:grid-cols-2 xl:grid-cols-1 lg:gap-x-5" con la siguiente expresión regular:

 /(?<=className=")(.*)(?=")/g

Sin embargo, no puedo averiguar cómo hacer coincidir las clases para

 className={`${index > 0 ? 'border-t lg:border-t-0 xl:border-t border-gray-300/70' : 'text-gray-900'} py-8 sm:flex xl:items-center lg:flex-col xl:flex-row`}

Por ejemplo, necesito hacer coincidir "border-t lg:border-t-0 xl:border-t border-gray-300/70 text-gray-900 py-8 sm:flex xl:items-center lg:flex-col xl:flex-row" en el ejemplo anterior.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-30T10:30:37.057Z

Podrías probar esta combinación de 3 expresiones regulares:

Guion:

 function myFunction() { text = "<div className=\"grid lg:grid-cols-2 xl:grid-cols-1 lg:gap-x-5\">\ <article className={`${index > 0 ? 'border-t lg:border-t-0 xl:border-t border-gray-300/70' : 'text-gray-900'} py-8 sm:flex xl:items-center lg:flex-col xl:flex-row` }\ ...\ </article>\ </div>"; console.log(text.match(/(?<=\?\s?')([^']*)(?='(\s?:|\s?}))|(?<=}\s?)([^`]*)(?=`\s?})/g).join(' ')) }

Producción:

Nota:

Es posible que deba agregar comprobaciones de nombre de clase del article className antes de la expresión regular a continuación si solo necesita los nombres de clase dentro de una etiqueta de artículo, ya que la expresión regular a continuación puede seleccionar otras clases si está entre comillas simples ( '' ).

0

226