parsing شرح - سلسلة استعلام تحليل في JavaScript




جافا كيفيه (11)

ممكن تكرار:
كيف يمكنني الحصول على قيم سلسلة الاستعلام؟

أحتاج إلى تحليل سلسلة الاستعلام www.mysite.com/default.aspx?dest=aboutus.aspx . كيف أحصل على متغير dest في JavaScript؟


Answers

بعد الاطلاع على تعليقي على الإجابة التي أرسلهاbobby ، إليك الرمز الذي سأستخدمه:

    function parseQuery(str)
        {
        if(typeof str != "string" || str.length == 0) return {};
        var s = str.split("&");
        var s_length = s.length;
        var bit, query = {}, first, second;
        for(var i = 0; i < s_length; i++)
            {
            bit = s[i].split("=");
            first = decodeURIComponent(bit[0]);
            if(first.length == 0) continue;
            second = decodeURIComponent(bit[1]);
            if(typeof query[first] == "undefined") query[first] = second;
            else if(query[first] instanceof Array) query[first].push(second);
            else query[first] = [query[first], second]; 
            }
        return query;
        }

تأخذ هذه التعليمة البرمجية في querystring المتوفرة (كـ 'str') وتقوم بإرجاع كائن. يتم تقسيم السلسلة على جميع مرات و & ، مما يؤدي إلى صفيف. ثم يتم travsersed الصفيف ويتم تقسيم كل عنصر فيه "=". وينتج عن ذلك صفائف فرعية حيث يكون العنصر 0 هو المعلمة والعنصر الأول هو القيمة (أو غير معرفة إذا لم = علامة). يتم تعيين هذه إلى خصائص الكائن ، لذلك على سبيل المثال السلسلة "hello = 1 & another = 2 & something" يتم تحويلها إلى:

{
hello: "1",
another: "2",
something: undefined
}

بالإضافة إلى ذلك ، يشير هذا الرمز إلى تكرار تكرار مثل "hello = 1 & hello = 2" ويحول النتيجة إلى مصفوفة ، على سبيل المثال:

{
hello: ["1", "2"]
}

ستلاحظ أيضًا أنه يتعامل مع الحالات التي لا تستخدم فيها العلامة =. كما يتجاهل ما إذا كان هناك علامة مساواة مباشرة بعد الرمز &.

مبالغة بعض الشيء عن السؤال الأصلي ، ولكن حل قابل لإعادة الاستخدام إذا كنت بحاجة إلى العمل مع querystrings في javascript :)


يمكنك أيضًا استخدام مكتبة URI.js الممتازة بواسطة Rodney Rehm . إليك الطريقة:-

var qs = URI('www.mysite.com/default.aspx?dest=aboutus.aspx').query(true); // == { dest : 'aboutus.aspx' }
    alert(qs.dest); // == aboutus.aspx

ولتحليل سلسلة الاستعلام من الصفحة الحالية: -

var $_GET = URI(document.URL).query(true); // ala PHP
    alert($_GET['dest']); // == aboutus.aspx 

أردت وظيفة بسيطة أخذت عنوان URL كمدخل وأعادت خريطة لمعلمات طلب البحث. إذا كنت أريد تحسين هذه الوظيفة ، فسأدعم المعيار لبيانات الصفيف في عنوان URL ، أو المتغيرات المتداخلة.

يجب أن يعمل هذا مرة أخرى ومن أجلها مع وظيفة jQuery.param (qparams).

function getQueryParams(url){
    var qparams = {},
        parts = (url||'').split('?'),
        qparts, qpart,
        i=0;

    if(parts.length <= 1 ){
        return qparams;
    }else{
        qparts = parts[1].split('&');
        for(i in qparts){

            qpart = qparts[i].split('=');
            qparams[decodeURIComponent(qpart[0])] = 
                           decodeURIComponent(qpart[1] || '');
        }
    }

    return qparams;
};

في ما يلي طريقة سريعة وسهلة لتعديل سلاسل طلبات البحث في جافا سكريبت:

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        if (decodeURIComponent(pair[0]) == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
    console.log('Query variable %s not found', variable);
}

الآن قدم طلبًا ل page.html؟ x = مرحبًا :

console.log(getQueryVariable('x'));

إذا كنت تعلم أنه سيكون لديك متغير واحد من سلسلة البحث فقط ، فيمكنك القيام بذلك ببساطة:

var dest = location.search.replace(/^.*?\=/, '');

function parseQuery(queryString) {
    var query = {};
    var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split('=');
        query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
    }
    return query;
}

يحول سلسلة الاستعلام مثل hello=1&another=2 إلى object {hello: 1, another: 2} . من هناك ، من السهل استخراج المتغير الذي تحتاجه.

ومع ذلك ، فإنه لا يتعامل مع حالات المصفوفة مثل "hello=1&hello=2&hello=3" . للعمل مع هذا ، يجب عليك التحقق من وجود خاصية للكائن الذي تقوم بإجرائه قبل إضافته إليها ، وتحويل القيمة إليه إلى مصفوفة ، مما يؤدي إلى دفع أي وحدات إضافية.


أنا أيضًا! http://jsfiddle.net/drzaus/8EE8k/

(ملاحظة: بدون خيوط متداخلة أو متكررة)

deparam = function (querystring) {
  // remove any preceding url and split
  querystring = querystring.substring(querystring.indexOf('?')+1).split('&');
  var params = {}, pair, d = decodeURIComponent;
  // march and parse
  for (var i = querystring.length - 1; i >= 0; i--) {
    pair = querystring[i].split('=');
    params[d(pair[0])] = d(pair[1] || '');
  }

  return params;
};//--  fn  deparam

والاختبارات:

var tests = {};
tests["simple params"] = "ID=2&first=1&second=b";
tests["full url"] = "http://blah.com/?" + tests["simple params"];
tests['just ?'] = '?' + tests['simple params'];

var $output = document.getElementById('output');
function output(msg) {
  $output.innerHTML += "\n" + Array.prototype.slice.call(arguments, 0).join("\n");
}
$.each(tests, function(msg, test) {
  var q = deparam(test);
  // prompt, querystring, result, reverse
  output(msg, test, JSON.stringify(q), $.param(q));
  output('-------------------');
});

النتائج في:

simple params
ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------
full url
http://blah.com/?ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------
just ?
?ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------

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

صفحة مع وصلات: رئيس

  function replaceLinks() {   
var content = document.getElementById('mainContent');
            var nodes = content.getElementsByTagName('a');
        for (var i = 0; i < document.getElementsByTagName('a').length; i++) {
            {
                href = nodes[i].href;
                if (href.indexOf("thisurl.com") != -1) {

                    nodes[i].href="http://www.thisurl.com/redirect.aspx" + "?url=" + nodes[i];
                    nodes[i].target="_blank";

                }
            }
    }
}

الجسم

<body onload="replaceLinks()">

إعادة توجيه صفحة الرأس

   function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split('&');
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            if (decodeURIComponent(pair[0]) == variable) {
                return decodeURIComponent(pair[1]);
            }
        }
        console.log('Query variable %s not found', variable);
    }
    function delayer(){
        window.location = getQueryVariable('url')
    }

الجسم

<body onload="setTimeout('delayer()', 1000)">

وإليك إصداري يستند بشكل فضفاض على إصدار Braceyard أعلاه ، ولكن يتم تحليله إلى 'قاموس' ودعم بحث args دون '='. في استخدامه في بلدي JQuery $ (وثيقة). ready () وظيفة. يتم تخزين الحجج كأزواج مفتاح / قيمة في argsParsed ، والتي قد ترغب في حفظها في مكان ما ...

'use strict';

function parseQuery(search) {

    var args = search.substring(1).split('&');

    var argsParsed = {};

    var i, arg, kvp, key, value;

    for (i=0; i < args.length; i++) {

        arg = args[i];

        if (-1 === arg.indexOf('=')) {

            argsParsed[decodeURIComponent(arg).trim()] = true;
        }
        else {

            kvp = arg.split('=');

            key = decodeURIComponent(kvp[0]).trim();

            value = decodeURIComponent(kvp[1]).trim();

            argsParsed[key] = value;
        }
    }

    return argsParsed;
}

parseQuery(document.location.search);

إلقاء نظرة على هذا الحل . باستخدام وظيفته ، عليك فقط عدم استدعاء gup('dest') للاستيلاء على معلمة عنوان URL.


Angular1

بالنسبة للأشخاص الذين يستخدمون AngularJS ، يمكنهم التعامل مع هذا الموقف باستخدام Promises.

Here تقول ،

يمكن استخدام الوعد لإلغاء وظائف غير متزامنة ويسمح للواحد بربط وظائف متعددة معاً.

يمكنك العثور على شرح جيد here أيضًا.

مثال موجود في docs المذكورة أدناه.

  promiseB = promiseA.then(
    function onSuccess(result) {
      return result + 1;
    }
    ,function onError(err) {
      //Handle error
    }
  );

 // promiseB will be resolved immediately after promiseA is resolved 
 // and its value will be the result of promiseA incremented by 1.

Angular2 و لاحقًا

في Angular2مع نظرة على المثال التالي، ولكن من recommended لاستخدام Observablesمع Angular2.

 search(term: string) {
     return this.http
  .get(`https://api.spotify.com/v1/search?q=${term}&type=artist`)
  .map((response) => response.json())
  .toPromise();

}

يمكنك أن تستهلك بهذه الطريقة ،

search() {
    this.searchService.search(this.searchField.value)
      .then((result) => {
    this.result = result.artists.items;
  })
  .catch((error) => console.error(error));
}

انظر original هنا. ولكن لا تدعم Typescript لغات ES6 الأصلية ، إذا كنت ترغب في استخدامها ، فقد تحتاج إلى مكون إضافي لذلك.

بالإضافة إلى ذلك هنا يتم تحديد spec الوعود هنا.







javascript parsing query-string