javascript - html encoding online




ترميز URL في JavaScript؟ (9)

ما هو ترميز عنوان URL:

يجب ترميز عنوان URL عندما تكون هناك أحرف خاصة موجودة داخل عنوان URL. فمثلا:

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

يمكننا أن نلاحظ في هذا المثال أن جميع الحروف باستثناء السلسلة notEncoded يتم ترميزها بعلامة٪. يُعرف تشفير عنوان URL أيضًا بتشفير النسبة المئوية لأنه يهرب من جميع الأحرف الخاصة بنسبة٪. ثم بعد هذه النسبة المئوية ، يكون لكل حرف خاص رمز فريد

لماذا نحتاج لترميز عناوين URL:

تحتوي بعض الأحرف على قيمة خاصة في سلسلة عنوان URL. على سبيل المثال ، فإن؟ تشير الأحرف إلى بداية سلسلة استعلام. من أجل تحديد موقع المورد على الويب بنجاح ، من الضروري التمييز بين ما إذا كان الحرف المقصود جزءًا من سلسلة أو جزء من بنية عنوان url.

كيف يمكننا تحقيق ترميز عناوين URL في JS:

تقدم 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"));

يمكننا ملاحظة أننا نضع عنوان URL بالكامل في encodeURIComponent أن الأشرطة المائلة للأمام (/) يتم تحويلها أيضًا إلى أحرف خاصة. سيؤدي ذلك إلى عدم عمل عنوان URL بشكل صحيح بعد الآن.

لذلك (كما يوحي الاسم) استخدم:

  1. encodeURIComponent على جزء معين من عنوان URL الذي تريد تشفيره.
  2. encodeURI على عنوان URL بأكمله الذي تريد تشفيره.

كيف تقوم بترميز عنوان URL بأمان باستخدام JavaScript بحيث يمكن وضعه في سلسلة GET؟

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

أفترض أنك تحتاج إلى ترميز متغير myUrl على هذا الخط الثاني؟


encodeURIComponent () هو الطريق للذهاب.

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

ولكن يجب أن تضع في اعتبارك أن هناك اختلافات صغيرة من php version 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(/!/g, '%21')
    .replace(/'/g, '%27')
    .replace(/\(/g, '%28')
    .replace(/\)/g, '%29')
    .replace(/\*/g, '%2A')
    .replace(/%20/g, '+');
}

تحقق من الدالة المضمنة encodeURIComponent(str) و encodeURI(str) .
في حالتك ، يجب أن يعمل هذا:

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

شخصيا ، أجد أن العديد من واجهات برمجة التطبيقات تريد استبدال "" بـ "+" لذلك أستخدم ما يلي:

encodeURIComponent(value).replace(/%20/g,'+');

يتم تنفيذ escape بشكل مختلف في المتصفحات المختلفة ولا يقوم encodeURI بتشفير معظم الأحرف الوظيفية في معرف الموارد المنتظم (مثل # وحتى /) - تم تصميمه لاستخدامه على عنوان URI / URL كامل بدون فصله.

ملاحظة : يمكنك استخدام encodeURIComponent للقيم في سلسلة الاستعلام (لا أسماء الحقول / القيم وبالتأكيد ليس عنوان URL بالكامل). إذا كنت تفعل ذلك بأي طريقة أخرى ، فلن يقوم بتشفير رموز مثل ، و ، و ، و ، وربما ترك سلسلة الاستعلام الخاصة بك مكشوفة.

مثال:

const escapedValue = encodeURIComponent(value).replace(/%20/g,'+');
const url = 'http://example.com/?myKey=' + escapedValue;

لا شيء يعمل بالنسبة لي. كل ما كنت أراه هو 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;
            }
        }
    });
});

الآن ليس لدي أي مشكلة ، ويعمل مثل السحر.


لترميز عنوان URL ، كما قيل من قبل ، لديك وظيفتين:

encodeURI()

و

encodeURIComponent()

والسبب في وجودهما هو أن الأول يحفظ عنوان URL مع خطر ترك الكثير من الأشياء التي لم يتم التوصيف بها ، بينما يقوم الثاني بترميز كل ما هو مطلوب.

مع الأول ، يمكنك نسخ عنوان URL الذي تم إلغاؤه حديثًا إلى شريط العنوان (على سبيل المثال) وسيعمل. ومع ذلك ، فإن كلمة "&" الخاصة بك التي لم يتم إلغاؤها ستتداخل مع محدِّدات الحقل ، فإن '=' s قد تتداخل مع أسماء الحقول وقيمها ، وستبدو '+' s مساحات. ولكن بالنسبة للبيانات البسيطة عندما تريد الحفاظ على طبيعة عنوان URL الذي تفرغه ، فهذا يعمل.

والثاني هو كل ما تحتاج إلى القيام به للتأكد من عدم تداخل أي شيء في السلسلة الخاصة بك مع عنوان URL. فهو يترك العديد من الأحرف غير الهامة التي لم يتم إلغاؤها حتى يبقى عنوان URL مقروءًا بشريًا قدر الإمكان دون تدخل. لن يعمل عنوان URL الذي تم ترميزه بهذه الطريقة كعنوان URL دون الحاجة إلى إلغاء تحديده.

لذا إذا استطعت قضاء بعض الوقت ، فأنت تريد دائمًا استخدام encodeURIComponent () - قبل إضافة أزواج الاسم / القيمة لترميز الاسم والقيمة باستخدام هذه الوظيفة قبل إضافتها إلى سلسلة الاستعلام.

أواجه صعوبة في الخروج مع أسباب استخدام encodeURI () - سأترك ذلك للأشخاص الأكثر ذكاءً.


لمنع التشفير المزدوج ، من الأفضل فك تشفير عنوان url قبل التشفير (إذا كنت تتعامل مع عناوين url التي أدخلها المستخدم على سبيل المثال ، والتي قد تكون مشفرة بالفعل).

لنفترض أننا لدينا abc%20xyz 123 كمدخل (يتم تشفير مساحة واحدة بالفعل):

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

نوع مماثل من الشيء حاولت باستخدام javascript الطبيعي

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

ترميز سلسلة الرابط

    var url = $(location).attr('href'); //get current url
    //OR
    var url = 'folder/index.html?param=#23dd&noob=yes'; //or specify one

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






encoding