အခမဲ့ HTML ကုဒ်ဝှက်/ဖြည်စက်

မည်သို့ အလုပ်လုပ်သည်

ဤနေရာတွင် HTML encoding နှင့် decoding ကို ကိုယ်တိုင်ရေးထားသော regex replacement နှင့် ကိန်းသေ named-entity lookup table ကို သုံး၍ လုပ်ဆောင်ပါသည် — ပြင်ပ encoding library၊ server round-trip မပါဝင်ပါ။ á သို့မဟုတ် “ ကဲ့သို့ များမကြာခဏ မတွေ့ရသော named entity များကို decode ရန် ကိရိယာသည် browser ၏ ကိုယ်ပိုင် HTML parser ကို zero-cost fallback အဖြစ် လွှဲအပ်သည်။

1. 1
   Regex သည် အစားထိုးရန် character များကို scan လုပ်သည်

   Encode လုပ်သောအခါ regex နှစ်ခုအနက် တစ်ခုသည် သင့် input ကို scan လုပ်သည် — HTML-significant နှင့် special character ခန့်မှန်း ၂၅ ခုကို ဖုံးလွှမ်းသော target pattern တစ်ခု (သို့) U+007F အထက်ရှိ code point တိုင်းကို ဖမ်းယူသော ပိုကျယ်ပြန့်သော pattern တစ်ခု။ Match တိုင်းကို character တစ်ခုချင်း ဖမ်းယူသည်။
2. 2
   Lookup table (သို့) codePointAt() သည် entity ကို ထုတ်ပေးသည်

   Named-entity output အတွက် ကိုက်ညီသော character များကို ကိန်းသေ table (ဥပမာ & → &, © → ©) ထဲတွင် ရှာသည်။ Decimal သို့မဟုတ် hex output အတွက် String.codePointAt() သည် Unicode code point ကို ရယူပြီး &#NNN; သို့မဟုတ် &#xNNN; အဖြစ် ဖော်မတ်ချသည် — surrogate pair များကို regex တွင် Unicode 'u' flag သုံးထားသောကြောင့် မှန်ကန်စွာ ကိုင်တွယ်သည်။
3. 3
   Single-pass regex သည် entity များကို character သို့ ပြန်ပြောင်းသည်

   Decode လုပ်သောအခါ regex pass တစ်ခုတည်းသည် entity token အားလုံး (&, A, A, etc.) ကို ခွဲခြားပြီး handler မှန်ကန်သည်သို့ လမ်းညွှန်သည်: hex parseInt(base 16)၊ decimal Number()၊ named reverse-lookup (သို့) — ကိန်းသေ table ထဲမရှိသော entity မည်သည့်တစ်ခုအတွက်မဆို — browser သည် native ဖြင့် parse လုပ်ပေးသော textarea element တစ်ခု၏ innerHTML — browser ၏ built-in entity table မှ မှန်ကန်သော character ကို ပြန်ပေးသည်။
4. 4
   ရလဒ် ချက်ချင်း ပေါ်လာသည်; Clipboard API မှတစ်ဆင့် clipboard သို့ ကူးယူပါ

   Output ကို React useMemo မှတစ်ဆင့် keystroke တိုင်းတွင် တစ်ပြိုင်နက် ပြန်တွက်ချက်ပေးသည်။ Copy သည် navigator.clipboard.writeText() — ခေတ်မီ async Clipboard API — ကို ကန့်သတ်ထားသော context များအတွက် တိတ်တဆိတ် catch တစ်ခုနှင့်အတူ သုံးသည်။

ဆက်နွှယ်သော ကိရိယာများ