JQuery का उपयोग करके HTML संस्थाओं को कैसे डीकोड करें?


334

एक स्ट्रिंग में HTML संस्थाओं को डीकोड करने के लिए मैं jQuery का उपयोग कैसे करूं?


प्रौद्योगिकी का समय से पहले चयन (jQuery) सुरक्षा मुद्दों के साथ उत्तर आमंत्रित करता है। यह stackoverflow.com/questions/1912501/… के डुप्लिकेट के रूप में बेहतर बंद हो सकता है ।
व्लादिमीर पालंट

जवाबों:


437

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

वास्तव में, प्रयास करें

var decoded = $("<div/>").html(encodedStr).text();

175
करो नहीं अविश्वस्त इनपुट के साथ यह करते हैं। कई ब्राउज़र छवियों और आग से संबंधित घटनाओं को लोड करते हैं, भले ही नोड डोम से जुड़ा न हो। दौड़ने की कोशिश करो $("<div/>").html('<img src="http://www.google.com/images/logos/ps_logo2.png" onload=alert(1337)>')। फ़ायरफ़ॉक्स या सफारी में यह अलर्ट फायर करता है।
माइक सैमुअल

@ मायके, तो आप इसके बजाय क्या सलाह देते हैं? आपका जवाब .replace () अच्छा नहीं है अगर आपको पता नहीं है कि आप क्या बदल रहे हैं ...
ekkis

7
@ekkis, आपको संस्थाओं को डिकोड करने की कोशिश करने से पहले टैग को हटाने की आवश्यकता है। str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/g, "")या ऐसा ही कुछ।
माइक सैमुअल

2
एक बेहतर कार्यान्वयन (मेरी राय में) जो इनपुट से अधिकांश HTML टैग्स (माइक के सौजन्य से) को हटाता है, एक समान प्रश्न के मेरे उत्तर में है । इसमें jQuery का ओवरहेड भी नहीं है इसलिए यह अन्य वातावरणों के लिए काफी उपयुक्त है।
रॉबर्ट के

6
@MichaelStum ने आपके संपादन को माइक सैमुअल की टिप्पणी और अगले-उच्चतम-मत वाले दोनों उत्तर को अमान्य कर दिया, और वास्तव में सभी jQuery संस्करणों के लिए XSS भेद्यता को ठीक किए बिना (जैसा कि नीचे दिए गए उत्तर में बताया गया है)। इस उत्तर के लिए एक सुरक्षा चेतावनी जोड़ना उचित होगा (और मैं ऐसा करने जा रहा हूं); वास्तव में सुरक्षा छेद को ठीक करने में विफल रहने पर इस पृष्ठ पर अन्य चर्चा को निरर्थक रूप से प्रस्तुत करना निश्चित रूप से नहीं है!
मार्क एमी

211

बिना किसी jQuery के:

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

console.log(decodeEntities('1 &amp; 2')); // '1 & 2'

यह स्वीकृत उत्तर के समान काम करता है , लेकिन अविश्वसनीय उपयोगकर्ता इनपुट के साथ उपयोग करना सुरक्षित है।


इसी तरह के दृष्टिकोण में सुरक्षा के मुद्दे

जैसा कि माइक सैमुअल ने उल्लेख किया है , <div>एक <textarea>अविश्वसनीय उपयोगकर्ता इनपुट के बजाय ऐसा करना एक XSS भेद्यता है, भले ही <div>इसे DOM में कभी नहीं जोड़ा गया हो:

function decodeEntities(encodedString) {
  var div = document.createElement('div');
  div.innerHTML = encodedString;
  return div.textContent;
}

// Shows an alert
decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')

हालाँकि, यह हमला संभव नहीं है <textarea>क्योंकि इसमें ऐसे HTML तत्व नहीं हैं जिनकी अनुमति सामग्री है <textarea>। नतीजतन, 'एन्कोडेड' स्ट्रिंग में मौजूद कोई भी HTML टैग स्वचालित रूप से ब्राउज़र द्वारा इकाई-एनकोड हो जाएगा।

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

// Safe, and returns the correct answer
console.log(decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">'))

चेतावनी : इस jQuery का उपयोग कर रहा .html()है और .val()उपयोग करने के बजाए तरीकों .innerHTMLऔर .valueभी jQuery के कुछ संस्करणों के लिए असुरक्षित * है, जब एक का उपयोग कर भीtextarea । ऐसा इसलिए है क्योंकि jQuery के पुराने संस्करण जानबूझकर और स्पष्ट रूप से स्ट्रिंग में निहित लिपियों का मूल्यांकन करते हैं .html()। इसलिए इस तरह कोड jQuery 1.8 में एक चेतावनी दिखाता है:

//<!-- CDATA
// Shows alert
$("<textarea>")
.html("<script>alert(1337);</script>")
.text();

//-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

* इस भेद्यता को पकड़ने के लिए इरु पेनकमान का धन्यवाद ।


6
इसके मूल्य को निकालने के बाद टेक्सारिया को नष्ट करने के लिए एक अच्छा विचार हो सकता है:decodedString = textArea.value; textArea.remove(); return decodedString;
वर्नर

2
या केवल अगर जावास्क्रिप्ट का संस्करण वास्तव में हटाने का समर्थन करता है ():if ('remove' in Element.prototype) textArea.remove();
वर्नर

6
@Werner जैसे ही फ़ंक्शन समाप्त हो गया है, इसके संदर्भ में कोई और चर नहीं होगा इसलिए यह कचरा कलेक्टर द्वारा स्वचालित रूप से हटा दिया जाएगा ।
user2428118

मैं एक बटन क्लिक के कोड-पीछे से .NET के साथ संयोजन में इसका उपयोग कर रहा हूं, और किसी कारण से स्वीकृत उत्तर पोस्टबैक का कारण बना। यह उत्तर नहीं था, इसलिए मेरे लिए यह सबसे अच्छा उत्तर है। धन्यवाद!
स्नैलर

@ नाविक $("<div />").html(string).text() प्रदान की गई स्ट्रिंग में किसी भी जावास्क्रिप्ट को निष्पादित करेगा , जो मुझे संदेह है कि आपकी समस्या का कारण क्या था। स्वीकृत उत्तर को इस पर अद्यतन किया जाना चाहिए।
जम्मन j

80

जैसे माइक सैमुअल ने कहा, HTML संस्थाओं को असुरक्षित करने के लिए jQuery.html ()। टेक्स्ट () का उपयोग न करें।

इसके बजाय, की तरह एक टेम्पलेट रेंडरर का उपयोग Mustache.js या decodeEntities @ VyvIT की टिप्पणी से।

Underscore.js उपयोगिता-बेल्ट लाइब्रेरी escapeऔर unescapeविधियों के साथ आता है , लेकिन वे उपयोगकर्ता इनपुट के लिए सुरक्षित नहीं हैं:

_.escape (स्ट्रिंग)

_.unescape (स्ट्रिंग)


2
यह वास्तव में अधिक उत्थान के लिए योग्य है! निश्चित रूप से मेरा पसंदीदा समाधान। वे unescapeडॉक्स में अब तक शामिल हैं, btw।
घातक-गिटार

5
_.unescape("&#39;")केवल "& # 39;" में परिणाम एक एकल-उद्धरण के बजाय। क्या ऐसा कुछ है जो मुझे याद आ रहा है या HTML इकाई कोडों में अंडरस्कोर नहीं है जैसा कि दिखाया गया है: w3schools.com/tags/ref_entities.asp
जेसन एक्सलसन

6
गीथब पर बग को "ठीक नहीं होगा" के रूप में बंद कर दिया गया था; इसका मतलब है कि यह समाधान काम नहीं करता है और काम नहीं करेगा।
इगोर चुबिन

3
आप कहते हैं कि अंडरस्कोर के " escapeऔर unescapeतरीके ... उपयोगकर्ता इनपुट के लिए सुरक्षित नहीं हैं" । इससे तुम्हारा क्या मतलब? यह मुझे बकवास लगता है, लेकिन शायद मुझे कुछ याद आ रहा है - क्या आप स्पष्ट कर सकते हैं?
मार्क अमेरी

2
@VyvIT की कोशिश की गई _.unescape("&lt;img src=fake onerror=alert('boo!')&gt;")(Chrome / FF / IE में)। लेकिन यह कोई सतर्क नहीं दिखा। इसे कंसोल में आज़माया और साथ ही इसे मेरी जेएस फाइल में भी डाला। एक ही परिणाम।
विवेक अठाली

28

मुझे लगता है कि आप पाठ और HTML विधियों को भ्रमित कर रहे हैं। इस उदाहरण को देखें, यदि आप किसी तत्व के आंतरिक HTML को पाठ के रूप में उपयोग करते हैं, तो आपको HTML टैग (दूसरा बटन) डीकोड मिल जाएगा। लेकिन यदि आप उन्हें HTML के रूप में उपयोग करते हैं, तो आपको HTML स्वरूपित दृश्य (पहला बटन) मिलेगा।

<div id="myDiv">
    here is a <b>HTML</b> content.
</div>
<br />
<input value="Write as HTML" type="button" onclick="javascript:$('#resultDiv').html($('#myDiv').html());" />
&nbsp;&nbsp;
<input value="Write as Text" type="button" onclick="javascript:$('#resultDiv').text($('#myDiv').html());" />
<br /><br />
<div id="resultDiv">
    Results here !
</div>

पहला बटन लिखते हैं: यहाँ एक HTML सामग्री है।

दूसरा बटन लिखते हैं: यहां एक <B> HTML </ B> सामग्री है।

वैसे, आप एक प्लग-इन देख सकते हैं जो मुझे jQuery प्लगइन में मिला है - HTML डीकोड और एनकोड करें जो एन्कोड करता है और HTML स्ट्रिंग्स को डीकोड करता है।


26

प्रश्न 'jQuery के साथ' द्वारा सीमित है, लेकिन यह जानने में कुछ मदद कर सकता है कि यहाँ दिए गए सर्वोत्तम उत्तर में दिया गया jQuery कोड निम्न कार्य करता है ... यह jQuery के साथ या उसके बिना काम करता है:

function decodeEntities(input) {
  var y = document.createElement('textarea');
  y.innerHTML = input;
  return y.value;
}

20

आप https://github.com/mathiasbynens/he से उपलब्ध हे लाइब्रेरी का उपयोग कर सकते हैं

उदाहरण:

console.log(he.decode("J&#246;rg &amp J&#xFC;rgen rocked to &amp; fro "));
// Logs "Jörg & Jürgen rocked to & fro"

मैंने लाइब्रेरी के लेखक को इस सवाल पर चुनौती दी कि क्या इस लाइब्रेरी को क्लाइंटसाइड कोड में <textarea>हैक के पक्ष में उपयोग करने का कोई कारण था जो अन्य उत्तरों में प्रदान किया गया है। उन्होंने कुछ संभावित औचित्य प्रदान किए:

  • यदि आप नोड.जेएस सर्वरसाइड का उपयोग कर रहे हैं, तो HTML एन्कोडिंग / डिकोडिंग के लिए लाइब्रेरी का उपयोग करने से आपको एक एकल समाधान मिलता है जो क्लाइंटसाइड और सर्वरसाइड दोनों को काम करता है।

  • कुछ ब्राउज़रों की इकाई डिकोडिंग एल्गोरिदम में कीड़े हैं या कुछ नामित चरित्र संदर्भों के लिए समर्थन गायब है । उदाहरण के लिए, इंटरनेट एक्सप्लोरर गैर-ब्रेकिंग स्पेस ( &nbsp;) को सही ढंग से डिकोड और रेंडर करेगा, लेकिन डोम तत्व की innerTextसंपत्ति के माध्यम से गैर-ब्रेकिंग वाले के बजाय साधारण स्थान के रूप में रिपोर्ट करें , <textarea>हैक को तोड़ना (केवल मामूली रूप से)। इसके अतिरिक्त, IE 8 और 9 केवल HTML 5 में जोड़े गए नए नामित चरित्र संदर्भों में से किसी का भी समर्थन नहीं करते हैंवह लेखक ने http://mathias.html5.org/tests/html पर नामित चरित्र संदर्भ समर्थन का परीक्षण भी होस्ट करता है / नामित-चरित्र-संदर्भ / । IE 8 में, यह एक हजार से अधिक त्रुटियों की रिपोर्ट करता है।

    यदि आप निकाय डिकोडिंग से संबंधित ब्राउज़र बग्स से अछूता रहना चाहते हैं और / या नामित चरित्र संदर्भों की पूरी श्रृंखला को संभालने में सक्षम हैं, तो आप <textarea>हैक से दूर नहीं हो सकते ; आप की तरह एक पुस्तकालय की आवश्यकता होगी वह

  • वह बस अच्छी तरह से महसूस करता है कि इस तरह से काम करना कम है।


4
+1 jQuery सब कुछ का हल नहीं है। इस काम के लिए सही उपकरण का उपयोग करें।
मैथियास ब्यनेंस

HTML संस्थाओं को डिकोड करने का यह सबसे अच्छा तरीका है। अन्य सभी उत्तर (इस पर और इसी तरह के प्रश्नों पर) या तो इनर HTML का उपयोग करें (नया HTML एलिमेंट बनाएं, एचटीएमएल कोड को प्रोसेस करें और फिर उस एलिमेंट के इनर HTML को प्राप्त करें, यह XSS हमलों के लिए असुरक्षित हो सकता है यदि आप बहुत सावधान नहीं हैं, तो अधिक देखें ), या वे Underscore.js unescape या Lodash unescape विधियों का उपयोग करने का सुझाव दें जो दोनों अपूर्ण हैं (केवल कुछ HTML संस्थाओं के लिए काम करता है)। वह पुस्तकालय सबसे पूर्ण और सुरक्षित विकल्प है!
ands

18

एनकोड:

$("<textarea/>").html('<a>').html();      // return '&lt;a&gt'

डिकोड:

$("<textarea/>").html('&lt;a&gt').val()   // return '<a>'

3
पहले से ही एक जवाब है जो काम करता है, और यह लगभग इसके समान है। हमें डुप्लीकेट उत्तर की आवश्यकता नहीं है
markasoftware

4
यह मान्य उत्तर है। टॉम का जवाब एक DIV तत्व का उपयोग करता है, जो उस उत्तर को XSS के लिए असुरक्षित बनाता है।
फ्रांसिस्को हॉज

2
यह स्पष्टता के लिए सबसे अच्छा जवाब है।
दान रैंडोल्फ

4

उपयोग

myString = myString.replace( /\&amp;/g, '&' );

सर्वर साइड पर इसे करना सबसे आसान है क्योंकि जाहिरा तौर पर जावास्क्रिप्ट के पास संस्थाओं को संभालने के लिए कोई मूल पुस्तकालय नहीं है, और न ही मैं जावास्क्रिप्ट का विस्तार करने वाले विभिन्न चौखटे के लिए खोज परिणामों में सबसे ऊपर पाया गया।

"जावास्क्रिप्ट एचटीएमएल इकाइयाँ" के लिए खोज करें, और हो सकता है कि आपको उस उद्देश्य के लिए कुछ पुस्तकालय मिलें, लेकिन वे संभवतः उपरोक्त तर्क के अनुसार बनाए जाएंगे - प्रतिस्थापित करें, इकाई द्वारा इकाई।


0

मेरे पास बस HTML बटन के लिए एक मान के रूप में एक HTML इकाई charater (as) होना चाहिए। ब्राउज़र में शुरुआत से ही HTML कोड अच्छा लगता है:

<input type="button" value="Embed & Share  &dArr;" id="share_button" />

अब मैं एक टॉगल जोड़ रहा था जिसे चारित्र भी प्रदर्शित करना चाहिए। यह मेरा समाधान है

$("#share_button").toggle(
    function(){
        $("#share").slideDown();
        $(this).attr("value", "Embed & Share " + $("<div>").html("&uArr;").text());
    }

यह बटन में फिर से in प्रदर्शित करता है। मुझे उम्मीद है कि यह किसी की मदद कर सकता है।


यदि आप UTF-8 (या UTF-16, या) वर्ण का समर्थन करने वाले किसी भी अन्य एन्कोडिंग) में अपनी स्क्रिप्ट की सेवा करने में सक्षम हैं, तो सिंपल यूनिकोड एस्केप सीक्वेंस (यानी "Embed & Share \u21d1"), या बेहतर अभी तक उपयोग करना होगा "Embed & Share ⇑"। एक HTML एंटिटी को पार्स करने के लिए एक DOM एलिमेंट का उपयोग करके एक जावास्क्रिप्ट स्ट्रिंग में एक मनमाना यूनिकोड कैरेक्टर सेंकना एक चालाक और रचनात्मक दृष्टिकोण है जो रुब गोल्डबर्ग को गर्व होगा, लेकिन अच्छा अभ्यास नहीं है; यूनिकोड एस्केप भाषा में विशेष रूप से इस उपयोग के मामले को संभालने के लिए है।
मार्क अमेरी

0

आपको HTML संस्थाओं के लिए कस्टम फंक्शन बनाना है:

function htmlEntities(str) {
return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g,'&gt;').replace(/"/g, '&quot;');
}

मुझे कोई पता नहीं है, इससे मुझे +1 l-) में मदद मिली
सिजमन टोडा

संभवतः इसे वोट दिया गया था क्योंकि यह केवल कुछ संस्थाओं को संभालता है।
1

मूल प्रश्न यह था कि संस्थाओं को कैसे डीकोड किया जाए - यह जो वांछित है उसके विपरीत है; यह संस्थाओं में पात्रों के एक अत्यंत सीमित सेट को कूटबद्ध करता है। जैसा कि डाउन-वोट टूलटिप कहता है, "यह उत्तर उपयोगी नहीं है"। मुझे आश्चर्य है कि 4 साल बाद भी इसका शुद्ध-सकारात्मक स्कोर है।
स्टीफन पी

0

मान लें कि आपके पास स्ट्रिंग के नीचे है।

हमारे डीलक्स केबिन गर्म, आरामदायक और amp हैं; आरामदायक

var str = $("p").text(); // get the text from <p> tag
$('p').html(str).text();  // Now,decode html entities in your variable i.e 

str और वापस असाइन करें

टैग।

बस।


0

ExtJS उपयोगकर्ताओं के लिए, यदि आपके पास पहले से ही एन्कोडेड स्ट्रिंग है, उदाहरण के लिए जब लाइब्रेरी फ़ंक्शन का लौटाया गया मान इनर HTML सामग्री है, तो इस एक्सटीजेएस फ़ंक्शन पर विचार करें:

Ext.util.Format.htmlDecode(innerHtmlContent)

यह केवल 5 HTML संस्थाओं के लिए काम करेगा। आप इसे दस्तावेज़ और स्रोत कोड में देख सकते हैं ।
ands


0

इसे इस्तेमाल करे :

var htmlEntities = "&lt;script&gt;alert('hello');&lt;/script&gt;";
var htmlDecode =$.parseHTML(htmlEntities)[0]['wholeText'];
console.log(htmlDecode);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

parseHTML , Jquery लाइब्रेरी में एक फंक्शन है और यह एक ऐरे को लौटाएगा जिसमें दिए गए स्ट्रिंग के बारे में कुछ विवरण शामिल हैं।

कुछ मामलों में स्ट्रिंग बड़ा हो रहा है, इसलिए फ़ंक्शन सामग्री को कई अनुक्रमितों से अलग करेगा।

और सभी इंडेक्स डेटा प्राप्त करने के लिए आपको किसी भी इंडेक्स पर जाना चाहिए, फिर "पूरे टेक्स्ट" नामक इंडेक्स तक पहुंचें।

मैंने इंडेक्स 0 चुना क्योंकि यह सभी मामलों (छोटे स्ट्रिंग या बड़े स्ट्रिंग) में काम करेगा।


हालांकि यह कोड स्निपेट समाधान हो सकता है, जिसमें स्पष्टीकरण भी शामिल है , जो आपके पोस्ट की गुणवत्ता को बेहतर बनाने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।
जोहान

स्पष्टीकरण जोड़ा गया है ... धन्यवाद :)
फवाद अल रोमी

-1

यहां अभी भी एक समस्या है: इनपुट मान को असाइन किए जाने पर बच गया स्ट्रिंग पठनीय नहीं दिखता है

var string = _.escape("<img src=fake onerror=alert('boo!')>");
$('input').val(string);

निर्गमन: https://jsfiddle.net/kjpdwmqa/3/


यह सवाल का जवाब नहीं है। ओपी HTML इकाई को डिकोड (अनसेस्केप) करने के लिए कहता है, लेकिन इस उत्तर में आप escapeअंडरस्कोर.जेएस की विधि का उपयोग कर रहे हैं । इसके अलावा कोई स्पष्टीकरण नहीं है कि आपके कोड नमूने को ओपी की समस्या को कैसे हल करना चाहिए।
ands

-1

वैकल्पिक रूप से, इसके लिए एक पुस्तकालय भी है।

यहाँ, https://cdnjs.com/lbooks/he

npm install he                 //using node.js

<script src="js/he.js"></script>  //or from your javascript directory

उपयोग निम्नानुसार है ...

//to encode text 
he.encode('© Ande & Nonso® Company LImited 2018');  

//to decode the 
he.decode('&copy; Ande &amp; Nonso&reg; Company Limited 2018');

खुश होती है।


लाइब्रेरी के बारे में पहले से ही एक उत्तर है जो पूर्ण है, सरल कोड उदाहरण और अच्छी व्याख्या के साथ कि आपको लाइब्रेरी का उपयोग क्यों और कब करना चाहिए ।
ands

-3

JQuery के साथ HTML संस्थाओं को डिकोड करने के लिए, बस इस फ़ंक्शन का उपयोग करें:

function html_entity_decode(txt){
    var randomID = Math.floor((Math.random()*100000)+1);
    $('body').append('<div id="random'+randomID+'"></div>');
    $('#random'+randomID).html(txt);
    var entity_decoded = $('#random'+randomID).html();
    $('#random'+randomID).remove();
    return entity_decoded;
}

कैसे इस्तेमाल करे:

जावास्क्रिप्ट:

var txtEncoded = "&aacute; &eacute; &iacute; &oacute; &uacute;";
$('#some-id').val(html_entity_decode(txtEncoded));

HTML:

<input id="some-id" type="text" />

-3

सबसे आसान तरीका है अपने तत्वों के लिए एक वर्ग चयनकर्ता सेट करें फिर निम्नलिखित कोड का उपयोग करें:

$(function(){
    $('.classSelector').each(function(a, b){
        $(b).html($(b).text());
    });
});

और कुछ नहीं चाहिए!

मुझे यह समस्या थी और यह स्पष्ट समाधान मिला और यह ठीक काम करता है।


यह ओपी के सवाल का जवाब नहीं है। ओपी STRING में HTML संस्थाओं को डिकोड करने के लिए कहता है, न केवल यह ओपी की समस्या को हल करता है, बल्कि यह HTML तत्वों में मौजूद HTML संस्थाओं को भी बिना बदले वाले लोगों से बचता है, जो नहीं किया जाना चाहिए।
ands

-3

मुझे लगता है कि चुने गए समाधान के बिल्कुल विपरीत है।

var decoded = $("<div/>").text(encodedStr).html();
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.