ነፃ HTML አመስጣሪ እና ፈቺ

እንዴት እንደሚሠራ

እዚህ ያለው የHTML ኮድ ማድረግ እና መፍታት ሙሉ በሙሉ በአሳሽዎ ውስጥ በእጅ በተጻፈ የregex መተካት እና በቋሚ የስያሜ-አካላት ማጣቀሻ ሰንጠረዥ ይሠራል — ምንም የሦስተኛ ወገን ኮድ ማድረጊያ ላይብረሪ፣ ምንም የአገልጋይ ምልልስ የለም። ብዙም ያልተለመዱ የስያሜ አካላትን (እንደ á ወይም “) ለመፍታት መሣሪያው ምንም ወጪ የሌለው መጠባበቂያ ሆኖ ለአሳሹ የራሱ HTML ተንታኝ ይሰጣል።

1. 1
   Regex የሚተኩ ቁምፊዎችን ይፈልጋል

   ኮድ ሲያደርግ፣ Unicodeን ከሚያውቁ ሁለት regexዎች አንዱ በግቤትዎ ላይ ይሠራል፦ ~25 የተለመዱ በHTML ትርጉም ያላቸውን እና ልዩ ቁምፊዎችን የሚሸፍን ያነጣጠረ ንድፍ፣ ወይም ከU+007F በላይ ያለውን እያንዳንዱን codepoint የሚይዝ ሰፊ ንድፍ። እያንዳንዱ ተዛማጅ ቁምፊ በቁምፊ ይያዛል።
2. 2
   የማጣቀሻ ሰንጠረዥ ወይም codePointAt() አካሉን ያመርታል

   ለስያሜ-አካል ውጤት፣ የተዛመዱ ቁምፊዎች በቋሚ ሰንጠረዥ ውስጥ ይፈለጋሉ (ለምሳሌ & → &፣ © → ©)። ለአስርዮሽ ወይም ለhex ውጤት፣ String.codePointAt() የUnicode codepointን ያገኛል እና እንደ &#NNN; ወይም &#xNNN; ይቀርጸዋል — regexው የUnicode 'u' ባንዲራን ስለሚጠቀም surrogate ጥንዶች በትክክል ይስተናገዳሉ።
3. 3
   በአንድ ዙር regex አካላትን መልሶ ወደ ቁምፊዎች ይፈታል

   ሲፈታ፣ አንድ የregex ዙር ሁሉንም የአካል ምልክቶች (&፣ A፣ A ወዘተ.) ይለያል እና እያንዳንዱን ወደ ትክክለኛው ተቆጣጣሪ ይልካል፦ hex parseInt(base 16)፣ አስርዮሽ Number()፣ የስያሜ ተገላቢጦሽ ፍለጋ፣ ወይም — በቋሚ ሰንጠረዡ ውስጥ ለሌለ ማንኛውም አካል — innerHTMLውን አሳሹ በራሱ የሚተነትነው የtextarea አካል፤ ይህም ትክክለኛውን ቁምፊ ከአሳሹ አብሮገነብ የአካላት ሰንጠረዥ ይመልሳል።
4. 4
   ውጤቱ ወዲያውኑ ይታያል፤ በClipboard API ወደ ቅንጥብ ሰሌዳ ይቅዱ

   ውጤቱ በReact useMemo በእያንዳንዱ የቁልፍ ጭነት ወዲያውኑ እንደገና ይሰላል። መቅዳት navigator.clipboard.writeText()ን — ዘመናዊውን ያልተመሳሰለ Clipboard API — ይጠቀማል፤ ለተገደቡ አውዶችም ስህተቱን በዝምታ ይይዛል።

ተዛማጅ መሳሪያዎች