जब इनपुट फ़ील्ड से विशेषता पढ़ी जाती है तो HTML- एन्कोडिंग खो जाती है

Question

मैं एक छिपे हुए क्षेत्र से एक मान खींचने के लिए और एक टेक्स्टबॉक्स में प्रदर्शित करने के लिए जावास्क्रिप्ट का उपयोग कर रहा हूं। छिपे हुए फ़ील्ड में मान एन्कोडेड है।

उदाहरण के लिए,

<input id='hiddenId' type='hidden' value='chalk &amp; cheese' />

में खींच लिया जाता है

<input type='text' value='chalk &amp; cheese' />

छिपे हुए क्षेत्र से मान प्राप्त करने के लिए कुछ jQuery के माध्यम से (यह इस बिंदु पर है कि मैं एन्कोडिंग खो देता हूं):

$('#hiddenId').attr('value')

समस्या यह है कि जब मैं chalk & cheeseछिपे हुए क्षेत्र से पढ़ता हूं , तो जावास्क्रिप्ट एन्कोडिंग को खो देता है। मैं नहीं चाहता कि मूल्य हो chalk & cheese। मैं चाहता हूं कि शाब्दिक रूप amp;से इसे बरकरार रखा जाए।

क्या एक जावास्क्रिप्ट लाइब्रेरी या एक jQuery पद्धति है जो HTML-एक स्ट्रिंग को एनकोड करेगी?

Comments

क्या आप उपयोग कर रहे जावास्क्रिप्ट को दिखा सकते हैं?

— सिनान ताइफोर

जोड़ा गया है कि मुझे छिपे हुए क्षेत्र से मूल्य कैसे मिलता है

— AJM

आंतरिक HTML विधि (jQuery। Html) का उपयोग न करें (आंतरिक विधि का उपयोग करता है), कुछ पर (मैंने केवल क्रोम का परीक्षण किया है), यह उद्धरण से बच नहीं जाएगा, इसलिए यदि आप अपने मूल्य को एक विशेषता मान में डालते हैं , आप एक XSS भेद्यता के साथ समाप्त होगा।

— जेम्स रॉपर

किस संदर्भ में chalkऔर cheeseकभी भी एक साथ 0_o

— d -_- b

@d -_- b जब दो वस्तुओं की तुलना करते हैं। उदाहरण। वे चाक और पनीर के रूप में अलग हैं;)

— अनुराग

Answer 1

EDIT: यह उत्तर बहुत पहले पोस्ट किया गया था, और htmlDecodeफ़ंक्शन ने XSS भेद्यता पेश की। यह XSS के अवसर को कम divकरने से अस्थायी तत्व को बदलने को संशोधित किया गया है textarea। लेकिन आजकल, मैं आपको प्रोत्साहित करूंगा कि आप DOMAARser API का उपयोग करें जैसा कि अन्य ऐडवॉसर में सुझाया गया है ।

---

मैं इन कार्यों का उपयोग करता हूं:

function htmlEncode(value){
  // Create a in-memory element, set its inner text (which is automatically encoded)
  // Then grab the encoded contents back out. The element never exists on the DOM.
  return $('<textarea/>').text(value).html();
}

function htmlDecode(value){
  return $('<textarea/>').html(value).text();
}

मूल रूप से एक textarea तत्व स्मृति में बनाया गया है, लेकिन इसे दस्तावेज़ में कभी नहीं जोड़ा जाता है।

पर htmlEncodeसमारोह मैं सेट innerTextतत्व की, और इनकोडिंग पुनः प्राप्त innerHTML; पर htmlDecodeसमारोह मैं सेट innerHTMLतत्व का मान और innerTextलिया गया है।

यहां चल रहे उदाहरण की जाँच करें ।

Comments

यह अधिकांश परिदृश्यों के लिए काम करता है, लेकिन htmlDecode का यह कार्यान्वयन किसी भी अतिरिक्त व्हाट्सएप को समाप्त कर देगा। तो "इनपुट" के कुछ मूल्यों के लिए, इनपुट! = HtmlDecode (htmlEncode (इनपुट))। यह कुछ परिदृश्यों में हमारे लिए एक समस्या थी। उदाहरण के लिए, यदि इनपुट = "<p> \ t Hi \ n वहाँ </ p>", एक राउंडट्रिप एन्कोड / डिकोड "<p> हाय वहाँ </ p>" होगा। ज्यादातर समय यह ठीक है, लेकिन कभी-कभी ऐसा नहीं होता है। :)

— पेटीएम

समाधान के लिए धन्यवाद! मैंने टेक्स्ट वैल्यू में %% NL %% जैसी नई लाइनों को बदलकर अतिरिक्त सफेद स्थान के मुद्दे को हटा दिया, फिर HTML को इनकोडेड मान प्राप्त करने के लिए .html () कहा, फिर %% NL %% को <br /> के साथ बदल दिया। s ... बुलेट प्रूफ नहीं, लेकिन काम किया और मेरे उपयोगकर्ताओं को %% NL %% में टाइप करने की संभावना नहीं थी।

— बेनो

मजेदार बात यह है कि सीएसएस के पास एक white-spaceसंपत्ति है, जो बताती है कि HTML सामग्री में रिक्त स्थान को संसाधित करने के लिए कैसे करना चाहिए। समुचित की उपस्थिति का तात्पर्य है कि "यह पूर्वनिर्मित है, रिक्त स्थान और लाइन ब्रेक को संरक्षित किया जाना चाहिए"। यह शैली और सामग्री के पृथक्करण को तोड़ता है, क्योंकि यदि आप HTML को "सुंदर" होने के लिए पुन: स्वरूपित करने का प्रयास करते हैं या आप इसे इस तरह से एक एन्कोड / डिकोड चक्र के माध्यम से गोल करते हैं, तो रिक्त स्थान / ब्रेक के रन कम हो जाते हैं, और एनकोडर के पास कोई नहीं है यह जानने का तरीका कि क्या ऐसा करना ठीक था, क्योंकि यह white-space:pre-*;बाहरी सीएसएस फ़ाइल में संकेतक के बारे में नहीं जानता है !

— ट्रायंको

यह समाधान इस बात पर निर्भर कर सकता है कि पृष्ठ html या xhtml के रूप में लिखा गया है, इसलिए मैं ऐसे समाधान का पक्ष लूंगा जिसमें DOM शामिल न हो।

— फिल एच

हालांकि यह दो साल बाद उत्तर दिया गया था, नीचे @Anentropic से प्रतिक्रिया हर तरह से बेहतर है।

— चाड

Answer 2

JQuery की चाल उद्धरण चिह्नों को एनकोड नहीं करती है और IE में यह आपके व्हाट्सएप को बंद कर देगी।

Django में भागने के टमप्लटेटैग के आधार पर , जो मुझे लगता है कि पहले से ही उपयोग किया जाता है / पहले से ही परीक्षण किया जाता है, मैंने इस फ़ंक्शन को बनाया जो कि आवश्यक है।

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

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

// I needed the opposite function today, so adding here too:
function htmlUnescape(str){
    return str
        .replace(/&quot;/g, '"')
        .replace(/&#39;/g, "'")
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
        .replace(/&amp;/g, '&');
}

अद्यतन 2013-06-17:
सबसे तेजी से भागने की खोज में मुझे इस replaceAllपद्धति का कार्यान्वयन मिला है :
http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(यहां भी संदर्भित: सबसे तेज एक स्ट्रिंग में एक चरित्र के सभी उदाहरणों को बदलने की विधि )
कुछ प्रदर्शन परिणाम यहाँ:
http://jsperf.com/htmlencoderegex/25

यह replaceऊपर बनी चेन को समान परिणाम स्ट्रिंग देता है। मुझे बहुत खुशी होगी अगर कोई समझा सकता है कि यह तेज क्यों है !?

अद्यतन 2015-03-04:
मैंने अभी देखा कि AngularJS उपरोक्त विधि का बिल्कुल उपयोग कर रहा है:
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435

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

मैं यह नोट करूंगा कि (4 साल बाद) Django अभी भी इन चीजों में से कोई भी नहीं करता है, इसलिए मुझे यकीन नहीं है कि वे कितने महत्वपूर्ण हैं:
https://github.com/django/django/blob/1.8b1/django/utils /html.py#L44

अपडेट 2016-04-06:
आप आगे की स्लैश से बचना चाह सकते हैं /। यह एचटीएमएल एन्कोडिंग के लिए आवश्यक नहीं है, हालांकि इसे ओडब्ल्यूएएसपी द्वारा एक एंटी-एक्सएसएस सुरक्षा उपाय के रूप में अनुशंसित किया गया है । (टिप्पणियों में यह सुझाव देने के लिए @JNF को धन्यवाद)

        .replace(/\//g, '/');

Comments

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

— फेर्रुकियो

@Ferruccio ... और जिन कारणों से & apos का उपयोग नहीं करना है; देखें: stackoverflow.com/questions/2083754/... blogs.msdn.com/b/kirillosenkov/archive/2010/03/19/... fishbowl.pastiche.org/2003/07/01/the_curse_of_apos

— Anentropic

धन्यवाद, मुझे कभी यह एहसास नहीं हुआ कि 'यह मान्य HTML इकाई नहीं है।

— फेर्रूकियो

बिना /g, .replace()केवल पहले मैच की जगह लेगा।

— थिंकिंगस्टिफ

@ Tracker1 मैं सहमत नहीं हूं, अगर फ़ंक्शन को अमान्य इनपुट प्राप्त होता है तो उसे एक त्रुटि फेंकनी चाहिए। यदि किसी विशिष्ट उपयोग के मामले में आप उस तरह से अमान्य इनपुट को संभालना चाहते हैं तो या तो फ़ंक्शन को कॉल करने से पहले मान की जाँच करें या फ़ंक्शन कॉल को एक कोशिश / पकड़ में लपेटें।

— एंथ्रोपिक

Answer 3

यहाँ एक गैर- jQuery संस्करण है जो jQuery के .html()संस्करण और संस्करण दोनों की तुलना में काफी तेज है .replace()। यह सभी व्हाट्सएप को सुरक्षित रखता है, लेकिन jQuery संस्करण की तरह, उद्धरणों को संभालता नहीं है।

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

गति: http://jsperf.com/htmlencoderegex/17

डेमो:

आउटपुट:

स्क्रिप्ट:

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

function htmlDecode( html ) {
    var a = document.createElement( 'a' ); a.innerHTML = html;
    return a.textContent;
};

document.getElementById( 'text' ).value = htmlEncode( document.getElementById( 'hidden' ).value );

//sanity check
var html = '<div>   &amp; hello</div>';
document.getElementById( 'same' ).textContent = 
      'html === htmlDecode( htmlEncode( html ) ): ' 
    + ( html === htmlDecode( htmlEncode( html ) ) );

HTML:

<input id="hidden" type="hidden" value="chalk    &amp; cheese" />
<input id="text" value="" />
<div id="same"></div>

Comments

यह सवाल भी पैदा होता है: जेएस में यह एक वैश्विक कार्य क्यों नहीं है?

— एसईओएफ

.replace()@SEoF द्वारा हाल ही में सुझाए गए गैर-रेगेक्स संस्करण बड़े पैमाने पर तेजी से निकलते हैं

— एन्ट्रोपिक

@Anentropic यह वास्तव में तेजी से प्रकाश है, लेकिन मुझे नहीं लगता कि यह काम कर रहा है। बिना /g, .replace()केवल पहला मैच कर रहा है।

— थिंकिंगस्टिफ

दिलचस्प रूप से फ़ायरफ़ॉक्स में आप कर सकते हैं replace('a', 'b', 'g')जो समान रूप से काम करता है replace(/a/g, 'b')... गति समान है हालांकि

— Anentropic

मुझे न तो :) मैं केवल उद्धरण चिह्नों को संभालना चाहता हूं और मैंने गति की तलाश शुरू कर दी है ...

— एंथ्रोपिक

Answer 4

मुझे पता है कि यह एक पुराना है, लेकिन मैं स्वीकार किए गए उत्तर के एक भिन्न रूप को पोस्ट करना चाहता था जो लाइनों को हटाने के बिना IE में काम करेगा:

function multiLineHtmlEncode(value) {
    var lines = value.split(/\r\n|\r|\n/);
    for (var i = 0; i < lines.length; i++) {
        lines[i] = htmlEncode(lines[i]);
    }
    return lines.join('\r\n');
}

function htmlEncode(value) {
    return $('<div/>').text(value).html();
} 

Answer 5

अंडरस्कोर प्रदान करता है _.escape()और _.unescape()ऐसा करने वाले तरीके।

> _.unescape( "chalk & cheese" );
  "chalk & cheese"

> _.escape( "chalk & cheese" );
  "chalk & cheese"

Comments

लोदाश की भी एक ऐसी ही विधि है।

— गुस्तावो स्ट्राबे

Answer 6

अच्छा उत्तर। ध्यान दें कि यदि मान एनकोड करने के लिए है undefinedया nulljQuery 1.4.2 के साथ आपको त्रुटियाँ मिल सकती हैं जैसे:

jQuery("<div/>").text(value).html is not a function

या

Uncaught TypeError: Object has no method 'html'

समाधान वास्तविक मूल्य की जांच करने के लिए फ़ंक्शन को संशोधित करना है:

function htmlEncode(value){ 
    if (value) {
        return jQuery('<div/>').text(value).html(); 
    } else {
        return '';
    }
}

Comments

jQuery('<div/>').text(value || '').html()

— रौफामैटिक

@ क्राउफामेटिक - एक-लाइनर। लेकिन फ्लाई पर एक DIV बनाने के लिए valueएक ifबचत के साथ एक गैर-खाली की जाँच करना और उसका मूल्य हड़पना। यह बहुत अधिक प्रदर्शनकारी हो सकता है यदि htmlEncodeबहुत कुछ कहा जा रहा है और यदि यह संभावना है कि valueखाली होगा।

— लीपावर

हाय यह β & बीटा नहीं करता है क्या आप जानते हैं कि क्यों?

— दिलीप राजकुमार

Answer 7

सादे जावास्क्रिप्ट पसंद करने वालों के लिए, यहाँ वह विधि है जिसका मैंने सफलतापूर्वक उपयोग किया है:

function escapeHTML (str)
{
    var div = document.createElement('div');
    var text = document.createTextNode(str);
    div.appendChild(text);
    return div.innerHTML;
}

Answer 8

FWIW, एन्कोडिंग खो नहीं जा रहा है। एन्कोडिंग का उपयोग पृष्ठ लोड के दौरान मार्कअप पार्सर (ब्राउज़र) द्वारा किया जाता है। एक बार स्रोत को पढ़ने और पार्स करने के बाद और ब्राउज़र में DOM को मेमोरी में लोड किया जाता है, तो एन्कोडिंग को उसके प्रतिनिधित्व वाले भाग में पार्स किया गया है। इसलिए जब तक आपका जेएस मेमोरी में कुछ भी पढ़ने के लिए निष्पादित होता है, तब तक जो चार मिलता है वह एन्कोडिंग का प्रतिनिधित्व करता है।

मैं यहाँ शब्दार्थ पर सख्ती से काम कर रहा हूँ, लेकिन मैं चाहता था कि आप एन्कोडिंग के उद्देश्य को समझें। "खोया हुआ" शब्द ऐसा लगता है जैसे कुछ काम नहीं कर रहा है जैसे उसे करना चाहिए।

Answer 9

जक्वरी के बिना तेज़। आप अपने स्ट्रिंग में हर कैरेक्टर को एनकोड कर सकते हैं:

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

या (जैसे, inebreaks, <,>, "और ') के बारे में चिंता करने के लिए मुख्य पात्रों को लक्षित करें:

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('Encode HTML entities!\n\n"Safe" escape <script id=\'\'> & useful in <pre> tags!');

testing.innerHTML=test.value;

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55"></textarea>

<div id="testing">www.WHAK.com</div>

Answer 10

प्रोटोटाइप में इसे अंतर्निहित स्ट्रिंग वर्ग है । इसलिए यदि आप प्रोटोटाइप का उपयोग करने के लिए / योजना बना रहे हैं, तो यह कुछ ऐसा करता है:

'<div class="article">This is an article</div>'.escapeHTML();
// -> "&lt;div class="article"&gt;This is an article&lt;/div&gt;"

Comments

प्रोटोटाइप के समाधान को देखने के बाद, यह सब कर रहा है ... .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); काफी आसान है।

— स्टीव वॉर्थम

यह उद्धरण चिह्नों के साथ भी कुछ नहीं करना चाहिए? यह अच्छा नहीं है

— Anentropic

@Anentropic मैं यह नहीं देखता कि उद्धरण के साथ कुछ भी करने की आवश्यकता क्यों होगी; जब तक वे एक विशेषता मूल्य के अंदर नहीं होते तब तक उद्धरण से बचने की आवश्यकता नहीं है।

— एंडी

कुछ प्रतिबिंब के बाद ठीक है, मैं उस टिप्पणी को वापस लेता हूं - यदि आप HTML के एक टुकड़े का निर्माण कर रहे हैं, तो आप विशेषता मान सहित इसके प्रत्येक भाग को एनकोड करना चाहेंगे, इसलिए मैं एंथ्रोपिक से सहमत हूं और मुझे नहीं लगता कि प्रोटोटाइप फ़ंक्शन पर्याप्त है। उस मामले में।

— एंडी

Answer 11

यहाँ एक सरल जावास्क्रिप्ट समाधान है। यह स्ट्रिंग ऑब्जेक्ट को "HTMLEncode" विधि से बढ़ाता है, जिसे बिना पैरामीटर के किसी ऑब्जेक्ट पर या किसी पैरामीटर के साथ उपयोग किया जा सकता है।

String.prototype.HTMLEncode = function(str) {
  var result = "";
  var str = (arguments.length===1) ? str : this;
  for(var i=0; i<str.length; i++) {
     var chrcode = str.charCodeAt(i);
     result+=(chrcode>128) ? "&#"+chrcode+";" : str.substr(i,1)
   }
   return result;
}
// TEST
console.log("stetaewteaw æø".HTMLEncode());
console.log("stetaewteaw æø".HTMLEncode("æåøåæå"))

मैंने एक जावास्क्रिप्ट बनाया है "जावास्क्रिप्ट के लिए HTMLEncode विधि" ।

Answer 12

कोणीय सैनिटाइज़ पर आधारित ... (es6 मॉड्यूल सिंटैक्स)

// ref: https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js
const SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
const NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g;

const decodeElem = document.createElement('pre');


/**
 * Decodes html encoded text, so that the actual string may
 * be used.
 * @param value
 * @returns {string} decoded text
 */
export function decode(value) {
  if (!value) return '';
  decodeElem.innerHTML = value.replace(/</g, '&lt;');
  return decodeElem.textContent;
}


/**
 * Encodes all potentially dangerous characters, so that the
 * resulting string can be safely inserted into attribute or
 * element text.
 * @param value
 * @returns {string} encoded text
 */
export function encode(value) {
  if (value === null || value === undefined) return '';
  return String(value).
    replace(/&/g, '&amp;').
    replace(SURROGATE_PAIR_REGEXP, value => {
      var hi = value.charCodeAt(0);
      var low = value.charCodeAt(1);
      return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
    }).
    replace(NON_ALPHANUMERIC_REGEXP, value => {
      return '&#' + value.charCodeAt(0) + ';';
    }).
    replace(/</g, '&lt;').
    replace(/>/g, '&gt;');
}

export default {encode,decode};

Comments

जबकि मुझे वास्तव में यह उत्तर पसंद है और वास्तव में मुझे लगता है कि एक अच्छा तरीका है मुझे संदेह है, क्या if (value === null | value === undefined) return '';टाइपो पर बिटवाइज़र ऑपरेटर है या वास्तव में एक विशेषता है? यदि हां, तो उस एक का उपयोग क्यों करें और आम का नहीं ||? धन्यवाद!!

— अलेजांद्रो वेल्स

@AlejandroVales मुझे पूरा यकीन है कि यह एक टाइपो था ... सही।

— ट्रैकर

खैर किसी भी तरह से ध्यान रखें कि | 0 या 1 को जन्म देगा, इसलिए वास्तव में इसने ^ ^

— एलेजांद्रो वैल्स

क्या आप सिर्फ इस्तेमाल नहीं कर सकते == null? undefinedसमतुल्य होने के लिए केवल एक चीज है null, इसलिए दो ट्रिपल-

— इक्वल

यह बिल्कुल सच नहीं है। nullऔर 0दोनों झूठे हैं, हां, तो आप सिर्फ ऐसा नहीं कर सकते !value, लेकिन इसका पूरा मतलब ==कुछ चीजों को आसान बनाना है। 0 == nullगलत है। undefined == nullसच हैं। आप बस कर सकते हैंvalue == null

— हाशबोर्न

Answer 13

जहाँ तक मुझे पता है कि जावास्क्रिप्ट में कोई भी सीधे फॉरवर्ड HTML एनकोड / डिकोड विधि नहीं है।

हालांकि, आप क्या कर सकते हैं, जेएस का उपयोग एक मनमाना तत्व बनाने के लिए, इसके आंतरिक पाठ को सेट करने के लिए किया जाता है, फिर इसे आंतरिक HTML का उपयोग करके पढ़ें।

मान लीजिए, jQuery के साथ, यह काम करना चाहिए:

var helper = $('chalk & cheese').hide().appendTo('body');
var htmled = helper.html();
helper.remove();

या इन पंक्तियों के साथ कुछ।

Comments

मुझे लगता है कि डाउनवोट थोड़ा मनोरंजक है, इस जवाब पर विचार करना लगभग उसी के समान है जिसमें 870 से अधिक upvotes हैं, और इस एक के बाद थोड़ा सा पोस्ट किया गया था।

— केन एगोज़ी

Answer 14

आपको एक इनपुट फ़ील्ड से दूसरे में उन्हें शटल करने के लिए मानों को बचाना / एनकोड करना नहीं चाहिए।

<form>
 <input id="button" type="button" value="Click me">
 <input type="hidden" id="hiddenId" name="hiddenId" value="I like cheese">
 <input type="text" id="output" name="output">
</form>
<script>
    $(document).ready(function(e) {
        $('#button').click(function(e) {
            $('#output').val($('#hiddenId').val());
        });
    });
</script>

जेएस कच्चे HTML या कुछ भी डालने नहीं जाता है; यह valueप्रॉपर्टी (या विशेषता; निश्चित नहीं) सेट करने के लिए DOM को बताता है । किसी भी तरह से, DOM आपके लिए किसी भी एन्कोडिंग समस्या को हैंडल करता है। जब तक आप उपयोग करने की तरह कुछ अजीब कर रहे हैं document.writeया eval, HTML- एन्कोडिंग प्रभावी रूप से पारदर्शी होगा।

यदि आप परिणाम रखने के लिए एक नया टेक्स्टबॉक्स बनाने के बारे में बात कर रहे हैं ... यह अभी भी उतना ही आसान है। बस HTML के स्थिर भाग को jQuery में पास करें, और उसके बाद आपके द्वारा दिए गए ऑब्जेक्ट पर बाकी गुण / गुण सेट करें।

$box = $('<input type="text" name="whatever">').val($('#hiddenId').val());

Answer 15

मेरे पास एक समान समस्या थी और इसे encodeURIComponentजावास्क्रिप्ट ( प्रलेखन ) से फ़ंक्शन का उपयोग करके हल करें

उदाहरण के लिए, यदि आप उपयोग करते हैं तो आपके मामले में:

<input id='hiddenId' type='hidden' value='chalk & cheese' />

तथा

encodeURIComponent($('#hiddenId').attr('value'))

आपको मिलेगा chalk%20%26%20cheese। यहां तक ​​कि रिक्त स्थान भी रखे जाते हैं।

मेरे मामले में, मुझे एक बैकस्लैश को एनकोड करना पड़ा और यह कोड पूरी तरह से काम करता है

encodeURIComponent('name/surname')

और मुझे मिल गया name%2Fsurname

Answer 16

यहाँ एक छोटा सा है जो Server.HTMLEncodeशुद्ध जावास्क्रिप्ट में लिखे गए Microsoft के ASP से फ़ंक्शन का अनुकरण करता है :

function htmlEncode(s) {
  var ntable = {
    "&": "amp",
    "<": "lt",
    ">": "gt",
    "\"": "quot"
  };
  s = s.replace(/[&<>"]/g, function(ch) {
    return "&" + ntable[ch] + ";";
  })
  s = s.replace(/[^ -\x7e]/g, function(ch) {
    return "&#" + ch.charCodeAt(0).toString() + ";";
  });
  return s;
}

परिणाम एपोस्ट्रोफ़्स को एन्कोड नहीं करता है , लेकिन अन्य HTML विशेष और किसी भी वर्ण को 0x20-0x7e सीमा के बाहर एन्कोड करता है।

Answer 17

मेरा शुद्ध-जेएस फ़ंक्शन:

/**
 * HTML entities encode
 *
 * @param {string} str Input text
 * @return {string} Filtered text
 */
function htmlencode (str){

  var div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}

जावास्क्रिप्ट एचटीएमएल संस्थाओं को एनकोड और डिकोड

Answer 18

यदि आप jQuery का उपयोग करना चाहते हैं। मुझे मिला:

http://www.jquerysdk.com/api/jQuery.htmlspecialchars

(jQuery SDK द्वारा प्रस्तुत jquery.string प्लगइन का हिस्सा)

प्रोटोटाइप के साथ समस्या मुझे विश्वास है कि यह जावास्क्रिप्ट में आधार वस्तुओं का विस्तार करती है और आपके द्वारा उपयोग किए जाने वाले किसी भी jQuery के साथ असंगत होगी। बेशक, यदि आप पहले से ही प्रोटोटाइप का उपयोग कर रहे हैं और jQuery का नहीं, तो यह समस्या नहीं होगी।

EDIT: इसके अलावा यह भी है, जो कि jQuery के लिए प्रोटोटाइप की स्ट्रिंग उपयोगिताओं का एक बंदरगाह है:

http://stilldesigning.com/dotstring/

Answer 19

var htmlEnDeCode = (function() {
    var charToEntityRegex,
        entityToCharRegex,
        charToEntity,
        entityToChar;

    function resetCharacterEntities() {
        charToEntity = {};
        entityToChar = {};
        // add the default set
        addCharacterEntities({
            '&'     :   '&',
            '>'      :   '>',
            '&lt;'      :   '<',
            '&quot;'    :   '"',
            '&#39;'     :   "'"
        });
    }

    function addCharacterEntities(newEntities) {
        var charKeys = [],
            entityKeys = [],
            key, echar;
        for (key in newEntities) {
            echar = newEntities[key];
            entityToChar[key] = echar;
            charToEntity[echar] = key;
            charKeys.push(echar);
            entityKeys.push(key);
        }
        charToEntityRegex = new RegExp('(' + charKeys.join('|') + ')', 'g');
        entityToCharRegex = new RegExp('(' + entityKeys.join('|') + '|&#[0-9]{1,5};' + ')', 'g');
    }

    function htmlEncode(value){
        var htmlEncodeReplaceFn = function(match, capture) {
            return charToEntity[capture];
        };

        return (!value) ? value : String(value).replace(charToEntityRegex, htmlEncodeReplaceFn);
    }

    function htmlDecode(value) {
        var htmlDecodeReplaceFn = function(match, capture) {
            return (capture in entityToChar) ? entityToChar[capture] : String.fromCharCode(parseInt(capture.substr(2), 10));
        };

        return (!value) ? value : String(value).replace(entityToCharRegex, htmlDecodeReplaceFn);
    }

    resetCharacterEntities();

    return {
        htmlEncode: htmlEncode,
        htmlDecode: htmlDecode
    };
})();

यह एक्सटीजेएस स्रोत कोड से है।

Answer 20

<script>
String.prototype.htmlEncode = function () {
    return String(this)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');

}

var aString = '<script>alert("I hack your site")</script>';
console.log(aString.htmlEncode());
</script>

उत्पादन होगा: <script>alert("I hack your site")</script>

.htmlEncode () एक बार परिभाषित होने पर सभी तार पर उपलब्ध होगा।

Answer 21

दिए गए मान को HtmlEncodes

  var htmlEncodeContainer = $('<div />');
  function htmlEncode(value) {
    if (value) {
      return htmlEncodeContainer.text(value).html();
    } else {
      return '';
    }
  }

Answer 22

मैं अपने डोमेन \ उपयोगकर्ता स्ट्रिंग में बैकस्लैश के साथ कुछ मुद्दों में भाग गया।

मैंने इसे एंथ्रोपिक के उत्तर से अन्य बचने के लिए जोड़ा

.replace(/\\/g, '\')

जो मुझे यहां मिला: जावास्क्रिप्ट में बैकस्लैश से कैसे बचें?

Answer 23

चुनने क्या escapeHTML()prototype.js में क्या कर रहा है

इस स्क्रिप्ट को जोड़ने से आपको बचने में मदद मिलती है HTML:

String.prototype.escapeHTML = function() { 
    return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
}

अब आप अपनी स्क्रिप्ट में एस्कॉर्ट HTML विधि को कॉल कर सकते हैं, जैसे:

var escapedString = "<h1>this is HTML</h1>".escapeHTML();
// gives: "&lt;h1&gt;this is HTML&lt;/h1&gt;"

आशा है कि यह किसी को भी पूरे प्रोटोटाइप.js को शामिल किए बिना एक सरल समाधान की तलाश में मदद करता है

Answer 24

यहाँ कुछ अन्य उत्तरों का उपयोग करते हुए मैंने एक ऐसा संस्करण बनाया, जो सभी विशिष्ट पात्रों को बदल देता है, चाहे वह अलग-अलग एन्कोडेड वर्णों की संख्या के बावजूद (केवल एक कॉल replace()) हो ताकि बड़े तार के लिए तेजी से हो।

यह डोम एपीआई पर मौजूद या अन्य पुस्तकालयों पर निर्भर नहीं करता है।

window.encodeHTML = (function() {
    function escapeRegex(s) {
        return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    }
    var encodings = {
        '&'  : '&',
        '"'  : '"',
        '\'' : ''',
        '<'  : '&lt;',
        '>'  : '&gt;',
        '\\' : '&#x2F;'
    };
    function encode(what) { return encodings[what]; };
    var specialChars = new RegExp('[' +
        escapeRegex(Object.keys(encodings).join('')) +
    ']', 'g');

    return function(text) { return text.replace(specialChars, encode); };
})();

एक बार दौड़ने के बाद, आप अब कॉल कर सकते हैं

encodeHTML('<>&"\'')

लेना <>&"'

Answer 25

function encodeHTML(str) {
    return document.createElement("a").appendChild( 
        document.createTextNode(str)).parentNode.innerHTML;
};

function decodeHTML(str) {
    var element = document.createElement("a"); 
    element.innerHTML = str;
    return element.textContent;
};
var str = "<"
var enc = encodeHTML(str);
var dec = decodeHTML(enc);
console.log("str: " + str, "\nenc: " + enc, "\ndec: " + dec);