javascript - इनपुट फ़ील्ड से विशेषता विशेषता जब एचटीएमएल-एन्कोडिंग खो गया




jquery html (14)

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

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

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

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

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

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

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

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

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


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

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

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

function htmlEscape(str) {
    return str
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .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

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

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

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

        .replace(/\//g, '&#x2F;');

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

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

या केवल मुख्य वर्णों को लक्षित करने के लिए लक्षित करें (&, inrebreaks, <,>, "और ') जैसे:

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>


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

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 '';
    }
}

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

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

एचटीएमएल दिए गए मान को एन्कोड करता है

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

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

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


मुझे पता है कि यह एक पुराना है, लेकिन मैं स्वीकार किए गए उत्तर की एक भिन्नता पोस्ट करना चाहता था जो लाइनों को हटाए बिना 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();
} 

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

मैंने इसे एंट्रोपिक के जवाब से अन्य भागने में जोड़ा

.replace(/\\/g, '&#92;')

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


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

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

(jQuery एसडीके द्वारा प्रदान की गई jquery.string प्लगइन का हिस्सा)

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

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

http://stilldesigning.com/dotstring/


यहां एक गैर-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>

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

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

Underscore _.escape() और _.unescape() विधियों को प्रदान करता है जो ऐसा करते हैं।

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

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

<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>

आउटपुट होगा: &lt;script&gt;alert(&quot;I hack your site&quot;)&lt;/script&gt;

.htmlEncode () परिभाषित एक बार सभी तारों पर पहुंच योग्य होगा।


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

    function resetCharacterEntities() {
        charToEntity = {};
        entityToChar = {};
        // add the default set
        addCharacterEntities({
            '&amp;'     :   '&',
            '&gt;'      :   '>',
            '&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
    };
})();

यह ExtJS स्रोत कोड से है।





html-escape-characters