जावास्क्रिप्ट में URL एनकोड करें?

Question

आप जावास्क्रिप्ट का उपयोग करके सुरक्षित रूप से URL को कैसे एनकोड करते हैं ताकि इसे GET स्ट्रिंग में डाला जा सके?

var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;

मुझे लगता है कि आपको myUrlउस दूसरी पंक्ति में चर को एन्कोड करने की आवश्यकता है ?

Comments

ध्यान देने का प्रयास encodeURI () और decodeURI () ।

— मानव

जावास्क्रिप्ट urlencode फ़ंक्शन देखें ।

— यानि

आप इस उपकरण का उपयोग यहां कर सकते हैं: phillihp.com/toolz/url-encode-decode

— phillihp

एन्कोड्युरिकम्पोनेंट ()

— एंड्रयू

Answer 1

बिल्ट-इन फंक्शन एन्कोडोडेम्पोनेंट (str) और एनकोडर्इ (str) देखें ।
आपके मामले में, यह काम करना चाहिए:

var myOtherUrl = 
       "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

Comments

विवरण @cms जोड़ने के बारे में कैसे दिया? escapeएक वैध विकल्प भी है।

— hitautodestruct

@CMS के अनुसार encodeURIURL एन्कोडिंग के लिए वास्तव में सुरक्षित नहीं है।

— इफोट

@AnaelFavre क्योंकि यह पूरे यूआरएल, जो इस तरह के रूप में वर्ण की अनुमति नहीं है सांकेतिक शब्दों में बदलना करने के लिए है :, /, @आदि इन 2 तरीकों विनिमेय इस्तेमाल किया जा करने के लिए नहीं कर रहे हैं, आपको पता होना चाहिए कि तुम क्या सही विधि का उपयोग करने एन्कोडिंग कर रहे हैं।

— बुउ गुयेन

इसे भी देखें। developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… और डेवलपर.

— mozilla.org/en-US/docs/Web/JavaScript/Reference/…

जैसा कि इस पृष्ठ पर एक अन्य जवाब में उल्लेख किया गया है , इस साइट ने इस विधि का उपयोग करने के कारण का विस्तृत विवरण दिया है

— ब्रैड पार्क्स

Answer 2

आपके पास तीन विकल्प हैं:

• escape() सांकेतिक शब्दों में बदलना नहीं होगा: @*/+

• encodeURI() सांकेतिक शब्दों में बदलना नहीं होगा: ~!@#$&*()=:/,;?+'

• encodeURIComponent() सांकेतिक शब्दों में बदलना नहीं होगा: ~!*()'

लेकिन आपके मामले में, यदि आप किसी URL को GETदूसरे पेज के पैरामीटर में पास करना चाहते हैं, तो आपको उसका उपयोग करना चाहिए escapeया encodeURIComponentनहीं encodeURI।

स्टैक ओवरफ्लो प्रश्न देखें सबसे अच्छा अभ्यास: आगे की चर्चा के लिए बचना, या एन्कोडर्डी / एनकोडाउरीकोम्पोनेंट ।

Comments

भागने के साथ प्रयोग किया जाने वाला वर्ण एन्कोडिंग परिवर्तनशील है। EncodeURI और encodeURIComponent के साथ छड़ी, जो UTF-8 का उपयोग करते हैं।

— इरिकसन

सावधान रहे। यह एस्केप गैर-ASCII वर्णों को अपने यूनिकोड एस्केप अनुक्रमों में परिवर्तित करता है, जैसे %uxxx।

— opteronn

मैं encodeURIComponent का उपयोग कर रहा हूं और यह देख रहा हूं कि यह पाइप वर्णों को एनकोड नहीं करेगा |

— kevzettler

@kevzettler - ऐसा क्यों करना चाहिए? एक यूआरआई में पाइप का अर्थ महत्व नहीं है।

— निक

@GOVanniP: जो लोग जर्मन, फ्रेंच, जापानी, चीनी, अरबी वर्णों को इनपुट के रूप में अनुमति देते हैं और GET या POST के माध्यम से शोध पैरामीटर पास करते हैं।

— त्सेंग

Answer 3

साथ रहना encodeURIComponent()। फ़ंक्शन encodeURI()कई वर्णों को एनकोड करने के लिए परेशान नहीं करता है, जिनका URL में अर्थ महत्व है (जैसे "#", "?", और "और")।escape()पदावनत है, और "+" वर्णों को एनकोड करने की जहमत नहीं उठाता है, जो कि सर्वर पर एन्कोडेड रिक्त स्थान के रूप में व्याख्या की जाएगी (और, जैसा कि यहां अन्य लोगों द्वारा बताया गया है, गैर-एएससीआईआई अक्षरों को ठीक से URL-एनकोड नहीं करता है)।

वहाँ और कहीं और के बीच अंतरencodeURI()encodeURIComponent() का एक अच्छा विवरण है। यदि आप कुछ एनकोड करना चाहते हैं ताकि इसे यूआरआई के घटक के रूप में शामिल किया जा सके (जैसे कि क्वेरी स्ट्रिंग पैरामीटर के रूप में), तो आप उपयोग करना चाहते हैं encodeURIComponent()।

Answer 4

सबसे अच्छा जवाब क्वेरी स्ट्रिंग (और कहीं और) में मूल्योंencodeURIComponent पर उपयोग करना है ।

हालाँकि, मुझे लगता है कि कई एपीआई "" के साथ "+" को बदलना चाहते हैं, इसलिए मुझे निम्नलिखित का उपयोग करना होगा:

const value = encodeURIComponent(value).replace('%20','+');
const url = 'http://example.com?lang=en&key=' + value

escapeको अलग-अलग ब्राउज़रों में अलग-अलग तरीके से लागू किया गया है और encodeURIकई पात्रों (जैसे # और भी /) को एन्कोड नहीं किया गया है - इसे पूर्ण URI / URL पर बिना तोड़े उपयोग किए जाने के लिए बनाया गया है - जो सुपर सहायक या सुरक्षित नहीं है।

और जैसा कि @ जोकेम नीचे बताते हैं, आप encodeURIComponent()एक (प्रत्येक) फ़ोल्डर के नाम पर उपयोग करना चाह सकते हैं , लेकिन जिस कारण से ये एपीआई +फ़ोल्डर के नामों में ऐसा नहीं लगता है, इतना पुरानाencodeURIComponent काम बहुत अच्छे हैं।

उदाहरण:

const escapedValue = encodeURIComponent(value).replace('%20','+');
const escapedFolder = encodeURIComponent('My Folder'); // no replace
const url = `http://example.com/${escapedFolder}/?myKey=${escapedValue}`;

Comments

कृपया ध्यान दें, आपको पहले प्रश्न चिह्न (जो कि URL का 'क्वेरी' भाग है) के बाद केवल 20% + प्रतीकों के साथ प्रतिस्थापित करना चाहिए। मान लीजिए कि मैं ब्राउज़ करना चाहता हूं http://somedomain/this dir has spaces/info.php?a=this has also spaces। इसे रूपांतरित किया जाना चाहिए: http://somedomain/this%20dir%20has%spaces/info.php?a=this%20has%20also%20spacesलेकिन कई कार्यान्वयनों को '% 20' को '+' द्वारा प्रतिस्थापित किए जाने की अनुमति है। फिर भी, आप URL के पाथ-सेक्शन में '% 20' को '+' से बदल नहीं सकते हैं, यह तब तक नहीं मिला, जब तक कि आपके पास किसी +स्थान के बजाय एक निर्देशिका न हो ।

— जोकेम कूइजपर्स

@Jochem Kuijpers, निश्चित रूप से, आप एक निर्देशिका में "+" नहीं डालेंगे। मैं इसे केवल क्वेरी पैरामीटर मानों (या यदि आवश्यक हो तो कुंजी), संपूर्ण URL या संपूर्ण क्वेरी स्ट्रिंग पर लागू नहीं करूँगा।

— रयान टेलर

मैं एन्कोडिंग के परिणाम के बजाय मूल्य में

— बदलूंगा

@ njzk2 दुर्भाग्य से encodeURIComponent('+')आपको दे देगा %2B, इसलिए आपको दो नियमित अभिव्यक्तियों का उपयोग करना होगा ... जो मुझे लगता है कि यह थोड़े काम का है, क्योंकि '+' हैं '' अंत में अलग तरह से एन्कोड किए गए हैं।

— रियान टेलर

% 20 का "+" में अनुवाद करने का कोई कारण नहीं है। ASCII स्थान के लिए मान्य भागने का क्रम% 20 है, न कि "+" जिसका उल्लेख RFC 3986 ( tools.ietf.org/html/rfc3986 ) में नहीं है। "+" का उपयोग 1990 के दशक में किया गया था; यह अब अप्रचलित है और केवल विरासत कारणों से समर्थित है। इसका उपयोग न करें।

— xhienne

Answer 5

यदि आप jQuery का उपयोग कर रहे हैं तो मैं $.paramविधि के लिए जाऊंगा । यह URL मानों के लिए ऑब्जेक्ट मैपिंग फ़ील्ड को एन्कोड करता है, जो प्रत्येक मान पर एक एस्केप विधि को कॉल करने की तुलना में पढ़ना आसान है।

$.param({a:"1=2", b:"Test 1"}) // gets a=1%3D2&b=Test+1

Comments

मुझे लगता है कि प्रदान किया गया उदाहरण पर्याप्त है। यदि आपको api.jquery.com/jquery.param

— Maksym Kozlenko

लगभग हर कोई jQuery का उपयोग करता है और मैं दोहराना के बजाय इस के साथ वास्तव में अधिक आरामदायक महसूस करता हूं

— सिरिल डचोन-डोरिस

Answer 6

encodeURIComponent () जाने का रास्ता है।

var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

लेकिन आपको यह ध्यान रखना चाहिए कि php संस्करण से छोटे अंतर हैं urlencode()और जैसा कि @CMS ने उल्लेख किया है, यह हर वर्ण को एन्कोड नहीं करेगा। Http://phpjs.org/functions/urlencode/ किए गए js के बराबर के लड़के phpencode():

function urlencode(str) {
  str = (str + '').toString();

  // Tilde should be allowed unescaped in future versions of PHP (as reflected below), but if you want to reflect current
  // PHP behavior, you would need to add ".replace(/~/g, '%7E');" to the following.
  return encodeURIComponent(str)
    .replace('!', '%21')
    .replace('\'', '%27')
    .replace('(', '%28')
    .replace(')', '%29')
    .replace('*', '%2A')
    .replace('%20', '+');
}

Answer 7

URL एनकोड करने के लिए, जैसा कि पहले कहा जा चुका है, आपके दो कार्य हैं:

encodeURI()

तथा

encodeURIComponent()

दोनों मौजूद हैं इसका कारण यह है कि पहला URL को बहुत अधिक चीजों को छोड़ने के जोखिम के साथ संरक्षित करता है, जबकि दूसरा सब कुछ आवश्यक है।

पहले के साथ, आप नए बच गए URL को एड्रेस बार (उदाहरण के लिए) में कॉपी कर सकते हैं और यह काम करेगा। हालाँकि आपके अनसैप्ड 's क्षेत्र के सीमांकक के साथ हस्तक्षेप करेंगे,' = 'क्षेत्र के नाम और मूल्यों के साथ हस्तक्षेप करेगा, और' + 'रिक्त स्थान की तरह दिखेगा। लेकिन जब आप बच रहे हैं, तो URL प्रकृति को सुरक्षित रखना चाहते हैं, लेकिन यह काम करता है।

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

इसलिए यदि आप समय निकाल सकते हैं, तो आप हमेशा एनकोडर्कोम्पोनेंट () का उपयोग करना चाहते हैं - नाम / मूल्य जोड़े पर जोड़ने से पहले क्वेरी स्ट्रिंग में जोड़ने से पहले इस फ़ंक्शन का उपयोग करके नाम और मान दोनों को एन्कोड करें।

मैं एक कठिन समय आ रहा है कि एन्कोडर्इ () का उपयोग करने के कारणों के साथ आ रहा हूं - जो कि होशियार लोगों के लिए छोड़ दूँगा।

Answer 8

इसी तरह की चीज मैंने सामान्य जावास्क्रिप्ट के साथ आजमाई

function fixedEncodeURIComponent(str){
     return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

Answer 9

सुरुचिपूर्ण तरीका है

मेरी विनम्र राय में क्वेरी परम को एनकोड करने का सबसे सुरुचिपूर्ण तरीका है, जैसे परम के साथ एक ऑब्जेक्ट बनाना

const queryParams = { param1: 'value1', param2: 'value2' }

और फिर इसका उपयोग कर सांकेतिक शब्दों में बदलना:

const queryString = new URLSearchParams(queryParams).toString()

जैसा कि इस उत्तर में बताया गया है: https://stackoverflow.com/a/53171438/7284582

Answer 10

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

कहते हैं कि हमारे पास abc%20xyz 123इनपुट के रूप में है (एक स्थान पहले से ही एन्कोडेड है):

encodeURI("abc%20xyz 123")            //   wrong: "abc%2520xyz%20123"
encodeURI(decodeURI("abc%20xyz 123")) // correct: "abc%20xyz%20123"

Answer 11

URL एन्कोडिंग क्या है:

किसी URL को उस समय एन्कोड किया जाना चाहिए जब URL के अंदर स्थित विशेष वर्ण हों। उदाहरण के लिए:

console.log(encodeURIComponent('?notEncoded=&+'));

हम इस उदाहरण में देख सकते हैं कि स्ट्रिंग notEncodedको छोड़कर सभी वर्ण % संकेतों के साथ एन्कोडेड हैं। URL एन्कोडिंग को प्रतिशत एन्कोडिंग के रूप में भी जाना जाता है क्योंकि यह% के साथ सभी विशेष वर्णों से बच जाता है। फिर इस% हस्ताक्षर के बाद हर विशेष वर्ण में एक अद्वितीय कोड होता है

हमें URL एन्कोडिंग की आवश्यकता क्यों है:

कुछ पात्रों का URL स्ट्रिंग में एक विशेष मूल्य होता है। उदाहरण के लिए,? चरित्र एक क्वेरी स्ट्रिंग की शुरुआत दर्शाता है। वेब पर एक संसाधन का सफलतापूर्वक पता लगाने के लिए, जब किसी चरित्र का अर्थ स्ट्रिंग या यूरल संरचना के हिस्से के रूप में होता है, तो यह अंतर करने के लिए आवश्यक है।

हम JS में URL एन्कोडिंग कैसे प्राप्त कर सकते हैं:

JS यूटिलिटी फ़ंक्शन में बिल्ड का एक गुच्छा प्रदान करता है जिसका उपयोग हम आसानी से URL के एनकोड करने के लिए कर सकते हैं। ये दो सुविधाजनक विकल्प हैं:

1. encodeURIComponent(): URI का एक घटक तर्क के रूप में लेता है और एन्कोडेड URI स्ट्रिंग लौटाता है।
2. encodeURI(): URI को एक तर्क के रूप में लेता है और एन्कोडेड URI स्ट्रिंग लौटाता है।

उदाहरण और चेतावनी:

पूरे URL (योजना, उदाहरण के लिए https: // सहित) में पास नहीं होने के बारे में जानकारी रखें encodeURIComponent()। यह वास्तव में इसे एक कार्यात्मक URL में नहीं बदल सकता है। उदाहरण के लिए:

// for a whole URI don't use encodeURIComponent it will transform
// the / characters and the URL won't fucntion properly
console.log(encodeURIComponent("http://www.random.com/specials&char.html"));

// instead use encodeURI for whole URL's
console.log(encodeURI("http://www.random.com/specials&char.html"));

हम यह देख सकते हैं encodeURIComponentकि हम पूरे URL को डालते हैं जिसमें फ़ॉवर्ड स्लैश (/) भी विशेष वर्णों में परिवर्तित हो जाते हैं। इसके कारण URL ठीक से काम नहीं करेगा।

इसलिए (जैसा कि नाम का अर्थ है) उपयोग:

1. encodeURIComponent URL के एक निश्चित भाग पर जिसे आप एन्कोड करना चाहते हैं।
2. encodeURI पूरे URL पर जिसे आप एन्कोड करना चाहते हैं।

Answer 12

मेरे लिए कुछ भी काम नहीं किया। मैं सब देख रहा था लॉगिन पेज का HTML, कोड 200 के साथ क्लाइंट की ओर वापस आ रहा था। (302 पहले लेकिन उसी Ajax अनुरोध को एक अन्य Ajax अनुरोध के अंदर लॉगिन पृष्ठ लोड कर रहा था, जिसे लोडिंग प्लेन के बजाय रीडायरेक्ट होना चाहिए था लॉगिन पृष्ठ का पाठ)।

लॉगिन कंट्रोलर में, मैंने इस लाइन को जोड़ा:

Response.Headers["land"] = "login";

और वैश्विक अजाक्स हैंडलर में, मैंने यह किया:

$(function () {
    var $document = $(document);
    $document.ajaxSuccess(function (e, response, request) {
        var land = response.getResponseHeader('land');
        var redrUrl = '/login?ReturnUrl=' + encodeURIComponent(window.location);
        if(land) {
            if (land.toString() === 'login') {
                window.location = redrUrl;
            }
        }
    });
});

अब मेरे पास कोई मुद्दा नहीं है, और यह एक आकर्षण की तरह काम करता है।

Answer 13

URL स्ट्रिंग को एनकोड करें

    var url = $ ( स्थान )। attr ( 'href' ); // वर्तमान url प्राप्त करें // OR var url = 'folder / index.html; param = # 23dd & noob = yes' ; // या एक निर्दिष्ट करें 
    
      


var encodedUrl = encodeURIComponent(url);
console.log(encodedUrl);
//outputs folder%2Findex.html%3Fparam%3D%2323dd%26noob%3Dyes


for more info go http://www.sitepoint.com/jquery-decode-url-string

Answer 14

यहाँ एक LIVE DEMO है encodeURIComponent()और decodeURIComponent()JS कार्य में बनाया गया है:

<!DOCTYPE html>
<html>
  <head>
    <style>
      textarea{
        width:30%;
        height:100px;
      }
    </style>
    <script>
      // encode string to base64
      function encode()
      {
        var txt = document.getElementById("txt1").value;
        var result = btoa(txt);
        document.getElementById("txt2").value = result;
      }
      // decode base64 back to original string
      function decode()
      {
        var txt = document.getElementById("txt3").value;
        var result = atob(txt);
        document.getElementById("txt4").value = result;
      }
    </script>
  </head>
  <body>
    <div>
      <textarea id="txt1">Some text to decode
      </textarea>
    </div>
    <div>
      <input type="button" id="btnencode" value="Encode" onClick="encode()"/>
    </div>
    <div>
      <textarea id="txt2">
      </textarea>
    </div>
    <br/>
    <div>
      <textarea id="txt3">U29tZSB0ZXh0IHRvIGRlY29kZQ==
      </textarea>
    </div>
    <div>
      <input type="button" id="btndecode" value="Decode" onClick="decode()"/>
    </div>
    <div>
      <textarea id="txt4">
      </textarea>
    </div>
  </body>
</html>

Answer 15

आप एसपीआई लाइब्रेरी का उपयोग कर सकते हैं और नीचे दिए गए फ़ंक्शन का उपयोग करके अपने यूआरएल को एनकोड कर सकते हैं। फ़ंक्शन सुनिश्चित करता है कि '/' एन्कोडिंग के लिए खो नहीं गया है, जबकि शेष पाठ सामग्री एन्कोडेड है:

function encodeUrl(url)
{
    String arr[] = url.split("/");
    String encodedUrl = "";
    for(int i = 0; i<arr.length; i++)
    {
        encodedUrl = encodedUrl + ESAPI.encoder().encodeForHTML(ESAPI.encoder().encodeForURL(arr[i]));
        if(i<arr.length-1) encodedUrl = encodedUrl + "/";
    }
    return url;
}

https://www.owasp.org/index.php/ESAPI_JavaScript_Readme

Answer 16

RFC 3986fixedEncodeURIComponent का सख्ती से पालन करने के लिए फ़ंक्शन का उपयोग करें :

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

Answer 17

आपको encodeURIComponent()सीधे उपयोग नहीं करना चाहिए ।

RFC3986 पर एक नज़र डालें: यूनिफ़ॉर्म रिसोर्स आइडेंटिफ़ायर (URI): जेनेरिक सिंटैक्स

उप-डेलिम्स = "!" / "$" / "और" / "" "/" ("/") "/" * "/" + "/", "/"; " / "="

आरक्षित वर्णों का उद्देश्य ऐसे पात्रों का परिसीमन करना है जो किसी URI के भीतर अन्य डेटा से अलग-अलग होते हैं।

RFC3986 में URI परिभाषा से ये आरक्षित वर्ण बच नहीं रहे हैं encodeURIComponent()।

एमडीएन वेब डॉक्स: एनकोड्यूरिकम्पोनेंट ()

RFC 3986 (जो आरक्षित है ?,, (,),), और *) का पालन करने में अधिक कठोर होने के लिए, भले ही इन वर्णों में कोई औपचारिक यूआरआई परिसीमन उपयोग न हो, निम्नलिखित सुरक्षित रूप से उपयोग किया जा सकता है:

MDN वेब डॉक्स फ़ंक्शन का उपयोग करें ...

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}