Kyauta Mai Ɓoyewa & Bayyana HTML

Yadda Yake Aiki

Ɓoyewa da fassarar HTML a nan tana gudana gaba ɗaya a burauzarka ta amfani da maye gurbin regex da aka rubuta da hannu da tebur bincike na entity-mai-suna da aka rubuta kai tsaye — babu ɗakin karatu na ɓoyewa na bangare na uku, babu tafiya-zuwa-uwar garke. Don fassara entities da aka bayar da suna marasa yawa (kamar á ko “), kayan aikin yana wakiltar wa mai nazari na HTML na burauza da kansa a matsayin madadin ba tare da farashi ba.

1. 1
   Regex yana bincika haruffa don maye gurbi

   A ɓoyewa, daya daga cikin regex biyu masu fahimtar Unicode yana gudana a kan shigarwarka: wata alama da take niyya wadda take rufe haruffa ~25 da suke da muhimmanci a HTML da na musamman, ko wata alama mafi fadi wadda take kama kowace codepoint sama da U+007F. Ana kama kowace daidaituwa harafi-bayan-harafi.
2. 2
   Tebur bincike ko codePointAt() suna samar da entity

   Don fitarwar entity-mai-suna, ana neman haruffan da suka dace a wani tebur da aka rubuta kai tsaye (misali & → &, © → ©). Don fitarwar decimal ko hex, String.codePointAt() yana samo codepoint na Unicode kuma yana tsara shi a matsayin &#NNN; ko &#xNNN; — ana sarrafa nau'in surrogate daidai saboda regex yana amfani da alamar 'u' na Unicode.
3. 3
   Wucewar regex guda ɗaya tana fassara entities baya zuwa haruffa

   A fassarawa, wucewar regex guda ɗaya tana gano dukkan alamomin entity (&, A, A, da sauransu) kuma tana ba da kowanne hanya daidai: hex parseInt(tushe 16), decimal Number(), bincike-baya na mai-suna, ko — don kowace entity da ba ta cikin tebur da aka rubuta kai tsaye ba — wani abu na textarea wadda innerHTML dinta burauza take nazari ta asali, tana mayar da daidai harafin daga teburin entity na burauza da aka gina.
4. 4
   Sakamako yana bayyana nan take; kwafi zuwa clipboard ta Clipboard API

   Ana sake lissafta fitarwa lokaci guda a kowace dannawa ta React useMemo. Kwafi yana amfani da navigator.clipboard.writeText() — Clipboard API na zamani mai jinkirtawa — tare da kama shiru don yanayoyi masu ƙuntatawa.

Kayan Aiki Masu Alaƙa