Vai al contenuto
TextArray1.41.0
100% locale

Convertitore da HTML a JSX

Trasforma il markup HTML in JSX che puoi incollare direttamente in un componente React.

Ingresso
Uscita
Strumenti correlati
Formattatore HTMLStrumenti per sviluppatori
Convertitore di oggetti da CSS a JSStrumenti per sviluppatori
Convertitore da HTML a BBCodeStrumenti per sviluppatori
Rimuovi la formattazione MarkdownPulizia del testo
Differenza chiave i18nStrumenti per sviluppatori
Convertitore da TOML a JSONStrumenti per sviluppatori
Convertitore da HTML a JSX
Incolla il markup HTML e ottieni JSX che puoi inserire direttamente in un componente React. Il convertitore rinomina ogni attributo per cui React si aspetta un nome diverso — class diventa className, for diventa htmlFor, tabindex diventa tabIndex, colspan diventa colSpan e decine di altri — così la console smette di avvisare sulle proprietà DOM sconosciute nel momento in cui incolli uno snippet copiato da uno strumento di progettazione, un'esportazione CMS, un modello di email o una vecchia pagina statica.
Gli stili in linea sono la prossima cosa che React rifiuta come stringa semplice. Attiva "Converti stile in oggetto" e style="color:red;font-size:16px" diventa style={{ color: 'red', fontSize: '16px' }}, con ogni proprietà camelCased e ogni valore tra virgolette, pronto per lo stile prop. Gli elementi void sono il terzo problema: l'HTML ti consente di lasciare <br>, <img>, <input>, <hr> e <meta> non chiusi, ma JSX non li analizzerà, quindi "Elementi void con chiusura automatica" li riscrive come <br />, <img /> e così via per te.
I commenti HTML diventano l'unico modulo di commento che JSX accetta all'interno del markup, quindi <!-- così --> diventa {/* così */}. Il contenuto del testo, gli spazi bianchi e le interruzioni di riga rimangono esattamente come li hai scritti, quindi il rientro e la copia sopravvivono intatti alla conversione e gli attributi data-* e aria-* vengono deliberatamente lasciati con trattino perché JSX li mantiene così come sono. Entrambe le opzioni sono attive per impostazione predefinita e possono essere disattivate quando si desidera rinominare solo gli attributi.
L'intera conversione avviene nel tuo browser come semplice elaborazione di stringhe: nessun DOM, nessun server, nessun caricamento. Incolla il markup proprietario da un pannello di amministrazione interno o da un sito cliente e nulla lascerà il tuo dispositivo. Copia il JSX, scaricalo come file o invialo a un altro strumento TextArray per il passaggio successivo.
FAQ
Quali attributi rinomina?
class → className, for → htmlFor e i moduli camelCase React si aspetta: tabIndex, readOnly, maxLength, colSpan, rowSpan, cellPadding, crossOrigin, autoFocus, contentEditable, srcSet e molti altri. Gli attributi data-* e aria-* vengono lasciati esattamente come sono, perché JSX li mantiene sillabati.
Converte gli stili in linea?
Sì, quando l'opzione "Converti stile in oggetto" è attiva. Ogni dichiarazione diventa una chiave camelCased con un valore di stringa tra virgolette all'interno di un oggetto in stile doppia parentesi graffa. Disattiva l'opzione per lasciare intatte le stringhe di stile.
È un parser HTML completo?
No, è una trasformazione di stringhe rapida, non un DOM del browser. Copre le conversioni di cui React ha effettivamente bisogno: rinomina degli attributi, stili inline, elementi void e commenti. Non reindenta né convalida il tuo HTML, quindi i tag non validi vengono visualizzati come scritti.
Il mio HTML è caricato da qualche parte?
No. La conversione viene eseguita interamente nel tuo browser con l'elaborazione locale delle stringhe. Il tuo markup non raggiunge mai un server, quindi incollare il codice interno o client è sicuro.