जावास्क्रिप्ट में HTML संस्थाओं को एनकोड करें


108

मैं एक सीएमएस में काम कर रहा हूं जो उपयोगकर्ताओं को सामग्री दर्ज करने की अनुमति देता है। समस्या यह है कि जब वे प्रतीकों को जोड़ते हैं ®, तो यह सभी ब्राउज़रों में अच्छी तरह से प्रदर्शित नहीं हो सकता है। मैं उन प्रतीकों की एक सूची स्थापित करना चाहूंगा जिन्हें खोजा जाना चाहिए और फिर संबंधित HTML इकाई में परिवर्तित कर दिया जाना चाहिए। उदाहरण के लिए

® => ®
& => &
© => ©
™ =>™

रूपांतरण के बाद, इसे एक <sup>टैग में लपेटने की आवश्यकता है , जिसके परिणामस्वरूप:

® => <sup>&reg;</sup>

क्योंकि एक विशेष फ़ॉन्ट आकार और गद्दी शैली आवश्यक है:

sup { font-size: 0.6em; padding-top: 0.2em; }

क्या जावास्क्रिप्ट कुछ इस तरह होगा?

var regs = document.querySelectorAll('®');
  for ( var i = 0, l = imgs.length; i < l; ++i ) {
  var [?] = regs[i];
  var [?] = document.createElement('sup');
  img.parentNode.insertBefore([?]);
  div.appendChild([?]);
}

जहां "[?]" का अर्थ है कि कुछ ऐसा है जिसके बारे में मुझे यकीन नहीं है।

अतिरिक्त जानकारिया:

  • मैं शुद्ध जावास्क्रिप्ट के साथ ऐसा करना चाहता हूं, ऐसा कुछ नहीं जिसके लिए jQuery जैसी लाइब्रेरी की आवश्यकता हो, धन्यवाद।
  • बैकेंड रूबी है
  • रिफाइनरीसीएमएस का उपयोग करना जो रूबी ऑन रेल्स के साथ बनाया गया है

आपका बैकएंड क्या है? अगर यह php है, तो आपके लिए इसकी देखभाल करने के लिए कार्य हैं, और मुझे यकीन है कि अन्य भाषाओं में भी है। इसके अलावा, Google: developwithstyle.com/articles/2010/06/29/…
क्रिस बेकर

5
UTF-8-एन्कोडेड पाठ को स्वीकार करने और आउटपुट करने के लिए एक बेहतर समाधान हो सकता है। उपयोग में आने वाला प्रत्येक ब्राउज़र आज UTF-8 का समर्थन करता है। HTML ओर, आप accept-charset="UTF-8"अपने <form>टैग में जोड़ना चाहते हैं । सर्वर पर, आप यह सुनिश्चित करना चाहेंगे कि आपका आउटपुट UTF-8 एन्कोडेड है, और यह कि आपका वेब सर्वर ब्राउज़र को बताता है कि यह ( Content-Typeहेडर के माध्यम से ) है। Rentzsch.tumblr.com/post/9133498042/… देखें यदि आप वह सब करते हैं, और एक ब्राउज़र चरित्र को सही ढंग से प्रदर्शित नहीं करता है, तो एक इकाई के साथ चरित्र को बदलने से कोई फर्क नहीं पड़ेगा।
पॉल डी। वेट

@ क्रिस रेल्स पर रूबी के साथ निर्मित सीएमएस में काम कर रहे हैं।
जेलगार्डो

क्लाइंट-साइड जावास्क्रिप्ट में HTML इकाई संदर्भ के लिए एक चरित्र को बदलना गलत है, क्योंकि क्लाइंट-साइड जावास्क्रिप्ट डोम पर संचालित होता है, जहां इकाइयां मौजूद नहीं हैं। supतत्वों में "®" लपेटने से अधिक समस्याओं का कारण बन सकता है, क्योंकि यह संभवतः हल कर सकता है, क्योंकि कई फोंट में, "®" छोटा है और सबस्क्रिप्ट स्थिति में है, इसलिए आप इसे पहचान नहीं पाएंगे।
जुक्का के। कोर्पेला

@ JukkaK.Korpela, इसलिए यह विचार करते हुए कि मुझे यह संबोधित करने की आवश्यकता है कि कुछ html इकाइयां ठीक से प्रदर्शित नहीं होंगी, आप इसे कैसे संबोधित करेंगे? और इसमें लपेटना <sup>कोई समस्या नहीं है क्योंकि मैंने ब्लॉग पोस्ट के लिए उपयोग किए जाने वाले विशिष्ट फ़ॉन्ट का परीक्षण किया है, लेकिन यह विचार करने के लिए एक अच्छा बिंदु है।
जेलगार्डो

जवाबों:


180

आप किसी भी वर्ण को उसके HTML निकाय के समकक्ष यूनिकोड श्रेणी में बदलने के लिए regex का उपयोग कर सकते हैं। कोड कुछ इस तरह दिखेगा:

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

उनके html इकाई समकक्ष के साथ, जो केवल है - यह कोड दी गई श्रेणी में सभी वर्णों (9999, साथ ही एम्परसेंड, अधिक से अधिक और कम से कम यूनिकोड 00A0) का स्थान ले लेगा &#nnn;जहां nnnयूनिकोड मान हम से प्राप्त किया जाता है charCodeAt

इसे यहाँ क्रिया में देखें: http://jsfiddle.net/E3EqX/13/ (यह उदाहरण उदाहरण में उपयोग किए गए तत्व चयनकर्ताओं के लिए jQuery का उपयोग करता है। ऊपर दिया गया आधार कोड, स्वयं jQuery का उपयोग नहीं करता है)

इन रूपांतरणों को बनाने से सभी समस्याएं हल नहीं होती हैं - सुनिश्चित करें कि आप UTF8 वर्ण एन्कोडिंग का उपयोग कर रहे हैं, सुनिश्चित करें कि आपका डेटाबेस UTF8 में स्ट्रिंग्स को संग्रहीत कर रहा है। आप अभी भी ऐसे उदाहरण देख सकते हैं जहाँ वर्ण सही ढंग से प्रदर्शित नहीं होते हैं, जो सिस्टम फ़ॉन्ट विन्यास और आपके नियंत्रण से बाहर अन्य मुद्दों पर निर्भर करता है।

प्रलेखन


Jsfiddle के लिए बहुत बहुत धन्यवाद। इसलिए इसे लागू करने के लिए। मैं इसे केवल अपनी .jsफ़ाइल में जोड़ सकता हूं और अन्य चीजों को एक के साथ लपेटने के लिए जोड़ सकता हूं <sup>?
जेलगार्डो

2
@ जैलगार्डो I ने उदाहरण को फिर से लिखा है इसलिए यह supटैग (या किसी अन्य टैग) को जोड़ता है , और यह एक फ़ंक्शन में निहित है: jsfiddle.net/E3EqX/4 । इसका उपयोग करने के लिए, आपको अपने प्रोजेक्ट के लिए "एन्कोडएंडवैप" फ़ंक्शन को कॉपी करना होगा।
क्रिस बेकर

1
@ स्वच्छ कोड स्निपेट के लिए क्रिस धन्यवाद, हालांकि इसमें एक बग है: "[\ u00A0- \ u99999]" वह नहीं करता है जो आप इसे करने की उम्मीद करेंगे, बल्कि इसके बराबर है "[\ u00A0- [u9999]। 9 | " - अर्थात। चरित्र "9" को एक HTML इकाई के साथ भी बदल दिया जाएगा। आप कोशिश कर सकते हैं कि फिडल में भी। मैं जवाब के लिए एक फिक्स सुझाव दूंगा।
SB

@ एसबी उस नोट के लिए धन्यवाद, मैं भी अंतिम वोट डालने के लिए मिला :) :)
क्रिस बेकर

1
हालांकि मैं मानता हूं कि @mathias Bynens का उत्तर अधिक पूर्ण है, उसका समाधान 84KB है, और इसने मुझे एक विकल्प की तलाश जारी रखने के लिए बनाया है। ऐसा लगता है कि OK-ish, हालांकि किसी में charCodes <65, और> 90 && <97 के बीच भी शामिल हो सकता है?
फ्लोरियन मेर्टेंस

63

वर्तमान में स्वीकृत उत्तर में कई मुद्दे हैं। यह पोस्ट उन्हें समझाती है, और अधिक मजबूत समाधान प्रदान करती है। उस उत्तर में सुझाए गए समाधान में पहले था:

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
  return '&#' + i.charCodeAt(0) + ';';
});

iझंडा बेमानी है, क्योंकि U + 00A0 से U + 9999 तक की सीमा में कोई यूनिकोड प्रतीक होता है एक अपरकेस / लोअर केस संस्करण है कि एक ही श्रेणी से बाहर है।

mक्योंकि झंडा अनावश्यक है ^या $नियमित अभिव्यक्ति में इस्तेमाल नहीं कर रहे हैं।

रेंज U + 00A0 से U + 9999 क्यों? यह मनमाना लगता है।

वैसे भी, एक समाधान के लिए जो इनपुट में सभी सुरक्षित और मुद्रण योग्य ASCII प्रतीकों (सूक्ष्म प्रतीकों सहित) को छोड़कर सभी को सही ढंग से एन्कोड करता है , और सभी नामित चरित्र संदर्भों (केवल HTML4 में नहीं) को लागू करता है, वह लाइब्रेरी का उपयोग करता है (अस्वीकरण: यह पुस्तकालय मेरा है )। इसकी README से:

वह ("HTML संस्थाओं के लिए") एक मजबूत HTML इकाई एनकोडर / डिकोडर है जो जावास्क्रिप्ट में लिखा गया है। यह HTML के अनुसार सभी मानकीकृत नामित वर्ण संदर्भों का समर्थन करता है , अस्पष्ट एम्परसेंड और अन्य किनारे के मामलों को संभालता है जैसे कि एक ब्राउज़र होगा , एक व्यापक परीक्षण सूट है, और - कई अन्य जावास्क्रिप्ट समाधानों के विपरीत - वह सूक्ष्म यूनिकोड प्रतीकों को ठीक तरह से संभालता है। एक ऑनलाइन डेमो उपलब्ध है।

यह प्रासंगिक स्टैक ओवरफ्लो उत्तर भी देखें ।


12
इसके अलावा, वह पुस्तकालय है ... 84KB! ऑटो ... कम कनेक्शन पर मोबाइल फोन पर डाउनलोड करने का प्रयास करें। एक समझौता कहीं करना पड़ता है ..
फ्लोरियन मर्टेंस 15

1
@FlorianMertens + gzip को छोटा करने के बाद वह ~ 24 KB है। यह अभी भी बड़ा है, लेकिन दिन के अंत में यदि आप HTML संस्थाओं को सही ढंग से डिकोड करना चाहते हैं, तो आपको उन पर सभी डेटा की आवश्यकता होगी - इसके आसपास कोई रास्ता नहीं है। यदि आप प्रदर्शन को प्रभावित किए बिना पुस्तकालय को छोटा बनाने का एक तरीका खोज सकते हैं, तो कृपया एक पुल अनुरोध सबमिट करें।
मथियास ब्यनेंस

2
@MathiasBynens, इसमें कोई संदेह नहीं है कि आपकी लाइब्रेरी अच्छी है, लेकिन आप स्वीकृत उत्तरों में समस्या को उजागर करने के लिए कमेंट बॉक्स का उपयोग कर सकते हैं और कृपया अपना बेहतर उत्तर कोड ब्लॉक में प्रस्तुत करें
diEcho

3
@drzaus छवियां बड़ी होने के साथ दूर हो सकती हैं क्योंकि वे बहुत अधिक डेटा संग्रहीत करते हैं, और कम संपीड़ित डेटा को डिकोड करने के लिए तेज़ होता है। हालाँकि प्रोग्राम कोड अलग है, बहुत बार एक पूरी लाइब्रेरी जोड़ी जाती है और बहुत कम उपयोग होता है। पुस्तकालयों के कोड में कभी-कभी आपके स्वयं के कोड से अधिक लाइनें होती हैं! साथ ही कुछ लोग कामेच्छा संबंधी समस्याओं को खोजने / डिबग करने के लिए परेशान होंगे (या फ़र्ज़ी अपडेट भी कर सकते हैं), इसलिए मेमोरी लीक या अन्य मुद्दे सॉफ्टवेयर में अनियंत्रित कोड के साथ कई लिबास में बने रह सकते हैं। यदि कोई व्यक्ति HTML-असुरक्षित वर्णों को केवल एनकोड / एस्केप करना चाहता है, तो केवल कुछ पंक्तियों की आवश्यकता है, न कि 80kb।
bryc

1
@MarcoKlein हाँ, मैं अपने पोस्ट में समझाता हूँ। यह वास्तव में एक समस्या है कि छोटी गाड़ी कोड स्निपेट से ग्रस्त है। समाधान मैं इंगित करता है कि समस्या नहीं है। (देखें "सूक्ष्म प्रतीकों सहित!")
मथियास ब्यनेंस

29

मुझे एक ही समस्या थी और संस्थाओं को बनाने और सामान्य पात्रों में वापस अनुवाद करने के लिए 2 फ़ंक्शन बनाए। निम्न विधियाँ HTML स्ट्रिंग और स्ट्रिंग स्ट्रिंग पर किसी भी स्ट्रिंग का अनुवाद करती हैं

/**
 * Convert a string to HTML entities
 */
String.prototype.toHtmlEntities = function() {
    return this.replace(/./gm, function(s) {
        // return "&#" + s.charCodeAt(0) + ";";
        return (s.match(/[a-z0-9\s]+/i)) ? s : "&#" + s.charCodeAt(0) + ";";
    });
};

/**
 * Create string from HTML entities
 */
String.fromHtmlEntities = function(string) {
    return (string+"").replace(/&#\d+;/gm,function(s) {
        return String.fromCharCode(s.match(/\d+/gm)[0]);
    })
};

आप इसे निम्नानुसार उपयोग कर सकते हैं:

var str = "Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æøπ£¨ ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

कंसोल में आउटपुट:

Entities: &#68;&#105;&#116;&#32;&#105;&#115;&#32;&#101;&#180;&#8224;&#174;&#165;&#168;&#169;&#729;&#8747;&#248;&#8230;&#710;&#402;&#8710;&#247;&#8721;&#8482;&#402;&#8710;&#230;&#248;&#960;&#163;&#168;&#160;&#402;&#8482;&#101;&#110;&#32;&#116;&#163;&#101;&#233;&#115;&#116;
String: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æøπ£¨ ƒ™en t£eést 

यह समाधान टीवीओएस पर भी काम करता है, इसलिए यह सभी मामलों में अच्छी तरह से एन्कोडिंग मुद्दों को हल कर सकता है।
लोरेटोपरिसी

4
क्या यह अतिवादी नहीं है? आप सब कुछ HTML संस्थाओं में बदल रहे हैं , यहां तक ​​कि "सुरक्षित" अक्षर जैसे "abc", "123" ... यहां तक ​​कि
व्हाट्सएप

1
यह एक बुरा जवाब है। वेब पर दस्तावेजों के 50% + में कुछ utf-8 के साथ ज्यादातर लैटिन 1 हैं। सुरक्षित वर्णों की आपकी एन्कोडिंग 500% से 600% तक बढ़ जाएगी, बिना किसी लाभ के।
होल्डऑफ ह्यूंगर

कृपया ऐसे mपैटर्न में पैटर्न संशोधक के उद्देश्य की व्याख्या करें जिसमें कोई एंकर नहीं है। तो आप sएक डॉट युक्त पैटर्न के लिए उपयोग करने का मतलब है ?
मिकमैकूसा

20

किसी भी पुस्तकालय के बिना, यदि आपको IE <9 का समर्थन करने की आवश्यकता नहीं है, तो आप एक html तत्व बना सकते हैं और Node.textContent के साथ इसकी सामग्री सेट कर सकते हैं :

var str = "<this is not a tag>";
var p = document.createElement("p");
p.textContent = str;
var converted = p.innerHTML;

यहाँ एक उदाहरण है: https://jsfiddle.net/1erdhehv/

अद्यतन: यह केवल HTML टैग संस्थाओं (&, <, और>) के लिए काम करता है।


2
TextContent के बजाय इनर टेक्स्ट का उपयोग क्यों नहीं करें?
रिक

@ क्लिक करें, जवाब में एक शॉट में जुड़े टेक्स्ट कॉन्टेंट के लिए एमडीएन दस्तावेज़ दें। इसे उद्धृत करते हुए "textContent और HTMLElement.innerText आसानी से भ्रमित होते हैं, लेकिन महत्वपूर्ण गुणों में दोनों गुण अलग - अलग हैं ।"
आदर्श 10

यह एक महान समाधान होगा, लेकिन यह "चरित्र को ठीक से एनकोड नहीं करता है।
एंड्रियास

तुम सही हो। ऐसा लगता है कि यह समाधान केवल html टैग वर्णों के लिए काम कर सकता है (<,>, /)। मुझे इसे हटाने का प्रलोभन दिया जा रहा है।
antoineMoPa

19

आप इसका उपयोग कर सकते हैं।

var escapeChars = {
  '¢' : 'cent',
  '£' : 'pound',
  '¥' : 'yen',
  '€': 'euro',
  '©' :'copy',
  '®' : 'reg',
  '<' : 'lt',
  '>' : 'gt',
  '"' : 'quot',
  '&' : 'amp',
  '\'' : '#39'
};

var regexString = '[';
for(var key in escapeChars) {
  regexString += key;
}
regexString += ']';

var regex = new RegExp( regexString, 'g');

function escapeHTML(str) {
  return str.replace(regex, function(m) {
    return '&' + escapeChars[m] + ';';
  });
};

https://github.com/epeli/underscore.string/blob/master/escapeHTML.js

var htmlEntities = {
    nbsp: ' ',
    cent: '¢',
    pound: '£',
    yen: '¥',
    euro: '€',
    copy: '©',
    reg: '®',
    lt: '<',
    gt: '>',
    quot: '"',
    amp: '&',
    apos: '\''
};

function unescapeHTML(str) {
    return str.replace(/\&([^;]+);/g, function (entity, entityCode) {
        var match;

        if (entityCode in htmlEntities) {
            return htmlEntities[entityCode];
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#x([\da-fA-F]+)$/)) {
            return String.fromCharCode(parseInt(match[1], 16));
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#(\d+)$/)) {
            return String.fromCharCode(~~match[1]);
        } else {
            return entity;
        }
    });
};

4
मैन्युअल रूप से एन्कोडेबल वर्णों के एक यादृच्छिक सबसेट को जोड़ने से आपके और आपके सहकर्मियों के लिए मुसीबत खड़ी हो सकती है। एक एकल प्राधिकरण होना चाहिए जिसके लिए पात्रों को एन्कोड किया जाना चाहिए, शायद ब्राउज़र या असफल होना एक विशिष्ट पुस्तकालय जो व्यापक और बनाए रखने की संभावना है।
user234461

1
महान बिंदु, @ user234461। अगर किसी को भी यह अधिकार मिल गया, तो पूछताछ करने वाले दिमाग (मेरे जैसे) को जानना अच्छा लगेगा!
मूंगोटनसन

1
यह बहुत सारे HTML- संस्थाओं को याद करेगा, &rdquo; &uuml; &scaron;आदि के रूप में चबाना । सभी html- संस्थाओं की कम्प्यूटेशनल सूची काफी लंबी है: freeformatter.com/html-entities.html
lofihelsinki

7

यदि आप एक से अधिक बार html संस्थाओं को एनकोड करने से बचना चाहते हैं

function encodeHTML(str){
    return str.replace(/([\u00A0-\u9999<>&])(.|$)/g, function(full, char, next) {
      if(char !== '&' || next !== '#'){
        if(/[\u00A0-\u9999<>&]/.test(next))
          next = '&#' + next.charCodeAt(0) + ';';

        return '&#' + char.charCodeAt(0) + ';' + next;
      }

      return full;
    });
}

function decodeHTML(str){
    return str.replace(/&#([0-9]+);/g, function(full, int) {
        return String.fromCharCode(parseInt(int));
    });
}

# उदाहरण

var text = "<a>Content &#169; <#>&<&#># </a>";

text = encodeHTML(text);
console.log("Encode 1 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = encodeHTML(text);
console.log("Encode 2 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = decodeHTML(text);
console.log("Decoded: " + text);

// <a>Content © <#>&<&#># </a>

यह केवल तभी उपयोगी है जब आपके पास एक मिश्रित आंशिक रूप से बच गए पाठ के साथ शुरू करने के लिए है, और यह बग का परिचय देता है क्योंकि यह सभी तारों को ठीक से एनकोड नहीं कर सकता है: <#>यह बाहर निकलेगा<#&#62;
रिक

@ मेरे बारे में ध्यान देने के लिए धन्यवाद, मैंने इसे बेहतर बनाने के लिए अपना उत्तर अपडेट कर दिया है।
स्टेफन्सआरी

4

HTML विशेष वर्ण और इसके ESCAPE CODES

HTML द्वारा सुरक्षित वर्णों को बचाना चाहिए: हम HTML, XHTML या XML में केवल ASCII वर्णों का उपयोग करके किसी भी यूनिकोड चरित्र [Ex: & - U + 00026] का प्रतिनिधित्व करने के लिए एक चरित्र से बच का उपयोग कर सकते हैं। संख्यात्मक वर्ण संदर्भ [ Ex: एम्परसेंड (&) - &#38;] और नामांकित वर्ण संदर्भ [Ex: &amp;] प्रकार हैं character escape used in markup


पूर्वनिर्धारित एंटिटीज

    Original Character     XML entity replacement    XML numeric replacement  
                  <                                    &lt;                                           &#60;                    
                  >                                     &gt;                                         &#62;                    
                  "                                     &quot;                                      &#34;                    
                  &                                   &amp;                                       &#38;                    
                   '                                    &apos;                                      &#39;                    

HTML टैग को वेब पेज में एक सामान्य रूप के रूप में प्रदर्शित करने के लिए, जिसका हम उपयोग करते हैं <pre>, <code>टैग करते हैं या हम उनसे बच सकते हैं। स्ट्रिंग द्वारा "&"चरित्र की "&amp;"किसी भी घटना और स्ट्रिंग द्वारा चरित्र की किसी भी घटना के साथ प्रतिस्थापित करके स्ट्रिंग ">"को बचाना "&gt;"। उदाहरण के लिए:stackoverflow post

function escapeCharEntities() {
    var map = {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "'": "&apos;"
    };
    return map;
}

var mapkeys = '', mapvalues = '';
var html = {
    encodeRex : function () {
        return  new RegExp(mapkeys, 'g'); // "[&<>"']"
    }, 
    decodeRex : function () {
        return  new RegExp(mapvalues, 'g'); // "(&amp;|&lt;|&gt;|&quot;|&apos;)"
    },
    encodeMap : JSON.parse( JSON.stringify( escapeCharEntities () ) ), // json = {&: "&amp;", <: "&lt;", >: "&gt;", ": "&quot;", ': "&apos;"}
    decodeMap : JSON.parse( JSON.stringify( swapJsonKeyValues( escapeCharEntities () ) ) ),
    encode : function ( str ) {
        var encodeRexs = html.encodeRex();
        console.log('Encode Rex: ', encodeRexs); // /[&<>"']/gm
        return str.replace(encodeRexs, function(m) { console.log('Encode M: ', m); return html.encodeMap[m]; }); // m = < " > SpecialChars
    },
    decode : function ( str ) {
        var decodeRexs = html.decodeRex();
        console.log('Decode Rex: ', decodeRexs); // /(&amp;|&lt;|&gt;|&quot;|&apos;)/g
        return str.replace(decodeRexs, function(m) { console.log('Decode M: ', m); return html.decodeMap[m]; }); // m = &lt; &quot; &gt;
    }
};

function swapJsonKeyValues ( json ) {
    var count = Object.keys( json ).length;
    var obj = {};
    var keys = '[', val = '(', keysCount = 1;
    for(var key in json) {
        if ( json.hasOwnProperty( key ) ) {
            obj[ json[ key ] ] = key;
            keys += key;
            if( keysCount < count ) {
                val += json[ key ]+'|';
            } else {
                val += json[ key ];
            }
            keysCount++;
        }
    }
    keys += ']';    val  += ')';
    console.log( keys, ' == ', val);
    mapkeys = keys;
    mapvalues = val;
    return obj;
}

console.log('Encode: ', html.encode('<input type="password" name="password" value=""/>') ); 
console.log('Decode: ', html.decode(html.encode('<input type="password" name="password" value=""/>')) );

O/P:
Encode:  &lt;input type=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot;/&gt;
Decode:  <input type="password" name="password" value=""/>

यह Json प्रारूप में html स्रोत कोड को iframe srcdoc string में जोड़ने के लिए बहुत अच्छा है।
नीम मेघ

इसमें ® शामिल नहीं है, इसलिए यह ओपी की मदद नहीं करेगा। इसके अतिरिक्त, यह जेएस अन्य समाधानों की तुलना में बहुत अधिक जटिल है, यहां तक ​​कि केवल इस तरह से एक छोटी मैपिंग का उपयोग करते हैं। swapJsonKeyValues ​​को खराब रूप से नाम दिया गया है क्योंकि इसके साइड इफेक्ट्स की आवश्यकता है (मैपकी और मैपवैल्यू को परिभाषित करना)
रिक

@mickmackusa मैंने डिबग मान के साथ पोस्ट को अपडेट किया है। mएक इनपुट स्ट्रिंग के विशेष वर्ण रखता है।
यश

अगर पोस्ट में कोई गलती है। तो, कृपया पोस्ट को सही करने और टिप्पणियाँ प्रदान करने का प्रयास करें।
यश

3
var htmlEntities = [
            {regex:/&/g,entity:'&amp;'},
            {regex:/>/g,entity:'&gt;'},
            {regex:/</g,entity:'&lt;'},
            {regex:/"/g,entity:'&quot;'},
            {regex:/á/g,entity:'&aacute;'},
            {regex:/é/g,entity:'&eacute;'},
            {regex:/í/g,entity:'&iacute;'},
            {regex:/ó/g,entity:'&oacute;'},
            {regex:/ú/g,entity:'&uacute;'}
        ];

total = <some string value>

for(v in htmlEntities){
    total = total.replace(htmlEntities[v].regex, htmlEntities[v].entity);
}

एक सरणी समाधान


3
कृपया बताएं कि यह समस्या को ऊपर से अनोखे तरीके से कैसे हल करता है। नज़र में, यह प्रतीत होता है कि यह समाधान धीमा है, क्योंकि यह स्ट्रिंग को एक में सभी के बजाय कई पास में संशोधित करता है। हालाँकि, मैं गलत हो सकता हूं। किसी भी तरह से, आपको एक स्पष्टीकरण के साथ पोस्ट करना चाहिए।
जैक गिफिन

इसका एक विकल्प, आप सरणी से सीधे रेगेक्स का उपयोग कर सकते हैं ...: डी
सीजर डी ला क्रूज़

यह प्रत्येक वर्ण के लिए एक regex है (v में .... के लिए)। यदि आप UTF-8 को कवर करना चाहते हैं, तो यह 65,000 रेगेक्स और निष्पादन की 65,000 लाइनें होगी।
होल्डऑफ ह्यूंगर

2
मैं केवल तीन पात्रों को संस्थाओं में परिवर्तित करने में दिलचस्पी रखता हूं, इसलिए यह उत्तर मेरे मामले में बेहतर है और मुझे खुशी है कि यह यहां था
आकर्षित

2

यदि आप पहले से ही jQuery का उपयोग कर रहे हैं, तो प्रयास करें html()

$('<div>').text('<script>alert("gotcha!")</script>').html()
// "&lt;script&gt;alert("gotcha!")&lt;/script&gt;"

एक इन-मेमरी टेक्स्ट नोड को तुरंत तैयार किया जाता है, और html()उस पर कॉल किया जाता है।

यह बदसूरत है, यह स्मृति को थोड़ा बर्बाद करता है, और मुझे नहीं पता कि यह heपुस्तकालय जैसा कुछ है या नहीं, लेकिन यदि आप पहले से ही jQuery का उपयोग कर रहे हैं, तो शायद यह आपके लिए एक विकल्प है।

ब्लॉग पोस्ट से लिया गया है फेलिक्स गिसेन्डॉफर द्वारा jQuery के साथ HTML संस्थाओं को एनकोड करें।


3
हर बार एक नोड को इंस्टेंट करने से बचने के लिए, आप नोड को बचा सकते हैं: var converter=$("<div>");और बाद में इसका पुनः उपयोग करें: html1=converter.text(text1).html(); html2=converter.text(text2).html();...
फ्रांसेस्कोएमएम

1

कभी-कभी आप बस हर चरित्र को सांकेतिक शब्दों में बदलना चाहते हैं ... यह फ़ंक्शन regxp में "सब कुछ लेकिन कुछ भी नहीं" की जगह लेता है।

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}


1
Emojis को संरक्षित करने के लिए ^a द्वारा प्रतिस्थापित करें :। .function encode(e){return e.replace(/[.]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}
स्विस मिस्टर

1

Ourcodeworld Ourcodeworld से ट्यूटोरियल चेकआउट करें - जावास्क्रिप्ट के साथ HTML संस्थाओं को एन्कोड और डीकोड करें

सबसे महत्वपूर्ण बात, वह पुस्तकालय का उदाहरण है

he.encode('foo © bar ≠ baz ???? qux');
// → 'foo &#xA9; bar &#x2260; baz &#x1D306; qux'

// Passing an `options` object to `encode`, to explicitly encode all symbols:
he.encode('foo © bar ≠ baz ???? qux', {
 'encodeEverything': true
});

he.decode('foo &copy; bar &ne; baz &#x1D306; qux');
// → 'foo © bar ≠ baz ???? qux'

यह लाइब्रेरी संभवतः आपकी कोडिंग को आसान और बेहतर बनाएगी। यह लोकप्रिय है, नियमित रूप से अद्यतन किया जाता है और HTML युक्ति का अनुसरण करता है। इसकी खुद पर कोई निर्भरता नहीं है, जैसा कि पैकेज में देखा जा सकता है


ओपी ने वेनिला जेएस और वेनिला जेएस के लिए कहा। element.innerText। यदि लाइब्रेरी के लिए कोई लाभ है तो कृपया इसे अपने उत्तर में जोड़ें।
रिक

0

यहाँ बताया गया है कि मैंने एन्कोडिंग को कैसे लागू किया। मैंने ऊपर दिए गए उत्तरों से प्रेरणा ली।

function encodeHTML(str) {
  const code = {
      ' ' : '&nbsp;',
      '¢' : '&cent;',
      '£' : '&pound;',
      '¥' : '&yen;',
      '€' : '&euro;', 
      '©' : '&copy;',
      '®' : '&reg;',
      '<' : '&lt;', 
      '>' : '&gt;',  
      '"' : '&quot;', 
      '&' : '&amp;',
      '\'' : '&apos;'
  };
  return str.replace(/[\u00A0-\u9999<>\&''""]/gm, (i)=>code[i]);
}

// TEST
console.log(encodeHTML("Dolce & Gabbana"));
console.log(encodeHTML("Hamburgers < Pizza < Tacos"));
console.log(encodeHTML("Sixty > twelve"));
console.log(encodeHTML('Stuff in "quotation marks"'));
console.log(encodeHTML("Schindler's List"));
console.log(encodeHTML("<>"));


\ u00A0- \ u9999 में किसी भी इनपुट है कि अपने सूची में नहीं है के लिए टूट जाता है
रिक

कृपया ऐसे mपैटर्न में पैटर्न संशोधक के उद्देश्य की व्याख्या करें जिसमें कोई एंकर नहीं है।
मिकमैकूसा

0

एन्कोड या डिकोड करने के लिए आसान तरीका में से एक एचटीएमएल-इकाइयां
सिर्फ एक तर्क के साथ एक फ़ंक्शन कॉल करें ...

HTML- संस्थाओं को डिकोड करें

function decodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = text;
  return textArea.value;
}

HTML- संस्थाओं (JQuery) को डिकोड करें

function decodeHTMLEntities(text) {
  return $("<textarea/>").html(text).text();
}

HTML- संस्थाओं को एनकोड करें

function encodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerText = text;
  return textArea.innerHTML;
}

HTML- संस्थाओं (JQuery) को एनकोड करें

function encodeHTMLEntities(text) {
  return $("<textarea/>").text(text).html();
}

-1

आप यह charCodeAt()जांचने के लिए विधि का उपयोग कर सकते हैं कि निर्दिष्ट वर्ण का मान 127 से अधिक है या नहीं और इसका उपयोग करके संख्यात्मक वर्ण संदर्भ में कनवर्ट करें toString(16)


4
अच्छा होगा यदि आप जादू की संख्या के बारे में थोड़ा सा जोड़ सकते हैं 127और यह कैसे / क्यों काम करते हैं?)
yckart

-1
replaceHtmlEntities(text) {
  var tagsToReplace = {
    '&amp;': '&',
    '&lt;': '<',
    '&gt;': '>',
  };
  var newtext = text;
  for (var tag in tagsToReplace) {
    if (Reflect.apply({}.hasOwnProperty, this, [tagsToReplace, tag])) {
      var regex = new RegExp(tag, 'g');
      newtext = newtext.replace(regex, tagsToReplace[tag]);
    }
  }
  return newtext;
}

-1

<!DOCTYPE html>
<html>
<style>
button {
backround: #ccc;
padding: 14px;
width: 400px;
font-size: 32px;
}
#demo {
font-size: 20px;
font-family: Arial;
font-weight: bold;
}
</style>
<body>

<p>Click the button to decode.</p>

<button onclick="entitycode()">Html Code</button>

<p id="demo"></p>


<script>
function entitycode() {
  var uri = "quotation  = ark __ &apos; = apostrophe  __ &amp; = ampersand __ &lt; = less-than __ &gt; = greater-than __ 	non- = reaking space __ &iexcl; = inverted exclamation mark __ &cent; = cent __ &pound; = pound __ &curren; = currency __ &yen; = yen __ &brvbar; = broken vertical bar __ &sect; = section __ &uml; = spacing diaeresis __ &copy; = copyright __ &ordf; = feminine ordinal indicator __ &laquo; = angle quotation mark (left) __ &not; = negation __ &shy; = soft hyphen __ &reg; = registered trademark __ &macr; = spacing macron __ &deg; = degree __ &plusmn; = plus-or-minus  __ &sup2; = superscript 2 __ &sup3; = superscript 3 __ &acute; = spacing acute __ &micro; = micro __ &para; = paragraph __ &middot; = middle dot __ &cedil; = spacing cedilla __ &sup1; = superscript 1 __ &ordm; = masculine ordinal indicator __ &raquo; = angle quotation mark (right) __ &frac14; = fraction 1/4 __ &frac12; = fraction 1/2 __ &frac34; = fraction 3/4 __ &iquest; = inverted question mark __ &times; = multiplication __ &divide; = division __ &Agrave; = capital a, grave accent __ &Aacute; = capital a, acute accent __ &Acirc; = capital a, circumflex accent __ &Atilde; = capital a, tilde __ &Auml; = capital a, umlaut mark __ &Aring; = capital a, ring __ &AElig; = capital ae __ &Ccedil; = capital c, cedilla __ &Egrave; = capital e, grave accent __ &Eacute; = capital e, acute accent __ &Ecirc; = capital e, circumflex accent __ &Euml; = capital e, umlaut mark __ &Igrave; = capital i, grave accent __ &Iacute; = capital i, acute accent __ &Icirc; = capital i, circumflex accent __ &Iuml; = capital i, umlaut mark __ &ETH; = capital eth, Icelandic __ &Ntilde; = capital n, tilde __ &Ograve; = capital o, grave accent __ &Oacute; = capital o, acute accent __ &Ocirc; = capital o, circumflex accent __ &Otilde; = capital o, tilde __ &Ouml; = capital o, umlaut mark __ &Oslash; = capital o, slash __ &Ugrave; = capital u, grave accent __ &Uacute; = capital u, acute accent __ &Ucirc; = capital u, circumflex accent __ &Uuml; = capital u, umlaut mark __ &Yacute; = capital y, acute accent __ &THORN; = capital THORN, Icelandic __ &szlig; = small sharp s, German __ &agrave; = small a, grave accent __ &aacute; = small a, acute accent __ &acirc; = small a, circumflex accent __ &atilde; = small a, tilde __ &auml; = small a, umlaut mark __ &aring; = small a, ring __ &aelig; = small ae __ &ccedil; = small c, cedilla __ &egrave; = small e, grave accent __ &eacute; = small e, acute accent __ &ecirc; = small e, circumflex accent __ &euml; = small e, umlaut mark __ &igrave; = small i, grave accent __ &iacute; = small i, acute accent __ &icirc; = small i, circumflex accent __ &iuml; = small i, umlaut mark __ &eth; = small eth, Icelandic __ &ntilde; = small n, tilde __ &ograve; = small o, grave accent __ &oacute; = small o, acute accent __ &ocirc; = small o, circumflex accent __ &otilde; = small o, tilde __ &ouml; = small o, umlaut mark __ &oslash; = small o, slash __ &ugrave; = small u, grave accent __ &uacute; = small u, acute accent __ &ucirc; = small u, circumflex accent __ &uuml; = small u, umlaut mark __ &yacute; = small y, acute accent __ &thorn; = small thorn, Icelandic __ &yuml; = small y, umlaut mark";
  var enc = encodeURI(uri);
  var dec = decodeURI(enc);
  var res = dec;
  document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>


यह प्रश्न का उत्तर देने के लिए प्रकट नहीं होता है, और यह केवल उत्तर देने वाला कोड है। कृपया बताएं कि कोड क्या कर रहा है और यह प्रश्न से कैसे संबंधित है।
रिक
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.