സൗജന്യ HTML എൻകോഡർ & ഡീകോഡർ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഇവിടെ HTML എൻകോഡിംഗും ഡീകോഡിംഗും കൈകൊണ്ട് എഴുതിയ regex replacement ഉം ഒരു ഹാർഡ്‌കോഡഡ് named-entity ലുക്കപ്പ് പട്ടികയും ഉപയോഗിച്ച് പൂർണ്ണമായും നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു — മൂന്നാം കക്ഷി എൻകോഡിംഗ് ലൈബ്രറിയില്ല, സെർവർ റൗണ്ട്-ട്രിപ്പില്ല. അപൂർവ named entities (á അല്ലെങ്കിൽ “ പോലുള്ളവ) ഡീകോഡ് ചെയ്യാൻ, ടൂൾ ബ്രൗസറിന്റെ സ്വന്തം HTML പാഴ്സറിലേക്ക് ഒരു സീറോ-കോസ്റ്റ് ഫോൾബാക്കായി ഏൽപ്പിക്കുന്നു.

1. 1
   മാറ്റേണ്ട ക്യാരക്ടറുകൾക്കായി Regex സ്കാൻ ചെയ്യുന്നു

   എൻകോഡ് ചെയ്യുമ്പോൾ, രണ്ട് Unicode-ബോധമുള്ള regex-കളിൽ ഒന്ന് നിങ്ങളുടെ ഇൻപുട്ടിലൂടെ പ്രവർത്തിക്കുന്നു: ~25 സാധാരണ HTML-പ്രധാന, പ്രത്യേക ക്യാരക്ടറുകൾ ഉൾക്കൊള്ളുന്ന ഒരു ടാർഗെറ്റഡ് പാറ്റേൺ, അല്ലെങ്കിൽ U+007F-ന് മുകളിലുള്ള എല്ലാ കോഡ് പോയിന്റുകളും പിടിക്കുന്ന ഒരു വിശാലമായ പാറ്റേൺ. ഓരോ മാച്ചും ക്യാരക്ടർ ബൈ ക്യാരക്ടർ ഇന്റർസെപ്റ്റ് ചെയ്യപ്പെടുന്നു.
2. 2
   ലുക്കപ്പ് പട്ടികയോ codePointAt() ഓ എന്റിറ്റി നിർമ്മിക്കുന്നു

   Named-entity ഔട്ട്പുട്ടിന്, മാച്ച് ചെയ്ത ക്യാരക്ടറുകൾ ഒരു ഹാർഡ്‌കോഡഡ് പട്ടികയിൽ (ഉദാ. & → &, © → ©) നോക്കുന്നു. ദശാംശ അല്ലെങ്കിൽ ഹെക്സ് ഔട്ട്പുട്ടിന്, String.codePointAt() Unicode കോഡ് പോയിന്റ് ലഭ്യമാക്കി &#NNN; അല്ലെങ്കിൽ &#xNNN; ആയി ഫോർമാറ്റ് ചെയ്യുന്നു — regex Unicode 'u' ഫ്ലാഗ് ഉപയോഗിക്കുന്നതിനാൽ surrogate ജോഡികൾ ശരിയായി കൈകാര്യം ചെയ്യപ്പെടുന്നു.
3. 3
   ഒറ്റ-പാസ് regex എന്റിറ്റികളെ തിരികെ ക്യാരക്ടറുകളാക്കി ഡീകോഡ് ചെയ്യുന്നു

   ഡീകോഡ് ചെയ്യുമ്പോൾ, ഒരൊറ്റ regex പാസ് എല്ലാ എന്റിറ്റി ടോക്കണുകളും (&, A, A മുതലായവ) തിരിച്ചറിഞ്ഞ് ഓരോന്നും ശരിയായ ഹാൻഡ്‌ലറിലേക്ക് റൂട്ട് ചെയ്യുന്നു: ഹെക്സ് parseInt(base 16), ദശാംശ Number(), named reverse-lookup, അല്ലെങ്കിൽ — ഹാർഡ്‌കോഡഡ് പട്ടികയിലില്ലാത്ത ഏത് എന്റിറ്റിക്കും — ബ്രൗസർ innerHTML natively പാഴ്സ് ചെയ്യുന്ന ഒരു ടെക്സ്റ്റ്ഏരിയ എലമെന്റ്, ബ്രൗസറിന്റെ ബിൽറ്റ്-ഇൻ എന്റിറ്റി പട്ടികയിൽ നിന്ന് ശരിയായ ക്യാരക്ടർ നൽകുന്നു.
4. 4
   ഫലം ഉടനടി പ്രത്യക്ഷപ്പെടുന്നു; Clipboard API വഴി ക്ലിപ്ബോർഡിലേക്ക് പകർത്തുക

   React useMemo വഴി ഓരോ കീസ്ട്രോക്കിലും ഔട്ട്പുട്ട് സിൻക്രണസ് ആയി വീണ്ടും കണക്കാക്കുന്നു. പകർത്തൽ navigator.clipboard.writeText() ഉപയോഗിക്കുന്നു — ആധുനിക async Clipboard API — നിയന്ത്രിത സന്ദർഭങ്ങൾക്ക് ഒരു നിശബ്ദ catch-ഓടെ.

അനുബന്ധ ടൂളുകൾ