ToolDeck

تبدیل HTML به JSX

HTML را برای React به JSX تبدیل کنید — class→className، رشته style→شیء

یک مثال امتحان کنید

ورودی HTML

خروجی JSX

به‌صورت محلی اجرا می‌شود · جای‌گذاری اسرار امن است
خروجی JSX اینجا نمایش داده می‌شود…

تبدیل HTML به JSX چیست؟

تبدیل HTML به JSX فرایند تبدیل نشانه‌گذاری استاندارد HTML به نحو JSX است که کامپوننت‌های React می‌توانند آن را رندر کنند. JSX از نظر ظاهری شبیه HTML است، اما از قراردادها و قوانین نام‌گذاری JavaScript پیروی می‌کند. ویژگی‌هایی مانند class به className تبدیل می‌شوند، for به htmlFor تغییر می‌کند، و رشته‌های style درون‌خطی با اشیاء JavaScript جایگزین می‌شوند. این تغییرات ضروری هستند زیرا JSX به فراخوانی‌های React.createElement() کامپایل می‌شود، که در آن نام ویژگی‌ها باید با نام خصوصیات DOM API مطابقت داشته باشند، نه نام ویژگی‌های HTML.

نگاشت بین ویژگی‌های HTML و props های JSX توسط مستندات عناصر DOM در React تعریف شده است. React از camelCase برای ویژگی‌های چند کلمه‌ای استفاده می‌کند (tabindex به tabIndex، maxlength به maxLength تبدیل می‌شود) زیرا شناسه‌های JavaScript نمی‌توانند حاوی خط تیره باشند. تگ‌های خود-بسته مانند <img>، <br> و <input> باید در JSX شامل یک اسلش پایانی باشند (<img />) زیرا JSX از قوانین XML پیروی می‌کند که در آن هر تگ باید به صراحت بسته شود.

htmlToJsxContent.whatBody3

چرا از مبدل HTML به JSX استفاده کنیم؟

تغییر نام دستی ویژگی‌ها و بازنویسی رشته‌های style در ده‌ها عنصر HTML کند و مستعد خطاست. یک مبدل همه تبدیل‌ها را به یکباره انجام می‌دهد و به شما امکان می‌دهد HTML را از هر منبعی بچسبانید و در ثانیه JSX معتبر دریافت کنید.

تبدیل فوری
هر قطعه HTML را بچسبانید و فوراً خروجی JSX دریافت کنید. مبدل class، for، style، event handlerها، ویژگی‌های boolean و تگ‌های خود-بسته را در یک مرحله پردازش می‌کند.
🔒
پردازش با اولویت حریم خصوصی
تمام تبدیل‌ها به صورت محلی در مرورگر شما اجرا می‌شوند. HTML شما هرگز از صفحه خارج نمی‌شود، بنابراین می‌توانید با اطمینان نشانه‌گذاری حاوی کد داخلی، endpointهای API یا محتوای حساس را تبدیل کنید.
📋
بدون حساب کاربری یا نصب
صفحه را باز کنید و شروع به تبدیل کنید. نیازی به ورود به سیستم، نصب پکیج npm یا پیکربندی مرحله build نیست. روی هر دستگاهی با مرورگر مدرن کار می‌کند.
🔧
پوشش کامل ویژگی‌ها
تمام نگاشت‌های استاندارد ویژگی HTML به JSX از جمله className، htmlFor، tabIndex، readOnly، autoComplete و بیش از ۲۰ مورد دیگر را تبدیل می‌کند. همچنین تغییر نام event handlerها از onclick به onClick را نیز پشتیبانی می‌کند.

موارد استفاده از مبدل HTML به JSX

توسعه‌دهنده فرانت‌اند: انتقال قالب‌ها
هنگام انتقال یک صفحه HTML موجود یا کامپوننت به یک پروژه React، نشانه‌گذاری را به جای جستجوی دستی ویژگی‌های class و for در صدها خط، در مبدل بچسبانید.
مهندس بک‌اند: جاسازی ایمیل‌های HTML
قالب‌های ایمیل به صورت HTML ساده نوشته می‌شوند. هنگام رندر کردن آن‌ها در یک داشبورد مدیریتی React یا کامپوننت پیش‌نمایش، HTML را به JSX معتبر تبدیل کنید تا از خطاهای نحوی className و style جلوگیری شود.
DevOps: تبدیل ویجت‌های داشبورد
داشبوردهای نظارتی اغلب از قطعه‌های HTML برای ویجت‌های سفارشی استفاده می‌کنند. این‌ها را هنگام ادغام در یک پلتفرم ابزارهای داخلی مبتنی بر React مانند Retool یا یک پنل مدیریتی سفارشی به JSX تبدیل کنید.
مهندس QA: بازتولید گزارش‌های باگ
وقتی یک گزارش باگ شامل خروجی HTML خام است، آن را به JSX تبدیل کنید تا به سرعت در یک test harness یا Storybook story در React رندر شود و برای بازرسی بصری و رفع اشکال استفاده گردد.
طراح: نمونه‌سازی از mockupهای HTML
ابزارهای طراحی مانند Figma HTML/CSS خروجی می‌دهند. نشانه‌گذاری خروجی را به JSX تبدیل کنید تا بدون پاکسازی دستی ویژگی‌ها مستقیماً در یک prototype React قرار دهید.
دانشجو: یادگیری نحو React
ورودی HTML و خروجی JSX را در کنار هم مقایسه کنید تا بفهمید کدام ویژگی‌ها تغییر می‌کنند و چرا. مشاهده تبدیل، به خاطر سپردن قراردادهای نام‌گذاری React را آسان‌تر از خواندن مستندات به تنهایی می‌کند.

جدول مرجع نگاشت ویژگی‌های HTML به JSX

جدول زیر ویژگی‌های HTML را که هنگام تبدیل به JSX تغییر می‌کنند فهرست می‌کند. ویژگی‌هایی که اینجا فهرست نشده‌اند (id، src، href، alt، placeholder و غیره) بدون تغییر باقی می‌مانند زیرا نام‌های HTML آن‌ها از قبل با نام خصوصیات متناظر در DOM API مطابقت دارند.

ویژگی HTMLProp در JSXتوضیحات
classclassNameReserved word in JavaScript
forhtmlForReserved word in JavaScript
tabindextabIndexcamelCase convention
readonlyreadOnlycamelCase convention
maxlengthmaxLengthcamelCase convention
minlengthminLengthcamelCase convention
cellpaddingcellPaddingcamelCase convention
cellspacingcellSpacingcamelCase convention
rowspanrowSpancamelCase convention
colspancolSpancamelCase convention
enctypeencTypecamelCase convention
autocompleteautoCompletecamelCase convention
autofocusautoFocuscamelCase convention
autoplayautoPlaycamelCase convention
contenteditablecontentEditablecamelCase convention
crossorigincrossOrigincamelCase convention
novalidatenoValidatecamelCase convention
allowfullscreenallowFullScreencamelCase convention
spellcheckspellCheckcamelCase convention
http-equivhttpEquivHyphen removed, camelCase
onclickonClickEvent handler camelCase
onchangeonChangeEvent handler camelCase
onsubmitonSubmitEvent handler camelCase

تبدیل استایل درون‌خطی: HTML در مقابل JSX

استایل‌های درون‌خطی مستعدترین بخش تبدیل HTML به JSX هستند زیرا هم قالب مقدار و هم نام خصوصیات تغییر می‌کنند:

ویژگی style در HTML
یک رشته از اعلان‌های CSS که با نقطه‌ویرگول از هم جدا شده‌اند. نام خصوصیات از kebab-case استفاده می‌کنند (background-color، font-size، border-radius). مقادیر همیشه رشته هستند، از جمله مقادیر عددی با واحد.
<div style="background-color: #fff;
  font-size: 14px;
  margin-top: 10px;">
prop استایل در JSX
یک شیء JavaScript با نام خصوصیات camelCase (backgroundColor، fontSize، borderRadius). مقادیر رشته‌ای نقل‌قول می‌گیرند. مقادیر عددی بدون واحد (lineHeight، opacity، zIndex، flexGrow) می‌توانند اعداد ساده باشند.
<div style={{
  backgroundColor: '#fff',
  fontSize: '14px',
  marginTop: 10
}}>

نمونه‌های کد

این نمونه‌ها نشان می‌دهند چگونه HTML به JSX را به صورت برنامه‌نویسی در زبان‌ها و محیط‌های مختلف تبدیل کنید. هر نمونه تغییر نام ویژگی، تبدیل style و مدیریت تگ‌های خود-بسته را پوشش می‌دهد.

JavaScript (DOM API)
// Simple attribute conversion using string replacement
function htmlToJsx(html) {
  return html
    .replace(/\bclass=/g, 'className=')
    .replace(/\bfor=/g, 'htmlFor=')
    .replace(/\btabindex=/g, 'tabIndex=')
    .replace(/<!--([\s\S]*?)-->/g, '{/*$1*/}')
}

htmlToJsx('<div class="box" tabindex="0"><!-- note --></div>')
// → '<div className="box" tabIndex="0">{/* note */}</div>'
JavaScript (html-react-parser)
import parse from 'html-react-parser'

// Parse HTML string into React elements (handles all JSX rules)
const element = parse('<div class="card"><img src="photo.jpg" alt="Photo"></div>')
// Returns: React.createElement('div', { className: 'card' },
//   React.createElement('img', { src: 'photo.jpg', alt: 'Photo' }))

// With custom element replacement
const options = {
  replace(domNode) {
    if (domNode.name === 'img') {
      return <OptimizedImage src={domNode.attribs.src} alt={domNode.attribs.alt} />
    }
  }
}
const custom = parse('<img src="photo.jpg" alt="Photo">', options)
Python (BeautifulSoup)
from bs4 import BeautifulSoup
import re

ATTR_MAP = {
    'class': 'className', 'for': 'htmlFor',
    'tabindex': 'tabIndex', 'readonly': 'readOnly',
    'maxlength': 'maxLength', 'autocomplete': 'autoComplete',
}

def html_to_jsx(html: str) -> str:
    """Convert HTML attribute names to JSX equivalents."""
    for html_attr, jsx_attr in ATTR_MAP.items():
        html = re.sub(rf'\b{html_attr}=', f'{jsx_attr}=', html)
    # Convert HTML comments to JSX comments
    html = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', html)
    return html

print(html_to_jsx('<label for="email" class="field">Email</label>'))
# → '<label htmlFor="email" className="field">Email</label>'
Go
package main

import (
    "fmt"
    "strings"
)

var attrMap = map[string]string{
    "class=":    "className=",
    "for=":      "htmlFor=",
    "tabindex=": "tabIndex=",
    "readonly":  "readOnly",
}

func htmlToJSX(html string) string {
    result := html
    for old, new := range attrMap {
        result = strings.ReplaceAll(result, old, new)
    }
    // Convert comments
    result = strings.ReplaceAll(result, "<!--", "{/*")
    result = strings.ReplaceAll(result, "-->", "*/}")
    return result
}

func main() {
    html := `<div class="wrapper"><input readonly tabindex="1"></div>`
    fmt.Println(htmlToJSX(html))
    // → <div className="wrapper"><input readOnly tabIndex="1"></div>
}

سوالات متداول

تفاوت بین HTML و JSX چیست؟
JSX یک افزونه نحوی برای JavaScript است که توسط React استفاده می‌شود. شبیه HTML به نظر می‌رسد اما به فراخوانی‌های React.createElement() کامپایل می‌شود. تفاوت‌های اصلی عبارتند از: class به className تبدیل می‌شود، for به htmlFor تغییر می‌کند، استایل‌های درون‌خطی به جای رشته‌های CSS از اشیاء JavaScript استفاده می‌کنند، و همه تگ‌ها باید به صراحت بسته شوند (از جمله عناصر void مانند <img />). JSX همچنین امکان جاسازی عبارات JavaScript در داخل آکولاد را فراهم می‌کند.
چرا React به جای class از className استفاده می‌کند؟
کلمه 'class' یک کلمه کلیدی رزرو شده در JavaScript است. از آنجا که JSX به فراخوانی‌های تابع JavaScript کامپایل می‌شود، استفاده از 'class' به عنوان نام prop باعث خطای نحوی می‌شود. React عبارت 'className' را انتخاب کرد زیرا با نام خصوصیت DOM API (element.className) که JavaScript قبلاً برای خواندن و تنظیم کلاس‌های CSS روی عناصر DOM استفاده می‌کند مطابقت دارد.
آیا باید HTML را به صورت دستی به JSX تبدیل کنم؟
خیر. می‌توانید از یک مبدل آنلاین مانند این ابزار استفاده کنید، یا آن را با کتابخانه‌هایی مانند htmltojsx (npm) یا html-react-parser خودکار کنید. برای مهاجرت‌های در مقیاس بزرگ، ابزارهایی مانند codemod یا jscodeshift می‌توانند کل codebaseها را تبدیل کنند. تبدیل دستی فقط برای قطعه‌های کوچک چند خطی عملی است.
استایل‌های درون‌خطی در JSX چگونه مدیریت می‌شوند؟
در JSX، ویژگی style یک شیء JavaScript می‌پذیرد، نه یک رشته CSS. نام خصوصیات از camelCase استفاده می‌کنند (backgroundColor به جای background-color). مقادیر به طور پیش‌فرض رشته هستند، اما برخی خصوصیات عددی مانند lineHeight، opacity و zIndex اعداد ساده بدون واحد را می‌پذیرند. آکولادهای دوتایی در style={{ color: 'red' }} نحو خاصی نیستند: آکولادهای بیرونی یک عبارت JSX هستند، و آکولادهای درونی یک شیء تحت‌اللفظی JavaScript هستند.
آیا می‌توانم از کامنت‌های HTML در JSX استفاده کنم؟
خیر. کامنت‌های HTML (<!-- comment -->) در JSX معتبر نیستند. به جای آن از کامنت‌های block در JavaScript که در آکولاد قرار گرفته‌اند استفاده کنید: {/* comment */}. این مبدل تبدیل را به طور خودکار انجام می‌دهد. کامنت‌های JSX باید درون یک عنصر والد باشند، نه در سطح بالایی return کامپوننت.
کدام ویژگی‌های HTML در JSX تغییر نمی‌کنند؟
اکثر ویژگی‌های HTML نام اصلی خود را در JSX حفظ می‌کنند. نمونه‌های رایج شامل id، src، href، alt، type، name، value، placeholder، disabled، hidden و تمام ویژگی‌های data-* و aria-* هستند. فقط ویژگی‌هایی که نام HTML آن‌ها با نام خصوصیت DOM API متفاوت است نیاز به تغییر دارند: class به className، for به htmlFor، و ویژگی‌های چند کلمه‌ای که از حروف کوچک به camelCase تغییر می‌کنند.
آیا dangerouslySetInnerHTML همان تبدیل HTML به JSX است؟
خیر. dangerouslySetInnerHTML رندر React را دور می‌زند و HTML خام را مستقیماً به DOM تزریق می‌کند، که خطر آسیب‌پذیری‌های XSS را به همراه دارد. تبدیل HTML به JSX عناصر React واقعی تولید می‌کند که از DOM مجازی React عبور می‌کنند و به طور پیش‌فرض ایمن هستند. از تبدیل HTML به JSX برای نشانه‌گذاری استاتیکی که کنترل دارید استفاده کنید. از dangerouslySetInnerHTML فقط زمانی استفاده کنید که باید HTML معتبر از یک منبع خارجی را که نمی‌توان به JSX تبدیل کرد رندر کنید.