JQuery के साथ HTML स्ट्रिंग्स को बचाना

Question

किसी को भी jQuery में तार से HTML से बचने का एक आसान तरीका पता है ? मुझे एक मनमाना स्ट्रिंग पास करने में सक्षम होना चाहिए और इसे एक HTML पृष्ठ (जावास्क्रिप्ट / HTML हमलों को रोकने) में प्रदर्शन के लिए ठीक से बच गया है। मुझे यकीन है कि ऐसा करने के लिए jQuery का विस्तार करना संभव है, लेकिन मुझे इसे पूरा करने के लिए फिलहाल रूपरेखा के बारे में पर्याप्त नहीं पता है।

Comments

यह भी देखें: jsperf.com/…

— Christophe Roussy

Answer 1

जब से आप jQuery का उपयोग कर रहे हैं , आप बस तत्व की textसंपत्ति सेट कर सकते हैं:

// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";

// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after: 
// <div class="someClass">&lt;script&gt;alert('hi!');&lt;/script&gt;</div>

// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value: 
// &lt;script&gt;alert('hi!');&lt;/script&gt;

Comments

आप उस बिंदु से चूक गए जिसे आपको $ ("div.someClass") तक पहुँचना है। html () बच गए संस्करण को बाहर निकालने के लिए।

— मोर्टेन क्रिस्टियनसेन

यह सुरक्षित नहीं है यदि आपका तार

— व्हाट्सएप

@travis यह jQuery की वेबसाइट पर प्रलेखित है: "अलग-अलग ब्राउज़रों में HTML पार्सर में भिन्नता के कारण, वापस लौटा गया पाठ नए संस्करणों और अन्य सफेद स्थान में भिन्न हो सकता है।" api.jquery.com/text

— geofflee

@mklement अगर आप पहले से ही इस समाधान का उपयोग कर रहे हैं, आप की तरह कर रही कुछ के साथ कोई परेशानी नहीं होगी: $(element2).attr("some-attr", $(element1).html());इस उदाहरण देखें: jsbin.com/atibig/1/edit

— ट्रैविस

यह उद्धरण और दोहरे उद्धरणों से बच नहीं है जो बुरा है! wonko.com/post/html-escaping

— लियोर

Answer 2

मूंछों से भी हल है। js

var entityMap = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;'
};

function escapeHtml (string) {
  return String(string).replace(/[&<>"'`=\/]/g, function (s) {
    return entityMap[s];
  });
}

Comments

ध्यान दें कि, उत्सुकता से, 'एक दशमलव प्रारूप वाली इकाई में मैप किया जाता है, जबकि हेक्स प्रारूप /का उपयोग करता है ।

— mklement0

यह स्वीकृत उत्तर होना चाहिए - यह सरल, कुशल है, किसी निर्भरता की आवश्यकता नहीं है और यह बिल्कुल वही है जो बिना किसी अस्पष्ट हैक के करना है।

— लोरेफेन

क्या करने के लिए मार्गदर्शन पर \nहै <br>?

— एमविनटर

यहाँ स्रोत के लिए एक अद्यतन लिंक है: github.com/janl/mustache.js/blob/…

— mjackson

@amwinter, मैंने उपर्युक्त स्क्रिप्ट को "\ n": '<br>' से बढ़ाकर इकाई मानचित्र में बदल दिया और regexp को / [[& <> "" \ /] | [\ n] / g

— walv

Answer 3

$('<div/>').text('This is fun & stuff').html(); // "This is fun &amp; stuff"

स्रोत: http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb

Comments

जैसा कि उपरोक्त उत्तर में उल्लेख किया गया है, इस समाधान को व्हॉट्सएप को संरक्षित करने की गारंटी नहीं है।

— जियोफली

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

— किप

@ किप: @travis ने पाया कि jQuery की attr()विधि (कम से कम 1.8.3) अपनी एन्कोडिंग स्वयं करती है, ताकि अनएन्कोडेड स्ट्रिंग्स को सीधे पास किया जा सके ; जैसे:$('<div/>').attr('test-attr', '\'Tis "fun" & stuff')[0].outerHTML

— mklement0

@tarekahf यह अजीब है। आप किस संस्करण का उपयोग कर रहे हैं? यदि आप इसे शब्दशः कॉपी-पेस्ट करते हैं तो क्या उदाहरण कोड काम करता है? यहां नवीनतम jQuery (3.1.0) के साथ ठीक काम करता है: jsbin.com/fazimigayo/1/edit?html,js,console,output (और यह पहले के सभी संस्करणों पर भी काम करना चाहिए)

— हेनरिक एन

@tarekahf $('<div/>')एक नया divतत्व बनाता है जो DOM से जुड़ा नहीं है। इसलिए यह किसी भी मौजूदा तत्वों को नहीं बदलेगा। यह थोड़ा भ्रमित करने वाला है कि कैसे jQuery $()तत्वों ( $('div')) को खोजने और उन्हें बनाने के लिए एक ही फ़ंक्शन का उपयोग करता है और इसके अलावा कुछ और चीजों के लिए ... :)

— हेनरिक एन

Answer 4

यदि आप HTML के लिए बच रहे हैं, तो केवल तीन हैं जो मैं सोच सकता हूं कि वास्तव में आवश्यक होगा:

html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

आपके उपयोग के मामले के आधार पर, आपको चीजों को करना भी पड़ सकता "है "। यदि सूची काफी बड़ी हो गई है, तो मैं सिर्फ एक सरणी का उपयोग करूंगा:

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]
for(var item in findReplace)
    escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);

encodeURIComponent() यह केवल HTML के लिए नहीं, URL के लिए बच जाएगा।

Comments

यह नियमित अभिव्यक्ति अजीब परिणाम उत्पन्न करेगी यदि HTML में प्रश्न पहले से ही संस्थाओं से बच गए हैं। उदाहरण के लिए, "टॉम एंड जेरी" से बचकर "टॉम एंड जेरी" का निर्माण करेंगे

— रेयान

कृपया स्थानीय रूप varसे घोषित करने के लिए उपयोग करें item; वैसे भी, for … inएक सरणी के माध्यम से पाशन करते समय लूप का उपयोग बिल्कुल न करें ! forइसके बजाय एक साधारण लूप का उपयोग करें । ओह, और यह encodeURIComponentनहीं है escapeURIComponent।

— मार्सेल कोर्पेल

यदि आप टैग विशेषताओं के साथ काम कर रहे हैं, तो आपको उद्धरण और / या दोहरे उद्धरण चिह्नों से बचना होगा। HTMLspecialchars के लिए PHP प्रलेखन में रूपांतरणों की एक उपयोगी सूची है जो इसे निष्पादित करता है। php.net/htmlspecialchars

— geofflee

नए लोगों के लिए बस एक तरह का अनुस्मारक, यदि आप अपनी वेबसाइट पर कहीं गैर-अंग्रेज़ी वर्ण रखने का इरादा रखते हैं, तो इसका उपयोग न करें ... जाहिर है कि 'é' जैसे उच्चारण वाले वर्णों के कारण ऐसा नहीं होगा &eacute:; यहाँ संदर्भ के लिए HTML संस्थाओं की एक सूची दी गई है: w3schools.com/tags/ref_entities.asp

— LoganWolfer

@Ryan: हालांकि यह इंगित करने योग्य है कि यह समाधान पहले से एनकोड किए गए तारों को सही तरीके से नहीं संभालता है, यह भी इस लायक नहीं है कि इस पृष्ठ पर अधिकांश - संभवतः सभी समाधानों पर भी यही लागू हो।

— mklement0

Answer 5

अंडरस्कोर का उपयोग करने के लिए पर्याप्त आसान:

_.escape(string) 

अंडरस्कोर एक यूटिलिटी लाइब्रेरी है जो बहुत सारी सुविधाएँ प्रदान करती है जो कि देशी js प्रदान नहीं करते हैं। वहाँ भी लॉश है जो अंडरस्कोर के समान एपीआई है लेकिन अधिक प्रदर्शन करने के लिए फिर से लिखा गया था।

Answer 6

मैंने एक छोटा सा फ़ंक्शन लिखा है जो यह करता है। यह केवल निकल जाता है ", &, <और >(लेकिन आम तौर पर है कि सभी तुम वैसे भी जरूरत है)। यह थोड़ा और अधिक सुरुचिपूर्ण है फिर पहले प्रस्तावित समाधानों में यह सभी रूपांतरण करने के लिए केवल एक .replace() का उपयोग करता है । ( EDIT 2: फ़ंक्शन को छोटा बनाने और कोड को छोटा करने के कारण कोड जटिलता, यदि आप इस उत्तर के मूल कोड को देखने के बारे में उत्सुक हैं।)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&<>]/g, function (a) {
        return { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[a];
    });
}

यह सादा जावास्क्रिप्ट है, कोई jQuery का उपयोग नहीं किया गया है।

बचना /और 'भी

Mklement की टिप्पणी के जवाब में संपादित करें ।

किसी भी वर्ण को शामिल करने के लिए उपरोक्त फ़ंक्शन को आसानी से विस्तारित किया जा सकता है। बचने के लिए अधिक वर्णों को निर्दिष्ट करने के लिए, बस उन्हें वर्ण वर्ग में दोनों को नियमित अभिव्यक्ति (यानी अंदर /[...]/g) और chrऑब्जेक्ट में एक प्रविष्टि के रूप में डालें । ( EDIT 2: इस फ़ंक्शन को भी छोटा कर दिया, उसी तरह से।)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&'\/<>]/g, function (a) {
        return {
            '"': '&quot;', '&': '&amp;', "'": '&#39;',
            '/': '&#47;',  '<': '&lt;',  '>': '&gt;'
        }[a];
    });
}

'Apostrophe के लिए उपरोक्त उपयोग पर ध्यान दें ( 'इसके बजाय प्रतीकात्मक इकाई का उपयोग किया जा सकता है - यह XML में परिभाषित किया गया है, लेकिन मूल रूप से HTML कल्पना में शामिल नहीं था और इसलिए सभी ब्राउज़रों द्वारा समर्थित नहीं हो सकता है। देखें: HTML चरित्र एन्कोडिंग पर विकिपीडिया लेख । )। मुझे यह भी याद है कि दशमलव संस्थाओं का उपयोग करना हेक्साडेसिमल का उपयोग करने की तुलना में अधिक व्यापक रूप से समर्थित है, लेकिन मैं अब इसके लिए स्रोत नहीं ढूंढ सकता। (और वहाँ कई ब्राउज़र नहीं हो सकते हैं जो हेक्साडेसिमल संस्थाओं का समर्थन नहीं करता है।)

नोट: भागे हुए पात्रों की सूची में जोड़ना /और 'यह सब उपयोगी नहीं है, क्योंकि उनका HTML में कोई विशेष अर्थ नहीं है और उन्हें भागने की आवश्यकता नहीं है ।

मूल escapeHtmlकार्य

EDIT 2: मूल फ़ंक्शन chrने .replace()कॉलबैक के लिए आवश्यक ऑब्जेक्ट को संग्रहीत करने के लिए एक चर ( ) का उपयोग किया । इस चर को भी इसे बनाने के लिए एक अतिरिक्त अनाम फ़ंक्शन की आवश्यकता थी, जिससे फ़ंक्शन (अनावश्यक रूप से) थोड़ा बड़ा और अधिक जटिल हो गया।

var escapeHtml = (function () {
    'use strict';
    var chr = { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' };
    return function (text) {
        return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
    };
}());

मैंने यह परीक्षण नहीं किया है कि दोनों में से कौन सा संस्करण तेज़ है। यदि आप करते हैं, तो इसके बारे में जानकारी और लिंक जोड़ने के लिए स्वतंत्र महसूस करें।

Comments

समय निकालने के लिए धन्यवाद, @Zrajm भागने की जरूरत नहीं के बारे में अच्छी बात; किसी भी विचार क्यों mustache.jsऔर underscore.jsयह दोनों करते हैं? बाद की बात हो रही है: यह केवल संख्यात्मक संस्थाओं (का प्रतिनिधित्व करने को पहचानता है 'और /में, ') अपरकेस हेक्स जब प्रपत्र संयुक्त राष्ट्र से बचने। इस प्रकार, पाठ बच गया mustache.js- जो उत्सुकता से हेक्स के मिश्रण का उपयोग करता है । और दशमलव प्रारूप - सही ढंग से अंदर नहीं होंगे underscore.js। मुझे आश्चर्य है कि अन्य लोकप्रिय पुस्तकालय इससे कैसे निपटते हैं।

— mklement0

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

— zrajm

पुन ': सही: केवल XHTML में सुरक्षित उपयोग ; भीड़-स्रोत के मुंह से सीधे - जोर मेरा: "(...) एक अनुरूप HTML प्रोसेसर द्वारा पढ़ा गया , (...) & apos का उपयोग; या कस्टम इकाई संदर्भ का समर्थन नहीं किया जा सकता है (...)" - व्यवहार में : आधुनिक ब्राउज़र HTML में भी इसका समर्थन करते हैं । हेक्स अंक में फिर से मामला। (एक ही स्रोत; जोर मेरा): "एक्सएमएल दस्तावेजों में x लोअरकेस होना चाहिए। [...] hhhh अपरकेस और लोअरकेस मिश्रण कर सकता है, हालांकि अपरकेस सामान्य शैली है ।" हमें आश्चर्य होता है कि किसने स्लैश को एनकोड करने का फैसला किया; शायद वास्तव में सिर्फ URI और HTML एन्कोडिंग के बीच एक भ्रम है?

— mklement0

अंतिम विचार: लगता है कि एन्कोडिंग /की जरूरत नहीं है, लेकिन एन्कोडिंग 'अभी भी उपयोगी लगता है कि केस केस को सुरक्षित रूप से संभालना है जहां एक एन्कोडेड स्ट्रिंग का उपयोग एकल उद्धरणों में संलग्न विशेषता मान के रूप में किया जाता है ।

— mklement0

ये दोनों ही धीमे हैं। दोहरे अंकों के मार्जिन से सबसे तेज़ समाधान उन रिप्लेसेस की एक श्रृंखला है जो फ़ंक्शंस के बजाय स्ट्रिंग्स को पास करते हैं।

— एडम लेगट

Answer 7

मुझे एहसास है कि मैं इस पार्टी में कितनी देर से हूं, लेकिन मेरे पास एक बहुत आसान समाधान है जिसे jQuery की आवश्यकता नहीं है।

escaped = new Option(unescaped).innerHTML;

संपादित करें: यह उद्धरण से बच नहीं जाता है। एक ही मामला है जहां उद्धरण से बचने की आवश्यकता होगी यदि सामग्री को HTML स्ट्रिंग के भीतर एक विशेषता के लिए इनलाइन चिपकाया जा रहा है। मेरे लिए ऐसे मामले की कल्पना करना कठिन है जहां ऐसा करना अच्छा डिजाइन होगा।

संपादित करें 3: सबसे तेज़ समाधान के लिए, सरम से ऊपर के उत्तर की जाँच करें। यह सबसे छोटा है।

Comments

यह उद्धरण नहीं बदलता है - कम से कम अभी फ़ायरफ़ॉक्स 52 में।

— getetbro

एस्केपिंग उद्धरण केवल कार्यात्मक रूप से विशेषताओं में प्रासंगिक हैं। जब से हम बच रहे हैं <और >, तब तक उद्धरण से बचने का कोई लाभ नहीं है, जब तक कि उत्पन्न सामग्री का इरादा एक विशेषता में नहीं जाना है।

— एडम लेगट

Answer 8

यहाँ एक साफ, स्पष्ट जावास्क्रिप्ट फ़ंक्शन है। यह पाठ को "कुछ <कई" जैसे "कुछ & lt; कई" से बचाएगा।

function escapeHtmlEntities (str) {
  if (typeof jQuery !== 'undefined') {
    // Create an empty div to use as a container,
    // then put the raw text in and get the HTML
    // equivalent out.
    return jQuery('<div/>').text(str).html();
  }

  // No jQuery, so use string replace.
  return str
    .replace(/&/g, '&amp;')
    .replace(/>/g, '&gt;')
    .replace(/</g, '&lt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;');
}

Answer 9

अंतिम परीक्षणों के बाद मैं सबसे तेज़ और पूरी तरह से ब्राउज़र संगत देशी जावा स्क्रिप्ट (डीओएम) समाधान की सिफारिश कर सकता हूं :

function HTMLescape(html){
    return document.createElement('div')
        .appendChild(document.createTextNode(html))
        .parentNode
        .innerHTML
}

यदि आप इसे कई बार दोहराते हैं तो आप इसे एक बार तैयार चर के साथ कर सकते हैं:

//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);

//main work for each case
function HTMLescape(html){
  DOMtext.nodeValue = html;
  return DOMnative.innerHTML
}

मेरी अंतिम प्रदर्शन तुलना ( स्टैक प्रश्न ) देखें।

Comments

क्या दो नोड्स का उपयोग करना आवश्यक है? कैसे के बारे में सिर्फ एक:var p = document.createElement('p'); p.textContent = html; return p.innerHTML;

— Dan Dascalescu

@DanDascalescu: के अनुसार MDN , textContentसमारोह केवल क्रोम 1 +, फ़ायरफ़ॉक्स 2, IE9, ओपेरा 9.64 और सफ़ारी 3 के द्वारा समर्थित है (उत्तरार्द्ध दो एनोटेट "संभवतः पहले")। यह इस प्रकार ओप्स को "पूरी तरह से क्रॉस-ब्राउज़र संगत" दावे को तोड़ देगा।

— zb226

p.innerText = html; return p.innerHTML

— बेकिम बकाज

Answer 10

कोशिश करें Underscore.string लिबर, यह jQuery के साथ काम करता है।

_.str.escapeHTML('<div>Blah blah blah</div>')

उत्पादन:

'<div>Blah blah blah</div>'

Comments

मुख्य अंडरस्कोर लाइब्रेरी में अब एक _.escape()उपयोगिता फ़ंक्शन है।

— कोडपे

Answer 11

मैंने मूंछें बढ़ाई हैं। उदाहरण के escapeHTML()लिए स्ट्रिंग ऑब्जेक्ट में विधि जोड़ना ।

var __entityMap = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};

String.prototype.escapeHTML = function() {
    return String(this).replace(/[&<>"'\/]/g, function (s) {
        return __entityMap[s];
    });
}

इस तरह यह उपयोग करने में काफी आसान है "Some <text>, more Text&Text".escapeHTML()

Comments

उपयोगी है, लेकिन यह भी मैं __entityMapसमारोह स्थानीय क्षेत्र में चले गए । और इन सबको लपेट दियाif (typeof String.prototype.escapeHTML !== 'function'){...}

— फ्लेमस्टॉर्म

Answer 12

escape() तथा unescape() URL के लिए / डिकोड स्ट्रिंग्स को एनकोड करने का इरादा है, HTML नहीं।

वास्तव में, मैं निम्नलिखित स्निपेट का उपयोग उस चाल को करने के लिए करता हूं जिसके लिए किसी ढांचे की आवश्यकता नहीं है:

var escapedHtml = html.replace(/&/g, '&')
                      .replace(/>/g, '>')
                      .replace(/</g, '&lt;')
                      .replace(/"/g, '&quot;')
                      .replace(/'/g, '&apos;');

Comments

यदि आप "s करने जा रहे हैं, तो आपको कम से कम 'और `` को फ़्रे में जोड़ने की आवश्यकता है । वे केवल HTML में तत्वों के अंदर स्ट्रिंग टैग डेटा के लिए वास्तव में आवश्यक हैं। Html डेटा के लिए (केवल टैग के बाहर) केवल पहले 3 आवश्यक हैं।

— मारियस

Answer 13

यदि आपके पास अंडरस्कोर .js है, तो उपयोग करें _.escape(ऊपर पोस्ट किए गए jQuery विधि से अधिक कुशल):

_.escape('Curly, Larry & Moe'); // returns: Curly, Larry & Moe

Answer 14

यदि आप regex मार्ग पर जा रहे हैं, तो ऊपर के tghw के उदाहरण में एक त्रुटि है।

<!-- WON'T WORK -  item[0] is an index, not an item -->

var escaped = html; 
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g,"&gt;"], [/"/g,
"&quot;"]]

for(var item in findReplace) {
     escaped = escaped.replace(item[0], item[1]);   
}


<!-- WORKS - findReplace[item[]] correctly references contents -->

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]

for(var item in findReplace) {
     escaped = escaped.replace(findReplace[item[0]], findReplace[item[1]]);
}

Comments

मेरा मानना ​​है कि यह (findReplace में var आइटम) होना चाहिए {escaped = escaped.replace (findReplace [आइटम] [0], findReplace [आइटम] [1]); }

— क्रिस स्टीफंस

Answer 15

यह एक अच्छा सुरक्षित उदाहरण है ...

function escapeHtml(str) {
    if (typeof(str) == "string"){
        try{
            var newStr = "";
            var nextCode = 0;
            for (var i = 0;i < str.length;i++){
                nextCode = str.charCodeAt(i);
                if (nextCode > 0 && nextCode < 128){
                    newStr += "&#"+nextCode+";";
                }
                else{
                    newStr += "?";
                }
             }
             return newStr;
        }
        catch(err){
        }
    }
    else{
        return str;
    }
}

Comments

आप किस प्रकार के अपवादों को दबा रहे हैं?

— स्टीफन माज्यूस्की

Answer 16

आप इसे आसानी से वैनिला जेएस के साथ कर सकते हैं।

बस दस्तावेज़ में एक पाठ नोड जोड़ें। यह ब्राउज़र द्वारा बच जाएगा।

var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)

Answer 17

(function(undefined){
    var charsToReplace = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;'
    };

    var replaceReg = new RegExp("[" + Object.keys(charsToReplace).join("") + "]", "g");
    var replaceFn = function(tag){ return charsToReplace[tag] || tag; };

    var replaceRegF = function(replaceMap) {
        return (new RegExp("[" + Object.keys(charsToReplace).concat(Object.keys(replaceMap)).join("") + "]", "gi"));
    };
    var replaceFnF = function(replaceMap) {
        return function(tag){ return replaceMap[tag] || charsToReplace[tag] || tag; };
    };

    String.prototype.htmlEscape = function(replaceMap) {
        if (replaceMap === undefined) return this.replace(replaceReg, replaceFn);
        return this.replace(replaceRegF(replaceMap), replaceFnF(replaceMap));
    };
})();

कोई वैश्विक चर, कोई स्मृति अनुकूलन। उपयोग:

"some<tag>and&symbol©".htmlEscape({'©': '&copy;'})

परिणाम है:

"some<tag>and&symbol©"

Answer 18

2 सरल तरीके जिनकी आवश्यकता नहीं है ...

आप अपने स्ट्रिंग के सभी वर्णों को इस तरह से एन्कोड कर सकते हैं :

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

या सिर्फ मुख्य पात्रों को लक्ष्य में चिंता करने की के बारे में &, पंक्ति विराम, <, >, "और 'जैसे:

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

var myString='Encode HTML entities!\n"Safe" escape <script></'+'script> & other tags!';

test.value=encode(myString);

testing.innerHTML=encode(myString);

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

<p><b>What JavaScript Generated:</b></p>

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

<p><b>What It Renders Too In HTML:</b></p>

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

Answer 19

सादा जावास्क्रिप्ट भागने का उदाहरण:

function escapeHtml(text) {
    var div = document.createElement('div');
    div.innerText = text;
    return div.innerHTML;
}

escapeHtml("<script>alert('hi!');</script>")
// "&lt;script&gt;alert('hi!');&lt;/script&gt;"

Comments

कोड-केवल उत्तर हतोत्साहित किए जाते हैं क्योंकि वे यह नहीं समझाते हैं कि वे मुद्दे को कैसे हल करते हैं। कृपया अपने उत्तर को यह समझाने के लिए अपडेट करें कि यह पहले से स्वीकार किए गए दूसरे और उत्कीर्ण उत्तरों पर कैसे सुधार करता है। साथ ही, यह प्रश्न 9 साल पुराना है, आपके प्रयासों को उन उपयोगकर्ताओं द्वारा अधिक सराहा जाएगा जिनके हाल के अनुत्तरित प्रश्न हैं। कृपया समीक्षा करें कि मैं एक अच्छा उत्तर कैसे लिखूं ।

— फ्लिफ़्केनेट

यहाँ @FluffyKitten एक आप जानना चाहते हैं :) फायदे और इस तरह के समारोह है कि विस्तार में सब कुछ बताते हैं का नुकसान पर एक बेहद nicly लिखा ब्लॉग पोस्ट है shebang.brandonmintern.com/...

— db306

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

— फुलकीटुकन नेव

ध्यान दें कि ब्रांडोनमिन्टर्न डॉट कॉम की अवधि समाप्त हो गई है और अब इसे पार्क किया गया है। नया शेबंग पता shebang.mintern.net/foolproof-html-esformation-in-javascript/ है।

— ब्रेंडन

Answer 20

function htmlEscape(str) {
    var stringval="";
    $.each(str, function (i, element) {
        alert(element);
        stringval += element
            .replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(' ', '-')
            .replace('?', '-')
            .replace(':', '-')
            .replace('|', '-')
            .replace('.', '-');
    });
    alert(stringval);
    return String(stringval);
}

Answer 21

function htmlDecode(t){
   if (t) return $('<div />').html(t).text();
}

एक जादू की तरह काम करता है

Comments

पाठ html टैग हटाता है, लेकिन $ ('<div />')। html (t) .html (); काम करता है

— बास जॉब्स

Answer 22

यह उत्तर jQuery और सामान्य JS विधियाँ प्रदान करता है, लेकिन DOM का उपयोग किए बिना यह सबसे छोटा है:

unescape(escape("It's > 20% less complicated this way."))

बच गए तार: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

यदि बची हुई जगहें आपको परेशान करती हैं, तो प्रयास करें:

unescape(escape("It's > 20% less complicated this way.").replace(/%20/g, " "))

बच गए तार: It%27s %3E 20%25 less complicated this way.

दुर्भाग्यवश, जावास्क्रिप्ट 1.5 संस्करण मेंescape() फ़ंक्शन को हटा दिया गया था । encodeURI()या encodeURIComponent()विकल्प हैं, लेकिन वे उपेक्षा करते हैं ', इसलिए कोड की अंतिम पंक्ति इस में बदल जाएगी:

decodeURI(encodeURI("It's > 20% less complicated this way.").replace(/%20/g, " ").replace("'", '%27'))

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

Comments

यह URL एन्कोडिंग के लिए है। प्रश्न HTML भागने के बारे में था, जो बहुत अलग है।

— Thelem

@ यह, नहीं कि स्ट्रिंग HTML में एम्बेडेड जावास्क्रिप्ट सरणियों में एम्बेडेड हैं, लेकिन मैं मानता हूं कि यह सादे HTML से बचने के बारे में था ताकि इसे तुरंत पाठ के रूप में प्रदर्शित किया जा सके।

— सेस टिम्मरमैन

Answer 23

मूंछों से समाधान के लिए ES6 एक लाइनर

const escapeHTML = str => (str+'').replace(/[&<>"'`=\/]/g, s => ({'&': '&amp;','<': '&lt;','>': '&gt;','"': '&quot;',"'": '&#39;','/': '&#x2F;','`': '&#x60;','=': '&#x3D;'})[s]);

Answer 24

यदि आप डेटाबेस में इस जानकारी को सहेज रहे हैं , तो क्लाइंट-साइड स्क्रिप्ट का उपयोग करके HTML से बचना गलत है , यह सर्वर में किया जाना चाहिए । अन्यथा अपने एक्सएसएस संरक्षण को बायपास करना आसान है।

मेरी बात को स्पष्ट करने के लिए, यहां एक उत्तर का उपयोग करके एक उदाहरण दिया गया है:

कहते हैं कि आप अपने ब्लॉग में एक टिप्पणी से Html से बचने के लिए और फिर इसे अपने सर्वर पर पोस्ट करने के लिए फ़ंक्शन एस्केपहटमेल का उपयोग कर रहे हैं।

var entityMap = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
  };

  function escapeHtml(string) {
    return String(string).replace(/[&<>"'\/]/g, function (s) {
      return entityMap[s];
    });
  }

उपयोगकर्ता कर सकता है:

• पोस्ट अनुरोध अनुरोधों को संपादित करें और टिप्पणी को जावास्क्रिप्ट कोड के साथ बदलें।
• ब्राउज़र कंसोल का उपयोग करके एस्केपहट एमएल फ़ंक्शन को ओवरराइट करें।

यदि उपयोगकर्ता इस स्निपेट को कंसोल में पेस्ट करता है तो यह XSS सत्यापन को बायपास कर देगा:

function escapeHtml(string){
   return string
}

Comments

मैं असहमत हूं। इस XSS सुरक्षा को बायपास करने के लिए आपको एक XSS अटैक (स्क्रिप्ट को स्कैन करना जो भागने में अक्षम करता है) का उपयोग करना होगा, जिसे आप वास्तव में ब्लॉक कर रहे हैं। कुछ मामलों में यह वास्तव में क्लाइंट पर भागने के लिए अधिक उपयुक्त है, उदाहरण के लिए यदि डेटा एक REST एपीआई से आता है जिसे मानक JSON को वापस करना है।

— इटलीपेलएले

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

— काऊ जिमिनेस

@Qualcuno मैंने अपनी बात को और स्पष्ट करने के लिए कुछ उदाहरणों को शामिल किया।

— काऊ जिमिनेस

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

— ItalyPaleAle

@Qualcuno यह Stackoverflow में एक लोकप्रिय प्रश्न है, और मेरा मानना ​​है कि यह कवर किया जाने वाला एक महत्वपूर्ण बिंदु है। इसलिए मैंने जवाब दिया।

— काऊ जिमिनेस

Answer 25

सभी समाधान बेकार अगर तुम न फिर से भागने से रोकने के, जैसे सबसे समाधान बचने रखना चाहते हैं &के लिए &।

escapeHtml = function (s) {
    return s ? s.replace(
        /[&<>'"]/g,
        function (c, offset, str) {
            if (c === "&") {
                var substr = str.substring(offset, offset + 6);
                if (/&(amp|lt|gt|apos|quot);/.test(substr)) {
                    // already escaped, do not re-escape
                    return c;
                }
            }
            return "&" + {
                "&": "amp",
                "<": "lt",
                ">": "gt",
                "'": "apos",
                '"': "quot"
            }[c] + ";";
        }
    ) : "";
};

Comments

इसे डबल एस्केपिंग कहा जाता है और यह सुनिश्चित करके तय किया जाना चाहिए कि आपका इनपुट डेटा पहले से बच नहीं रहा है। क्या होगा यदि आप सचमुच दिखाना चाहते हैं & lt; उपयोगकर्ता के लिए? या शायद पाठ कहीं और पुन: उपयोग होने जा रहा है, और होने वाले पलायन पर निर्भर करता है?

— Thelem