เปลี่ยนพารามิเตอร์ URL


189

ฉันมี URL นี้:

site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc

สิ่งที่ฉันต้องการคือการสามารถเปลี่ยนค่า 'url param' เป็นสิ่งที่ฉันระบุให้บอกว่า 10 และถ้าไม่มี 'row' ฉันต้องเพิ่มมันเข้าไปที่ส่วนท้ายของ url และเพิ่ม ค่าที่ฉันได้ระบุไว้แล้ว (10)


2
คำตอบที่ไม่มีปลั๊กอินน้ำหนักเบา: stackoverflow.com/a/10997390/11236
ripper234

11
ฉันไม่อยากจะเชื่อว่ามันเป็นปี 2013 และไม่มีวิธีที่ดีกว่าที่จะทำเช่นเดียวกับสิ่งที่สร้างไว้ในไลบรารีเบราว์เซอร์หลัก
Tyler Collier

ดูคำตอบสำหรับโซลูชันที่ทันสมัยของฉัน: stackoverflow.com/a/19965480/64949
Sindre Sorhus

6
@TylerCollier กลางปี ​​2558 ตอนนี้และยังคงไม่มีอะไร :(
Tejas Manohar

3
ดูเหมือนว่าเรากำลังไปที่นั่น ... developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/…
chris

คำตอบ:


111

ฉันขยายรหัสของ Sujoy เพื่อทำหน้าที่

/**
 * http://stackoverflow.com/a/10997390/11236
 */
function updateURLParameter(url, param, paramVal){
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";
    if (additionalURL) {
        tempArray = additionalURL.split("&");
        for (var i=0; i<tempArray.length; i++){
            if(tempArray[i].split('=')[0] != param){
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }
    }

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}

ฟังก์ชั่นการโทร:

var newURL = updateURLParameter(window.location.href, 'locId', 'newLoc');
newURL = updateURLParameter(newURL, 'resId', 'newResId');

window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));

อัปเดตเวอร์ชันที่ดูแลจุดยึดบน URL ด้วย

function updateURLParameter(url, param, paramVal)
{
    var TheAnchor = null;
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";

    if (additionalURL) 
    {
        var tmpAnchor = additionalURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor = tmpAnchor[1];
        if(TheAnchor)
            additionalURL = TheParams;

        tempArray = additionalURL.split("&");

        for (var i=0; i<tempArray.length; i++)
        {
            if(tempArray[i].split('=')[0] != param)
            {
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }        
    }
    else
    {
        var tmpAnchor = baseURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor  = tmpAnchor[1];

        if(TheParams)
            baseURL = TheParams;
    }

    if(TheAnchor)
        paramVal += "#" + TheAnchor;

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}

ฉันไม่สามารถทำงานนี้ได้ นี่คือรหัสของฉัน: jsfiddle.net/Draven/tTPYL/1 URL จะดูเหมือนhttp://www.domain.com/index.php?action=my_action&view-all=Yesและฉันต้องการเปลี่ยนค่า "ดูทั้งหมด" คำถาม SO ของฉันที่ถูกปิด: stackoverflow.com/questions/13025880/…
Draven

คุณแน่ใจไหม? มันใช้งานได้ง่ายสำหรับฉัน ตรวจสอบที่นี่: jsfiddle.net/mw49a
Adil Malik

1
ใช้ "var i = 0" แทน "i = 0" เพื่อป้องกันการสร้าง / แก้ไข i เป็นตัวแปรโกลบอล
Jonathan Aquino

1
ปัญหาอื่น ๆ ที่เกี่ยวข้องกับฟังก์ชั่นนี้: (1) paramVal ไม่ได้เข้ารหัส uri (2) ถ้า paramVal เป็นโมฆะคุณจะได้รับ foo = null มันควรจะเป็น foo = (หรือดีกว่านั้นให้ลบ foo โดยสมบูรณ์)
Jonathan Aquino

นี่ทำให้ชีวิตฉันง่ายขึ้นมาก ขอบคุณมากเพื่อน!
boydenhartog

97

ฉันคิดว่าคุณต้องการปลั๊กอินแบบสอบถาม

เช่น:

window.location.search = jQuery.query.set("rows", 10);

สิ่งนี้จะทำงานโดยไม่คำนึงถึงสถานะของแถวในปัจจุบัน


อาจเป็นเพราะปลั๊กอินการค้นหาใช้ decodeURIComponent และ decodeURIComponent ("% F8") ไม่ถูกต้อง
Matthew Flaschen

2
นำสิ่งแปลกประหลาดออกมาจาก URL ของคุณ หรือกล่าวอีกนัยหนึ่ง "เปลี่ยนข้อความค้นหาของคุณเพื่อใช้เฉพาะอักขระ UTF-8 ที่ถูกต้อง" :) F8 เพียงอย่างเดียวไม่ใช่อักขระ UTF-8 ที่ถูกต้อง
Matthew Flaschen

มีวิธีดึง URL พื้นฐานจากปลั๊กอินนี้หรือไม่? ตัวอย่างเช่นหาก URL ของฉันคือ ' youtube.com/watch?v=PZootaxRh3M ' ให้รับ ' youtube.com/watch '
Matt Norris

3
@Wraith คุณไม่ต้องการปลั๊กอินสำหรับสิ่งนั้น window.location.pathnameมันเป็นเพียงแค่
Matthew Flaschen

2
@MattNorris คุณไม่ต้องการปลั๊กอินสำหรับสิ่งนี้ แต่คำตอบที่ถูกต้องคือ: window.location.host + window.location.pathname ในกรณีของคุณมันจะเป็น "www.youtube.com/watch"
nktssh

68

เพื่อตอบคำถามของฉันเอง 4 ปีต่อมาหลังจากที่ได้เรียนรู้มากมาย โดยเฉพาะอย่างยิ่งว่าคุณไม่ควรใช้ jQuery สำหรับทุกสิ่ง ฉันได้สร้างโมดูลอย่างง่ายที่สามารถแยก / stringify แบบสอบถามสตริง สิ่งนี้ทำให้ง่ายต่อการปรับเปลี่ยนสตริงแบบสอบถาม

คุณสามารถใช้สตริงแบบสอบถามได้ดังนี้:

// parse the query string into an object
var q = queryString.parse(location.search);
// set the `row` property
q.rows = 10;
// convert the object to a query string
// and overwrite the existing query string
location.search = queryString.stringify(q);

1
ว้าวนี่เป็นทางออกที่ง่ายอย่างชาญฉลาด ขอบคุณ!
jetlej

ใช้งานได้เหมือนแชมป์! ขอบคุณ Sindre 🏆🏆🏆 (สิ่งที่คุณต้องทำคือลดขนาด "query-string / index.js" และวางไว้ที่ด้านล่างของ js ของคุณ)
Ronnie Royston

1
มีห้องสมุดพิเศษเพียงเพื่อที่ดูเหมือนจะเพิ่มเล็กน้อย ...
เจ้าพ่อ

jQuery มีมากเกินไปสำหรับ 1 ฟังก์ชันดังนั้นแทนที่จะใช้ typescript, travis และ non-dev dependencies อื่น ๆ อีกหลายตัว :)
Justin Meiners

@JustinMeiners โปรดอย่าแสดงความคิดเห็นหากคุณไม่มีสิ่งใดที่เป็นประโยชน์ต่อการสนทนา โครงการนี้ไม่ได้ใช้ TypeScript เทรวิสเป็น CI ไม่ใช่การพึ่งพา
Sindre Sorhus

64

ทางออกเล็กน้อยอย่างรวดเร็วใน js บริสุทธิ์ไม่จำเป็นต้องใช้ปลั๊กอิน:

function replaceQueryParam(param, newval, search) {
    var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
    var query = search.replace(regex, "$1").replace(/&$/, '');

    return (query.length > 2 ? query + "&" : "?") + (newval ? param + "=" + newval : '');
}

เรียกว่าเป็นแบบนี้:

 window.location = '/mypage' + replaceQueryParam('rows', 55, window.location.search)

หรือถ้าคุณต้องการที่จะอยู่ในหน้าเดียวกันและแทนที่หลาย params:

 var str = window.location.search
 str = replaceQueryParam('rows', 55, str)
 str = replaceQueryParam('cols', 'no', str)
 window.location = window.location.pathname + str

แก้ไขขอบคุณลุค: ในการลบพารามิเตอร์ทั้งหมดผ่านfalseหรือสำหรับค่า:null replaceQueryParam('rows', false, params)ตั้งแต่0 ยังเป็น falsy'0'ระบุ


2
นอกจากนี้เพื่อลบพารามิเตอร์ที่ใช้แล้วจากผลลัพธ์ทำสิ่งนี้: str = replaceQueryParam ('oldparam', false, str) - โดยทั่วไปแล้วใส่ค่าประเภทเท็จ
Luke Wenke

1
มีปัญหา, ทำซ้ำพารามิเตอร์ของฉันโดยไม่มีเหตุผล, ลองดูstackoverflow.com/a/20420424/3160597
azerafati

@Blackream รหัสนั้นทำงานในการผลิตมานานหลายปี ฉันยังไม่เห็นมันซ้ำซ้อนกับพารามิเตอร์ คุณสามารถโพสต์ข้อมูลซ้ำหรือข้อมูลที่สร้างสรรค์มากขึ้นได้ไหม
Bronson

@Blream ฉันเข้าใจแล้วตอนนี้เป็นสคริปต์ที่คุณเชื่อมโยงไปถึงนั่นคือการเพิ่มพารามิเตอร์ที่ซ้ำกัน :)
bronson

1
@dVyper ถูกต้องค่าที่ผิดพลาดจะลบพารามิเตอร์ทั้งหมด ใช้ข้อความ '0' แทนจำนวนเต็ม 0
bronson

62

เบ็นอัลแมนมี jquery querystring / url plugin ที่ดีที่ช่วยให้คุณจัดการ querystring ได้อย่างง่ายดาย

ตามที่ขอ -

ไปที่หน้าทดสอบของเขาที่นี่

ใน firebug ให้ป้อนสิ่งต่อไปนี้ในคอนโซล

jQuery.param.querystring(window.location.href, 'a=3&newValue=100');

มันจะส่งคืนสตริง url ที่แก้ไขแล้วต่อไปนี้ให้คุณ

http://benalman.com/code/test/js-jquery-url-querystring.html?a=3&b=Y&c=Z&newValue=100#n=1&o=2&p=3

สังเกตว่าค่าการสอบถามสำหรับ a เปลี่ยนจาก X เป็น 3 แล้วและได้เพิ่มค่าใหม่

จากนั้นคุณสามารถใช้สตริง url ใหม่ได้ตามต้องการเช่นใช้ document.location = newUrl หรือเปลี่ยนสมอลิงค์เป็นต้น


4
ไม่ใช่ jQuery.param.querystring แทนที่จะเป็น jQuery.queryString ใช่ไหม
Petr Peller

12
TypeError: jQuery.param.querystring is not a function
TMS

1
หากต้องการ avoir 'TypeError' ควรเป็น: jQuery.queryString (window.location.href, 'a = 3 & newValue = 100')
code-gijoe

2
jQuery.param.querystringคุณควรจะเรียก ฉันเดาว่าพวกเขาได้ปรับปรุงห้องสมุดใหม่
Will Wu

ไม่มีฟังก์ชั่นเหล่านี้อีกต่อไป คุณต้องการอัปเดต window.location.search ด้วยตนเอง มันจะยากขึ้นหากคุณไม่ต้องการให้หน้าทาสีใหม่เนื่องจากจะทำให้หน้าเปลี่ยนไป
ขาวดำ

39

วิธีการที่ทันสมัยนี้คือการใช้มาตรฐานตามพื้นเมืองURLSearchParams มันได้รับการสนับสนุนโดยเบราว์เซอร์ที่สำคัญทั้งหมดยกเว้น IE ที่มีโพลีฟิลล์ให้บริการ

const paramsString = "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc"
const searchParams = new URLSearchParams(paramsString);
searchParams.set('rows', 10);
console.log(searchParams.toString()); // return modified string.

1
จะดีจริง ๆ ... แต่มันไม่เป็นเช่นนั้น IE ไม่สนับสนุนเลยและการใช้ polyfills สำหรับสิ่งเล็ก ๆ น้อย ๆ นั้นหมดไปจากคำถาม
forsberg

1
นี่ยัง urlencodes params ต้นฉบับเต็มดังนั้นผลลัพธ์ดูเหมือนsite.fwx%3Fposition=1&archiveid=5000&columns=5&rows=10&sorting=ModifiedTimeAscจะสับสนเพราะไม่ใช่สิ่งที่คุณจะสร้างขึ้นถ้าคุณทำมันเอง ...
Ben Wheeler

1
จะดีที่เห็นตัวอย่างของวิธีการใช้งาน ฉันหมายถึงวิธีรับสตริงพารามิเตอร์จากหน้าปัจจุบันและวิธีการตั้งค่าในภายหลัง
The Godfather

27

คุณสามารถทำได้ผ่านทาง JS ปกติ

var url = document.URL
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var aditionalURL = tempArray[1]; 
var temp = "";
if(aditionalURL)
{
var tempArray = aditionalURL.split("&");
for ( var i in tempArray ){
    if(tempArray[i].indexOf("rows") == -1){
            newAdditionalURL += temp+tempArray[i];
                temp = "&";
            }
        }
}
var rows_txt = temp+"rows=10";
var finalURL = baseURL+"?"+newAdditionalURL+rows_txt;

ดี! ฉันใช้สิ่งนี้และปรับเปลี่ยนเป็นฟังก์ชั่น คุณส่ง URL ปัจจุบันชื่อพารามิเตอร์ที่คุณกำลังค้นหาค่าใหม่และบูลบอกว่าคุณต้องการเพิ่มพารามิเตอร์ลงในสตริงการสืบค้นหรือไม่หากฉันไม่พบในนั้น ฟังก์ชันส่งคืน url ที่แก้ไขแล้ว
Gromer

Gormer ท่านจะต้องใช้ฟังก์ชั่นกับคนอื่น ๆ :)
ดิลมาลิก

ตัวอย่างที่ยอดเยี่ยม ฉันก็เปลี่ยนเป็นฟังก์ชั่นสำหรับเคสการใช้งานของฉันเอง ขอบคุณสำหรับการแบ่งปัน! +1
robabby

19

นี่เป็นวิธีที่ทันสมัยในการเปลี่ยนพารามิเตอร์ URL:

function setGetParam(key,value) {
  if (history.pushState) {
    var params = new URLSearchParams(window.location.search);
    params.set(key, value);
    var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + params.toString();
    window.history.pushState({path:newUrl},'',newUrl);
  }
}

2
ขณะนี้โซลูชันนี้ยังไม่รองรับใน Internet Explorer 11: caniuse.com/#search=URLSearchParams
WoIIe

การตอบสนองแบบเดียวกันนั้นได้ตอบกลับเมื่อครึ่งปีก่อนโดย @Alister
FantomX1

10

ทางเลือกที่ทำงานได้กับการจัดการสตริงจะเป็นการตั้งค่า html formและเพียงแค่ปรับเปลี่ยนค่าของrowsองค์ประกอบหรือไม่

ดังนั้นด้วยhtmlสิ่งที่ต้องการ

<form id='myForm' target='site.fwx'>
    <input type='hidden' name='position' value='1'/>
    <input type='hidden' name='archiveid' value='5000'/>
    <input type='hidden' name='columns' value='5'/>
    <input type='hidden' name='rows' value='20'/>
    <input type='hidden' name='sorting' value='ModifiedTimeAsc'/>
</form>

ด้วย JavaScript ต่อไปนี้เพื่อส่งแบบฟอร์ม

var myForm = document.getElementById('myForm');
myForm.rows.value = yourNewValue;
myForm.submit();

อาจไม่เหมาะกับทุกสถานการณ์ แต่อาจจะดีกว่าการแยกสตริง URL


นั่นเป็นสิ่งที่ฉลาด
icarito


4

2020 Solution : ตั้งค่าตัวแปรหรือลบ iti ถ้าคุณผ่านnullหรือundefinedเป็นค่า

var setSearchParam = function(key, value) {
    if (!window.history.pushState) {
        return;
    }

    if (!key) {
        return;
    }

    var url = new URL(window.location.href);
    var params = new window.URLSearchParams(window.location.search);
    if (value === undefined || value === null) {
        params.delete(key);
    } else {
        params.set(key, value);
    }

    url.search = params;
    url = url.toString();
    window.history.replaceState({url: url}, null, url);
}

โปรดทราบว่าURLSearchParamsไม่สามารถใช้งานได้ในเบราว์เซอร์หลักทุกรุ่น (2020)
Oliver Schimmer

ยังคงมีอยู่ในเบราว์เซอร์ที่สำคัญ: developer.mozilla.org/en-US/docs/Web/API/URLSearchParams , googlechrome.github.io/samples/urlsearchparams/index.html
Alper Ebicoglu

รองรับเบราว์เซอร์ที่สำคัญทั้งหมดยกเว้น IE11: caniuse.com/#search=URLSearchParams
Luis Paulo Lohmann

แม้ว่าจะเริ่มได้รับการสนับสนุนคำตอบเดียวกันกับ URLSearchParams ได้รับคำตอบในคำถามนี้อย่างน้อย 3 ครั้งแล้วเมื่อวันที่ตอบ 15 มกราคม 17 เวลา 15:24 น. ตอบ 14 มิถุนายน 18 ที่ 15:54 และตอบ 1 มีนาคม 19 ที่ 12:46 ราวกับว่าไม่มีใครในคุณกำลังอ่านคำตอบก่อนโพสต์
FantomX1

โพสต์ทั้งหมดมีปัญหาเล็กน้อยที่ต้องแก้ไข ดังนั้นให้ผู้ใช้โหวตและเลือกผู้ที่ดีที่สุด
Alper Ebicoglu

3

ฉันเขียนฟังก์ชันตัวช่วยเล็กน้อยที่ทำงานกับตัวเลือกใด ๆ สิ่งที่คุณต้องทำคือเพิ่มคลาส "redirectOnChange" ให้กับอิลิเมนต์ที่เลือกและสิ่งนี้จะทำให้หน้าโหลดซ้ำด้วยพารามิเตอร์การสืบค้นใหม่ / ที่เปลี่ยนไปซึ่งเท่ากับ id และค่าของการเลือกเช่น:

<select id="myValue" class="redirectOnChange"> 
    <option value="222">test222</option>
    <option value="333">test333</option>
</select>

ตัวอย่างด้านบนจะเพิ่ม "? myValue = 222" หรือ "? myValue = 333" (หรือใช้ "&" ถ้ามีพารามิเตอร์อื่นอยู่) และโหลดหน้าซ้ำ

jQuery:

$(document).ready(function () {

    //Redirect on Change
    $(".redirectOnChange").change(function () {
        var href = window.location.href.substring(0, window.location.href.indexOf('?'));
        var qs = window.location.href.substring(window.location.href.indexOf('?') + 1, window.location.href.length);
        var newParam = $(this).attr("id") + '=' + $(this).val();

        if (qs.indexOf($(this).attr("id") + '=') == -1) {
            if (qs == '') {
                qs = '?'
            }
            else {
                qs = qs + '&'
            }
            qs = qs + newParam;

        }
        else {
            var start = qs.indexOf($(this).attr("id") + "=");
            var end = qs.indexOf("&", start);
            if (end == -1) {
                end = qs.length;
            }
            var curParam = qs.substring(start, end);
            qs = qs.replace(curParam, newParam);
        }
        window.location.replace(href + '?' + qs);
    });
});

โดยทางออกที่ดีที่สุดในหน้านี้
ed209

2

ที่นี่ฉันได้รับคำตอบของ Adil Malik และแก้ไขปัญหา 3 ข้อที่ฉันระบุด้วย

/**
 * Adds or updates a URL parameter.
 *
 * @param {string} url  the URL to modify
 * @param {string} param  the name of the parameter
 * @param {string} paramVal  the new value for the parameter
 * @return {string}  the updated URL
 */
self.setParameter = function (url, param, paramVal){
  // http://stackoverflow.com/a/10997390/2391566
  var parts = url.split('?');
  var baseUrl = parts[0];
  var oldQueryString = parts[1];
  var newParameters = [];
  if (oldQueryString) {
    var oldParameters = oldQueryString.split('&');
    for (var i = 0; i < oldParameters.length; i++) {
      if(oldParameters[i].split('=')[0] != param) {
        newParameters.push(oldParameters[i]);
      }
    }
  }
  if (paramVal !== '' && paramVal !== null && typeof paramVal !== 'undefined') {
    newParameters.push(param + '=' + encodeURI(paramVal));
  }
  if (newParameters.length > 0) {
    return baseUrl + '?' + newParameters.join('&');
  } else {
    return baseUrl;
  }
}

1

นี่คือสิ่งที่ฉันทำ ใช้ฟังก์ชั่น editParams () ของฉันคุณสามารถเพิ่มลบหรือเปลี่ยนพารามิเตอร์ใด ๆ จากนั้นใช้ฟังก์ชั่น replaceState () เพื่ออัปเดต URL:

window.history.replaceState('object or string', 'Title', 'page.html' + editParams('sorting', ModifiedTimeAsc));


// background functions below:

// add/change/remove URL parameter
// use a value of false to remove parameter
// returns a url-style string
function editParams (key, value) {
  key = encodeURI(key);

  var params = getSearchParameters();

  if (Object.keys(params).length === 0) {
    if (value !== false)
      return '?' + key + '=' + encodeURI(value);
    else
      return '';
  }

  if (value !== false)
    params[key] = encodeURI(value);
  else
    delete params[key];

  if (Object.keys(params).length === 0)
    return '';

  return '?' + $.map(params, function (value, key) {
    return key + '=' + value;
  }).join('&');
}

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

  for (var i = 0; i < prmarr.length; i++) {
    var tmparr = prmarr[i].split("=");
    params[tmparr[0]] = tmparr[1];
  }
  return params;
}

Downvote ที่ไม่มีความคิดเห็น? มีอะไรผิดปกติกับรหัสหรือไม่ มันใช้งานได้ดีในหลาย ๆ สถานการณ์
Bobb ส่งต่อ

1

ทางออกของฉัน:

const setParams = (data) => {
    if (typeof data !== 'undefined' && typeof data !== 'object') {
        return
    }

    let url = new URL(window.location.href)
    const params = new URLSearchParams(url.search)

    for (const key of Object.keys(data)) {
        if (data[key] == 0) {
            params.delete(key)
        } else {
            params.set(key, data[key])
        }
    }

    url.search = params
    url = url.toString()
    window.history.replaceState({ url: url }, null, url)
}

จากนั้นเพียงเรียก "setParams" และส่งวัตถุที่มีข้อมูลที่คุณต้องการตั้งค่า

ตัวอย่าง:

$('select').on('change', e => {
    const $this = $(e.currentTarget)
    setParams({ $this.attr('name'): $this.val() })
})

ในกรณีของฉันฉันต้องอัปเดตอินพุต html ให้เลือกเมื่อมีการเปลี่ยนแปลงและถ้าค่าเป็น "0" ให้ลบพารามิเตอร์ คุณสามารถแก้ไขฟังก์ชั่นและลบพารามิเตอร์ออกจาก url ถ้าคีย์วัตถุเป็น "null" เช่นกัน

หวังว่ามันจะช่วยได้ดี


มี 2 ​​คำตอบเดียวกันกับ URLSearchParams ต่อหน้าคุณราวกับว่าไม่มีใครในคุณอ่านคำตอบจริงๆ โพสต์เมื่อวันที่ตอบ 15 มกราคม '17 เวลา 15:24, ตอบ 14 มิถุนายน '18 ที่ 15:54
FantomX1

0

อีกรูปแบบของคำตอบของ Sujoy เพิ่งเปลี่ยนชื่อตัวแปรและเพิ่มเนมสเปซ wrapper:

window.MyNamespace = window.MyNamespace  || {};
window.MyNamespace.Uri = window.MyNamespace.Uri || {};

(function (ns) {

    ns.SetQueryStringParameter = function(url, parameterName, parameterValue) {

        var otherQueryStringParameters = "";

        var urlParts = url.split("?");

        var baseUrl = urlParts[0];
        var queryString = urlParts[1];

        var itemSeparator = "";
        if (queryString) {

            var queryStringParts = queryString.split("&");

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

                if(queryStringParts[i].split('=')[0] != parameterName){

                    otherQueryStringParameters += itemSeparator + queryStringParts[i];
                    itemSeparator = "&";
                }
            }
        }

        var newQueryStringParameter = itemSeparator + parameterName + "=" + parameterValue;

        return baseUrl + "?" + otherQueryStringParameters + newQueryStringParameter;
    };

})(window.MyNamespace.Uri);

Useage ตอนนี้:

var changedUrl = MyNamespace.Uri.SetQueryStringParameter(originalUrl, "CarType", "Ford");

0

ฉันก็มีเขียนห้องสมุดสำหรับการรับและตั้งค่าพารามิเตอร์การค้นหา URL ใน JavaScript

นี่คือตัวอย่างของการใช้งาน

var url = Qurl.create()
  , query
  , foo
  ;

รับพารามิเตอร์แบบสอบถามเป็นวัตถุตามคีย์หรือเพิ่ม / เปลี่ยน / ลบ

// returns { foo: 'bar', baz: 'qux' } for ?foo=bar&baz=qux
query = url.query();

// get the current value of foo
foo = url.query('foo');

// set ?foo=bar&baz=qux
url.query('foo', 'bar');
url.query('baz', 'qux');

// unset foo, leaving ?baz=qux
url.query('foo', false); // unsets foo


-1

ฉันรู้ว่านี่เป็นคำถามเก่า ฉันได้ปรับปรุงฟังก์ชั่นด้านบนเพื่อเพิ่มหรืออัปเดตพารามิเตอร์คิวรี ยังคงเป็นโซลูชัน JS บริสุทธิ์เท่านั้น

                      function addOrUpdateQueryParam(param, newval, search) {

                        var questionIndex = search.indexOf('?');

                        if (questionIndex < 0) {
                            search = search + '?';
                            search = search + param + '=' + newval;
                            return search;
                        }

                        var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
                        var query = search.replace(regex, "$1").replace(/&$/, '');

                        var indexOfEquals = query.indexOf('=');

                        return (indexOfEquals >= 0 ? query + '&' : query + '') + (newval ? param + '=' + newval : '');
                    }

-1

ฟังก์ชั่นของฉันรองรับการลบพารามิเตอร์

function updateURLParameter(url, param, paramVal, remove = false) {
        var newAdditionalURL = '';
        var tempArray = url.split('?');
        var baseURL = tempArray[0];
        var additionalURL = tempArray[1];
        var rows_txt = '';

        if (additionalURL)
            newAdditionalURL = decodeURI(additionalURL) + '&';

        if (remove)
            newAdditionalURL = newAdditionalURL.replace(param + '=' + paramVal, '');
        else
            rows_txt = param + '=' + paramVal;

        window.history.replaceState('', '', (baseURL + "?" + newAdditionalURL + rows_txt).replace('?&', '?').replace('&&', '&').replace(/\&$/, ''));
    }

-1

ฉันเพิ่งเขียนโมดูลง่าย ๆ เพื่อจัดการกับการอ่านและการอัปเดตพารามิเตอร์การค้นหา URL ปัจจุบัน

ตัวอย่างการใช้งาน:

import UrlParams from './UrlParams'

UrlParams.remove('foo') //removes all occurences of foo=?
UrlParams.set('foo', 'bar') //set all occurences of foo equal to bar
UrlParams.add('foo', 'bar2') //add bar2 to foo result: foo=bar&foo=bar2
UrlParams.get('foo') //returns bar
UrlParams.get('foo', true) //returns [bar, bar2]

นี่คือรหัสของฉันชื่อ UrlParams (js / ts):

class UrlParams {

    /**
     * Get params from current url
     * 
     * @returns URLSearchParams
     */
    static getParams(){
        let url = new URL(window.location.href)
        return new URLSearchParams(url.search.slice(1))
    }

    /**
     * Update current url with params
     * 
     * @param params URLSearchParams
     */
    static update(params){
        if(`${params}`){
            window.history.replaceState({}, '', `${location.pathname}?${params}`)
        } else {
            window.history.replaceState({}, '', `${location.pathname}`)
        }
    }

    /**
     * Remove key from url query
     * 
     * @param param string
     */
    static remove(param){
        let params = this.getParams()
        if(params.has(param)){
            params.delete(param)
            this.update(params)
        }
    }

    /**
     * Add key value pair to current url
     * 
     * @param key string
     * @param value string
     */
    static add(key, value){
        let params = this.getParams()
        params.append(key, value)
        this.update(params)
    }

    /**
     * Get value or values of key
     * 
     * @param param string
     * @param all string | string[]
     */
    static get(param, all=false){
        let params = this.getParams()
        if(all){
            return params.getAll(param)
        }
        return params.get(param)
    }

    /**
     * Set value of query param
     * 
     * @param key string
     * @param value string
     */
    static set(key, value){
        let params = this.getParams()
        params.set(key, value)
        this.update(params)
    }

}
export default UrlParams
export { UrlParams }

มีคำตอบเดียวกับที่คุณพูดโพสต์แล้วมี 4 ตอบตอบเมื่อ 15 มกราคมเวลา 15:24 น. ตอบ 14 มิ.ย. 18 น. ที่ 15:54 นตอบ 1 มี.ค. 19 เมื่อ 12:46 และตอบ 14 มิ.ย. 19 เวลา 7: 20 ราวกับว่าไม่มีใครในพวกคุณอ่านคำตอบก่อนโพสต์
FantomX1

-2
     // usage: clear ; cd src/js/node/js-unit-tests/01-set-url-param ; npm test ; cd -
     // prereqs: , nodejs , mocha
     // URI = scheme:[//authority]path[?paramName1=paramValue1&paramName2=paramValue2][#fragment]
     // call by: uri = uri.setUriParam("as","md")
     String.prototype.setUriParam = function (paramName, paramValue) {
        var uri = this
        var fragment = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
        uri = ( uri.indexOf('#') === -1 ) ? uri : uri.split('#')[0]
        if ( uri.indexOf("?") === -1 ) { uri = uri + '?&' }
        uri = uri.replace ( '?' + paramName , '?&' + paramName)
        var toRepl = (paramValue != null) ? ('$1' + paramValue) : ''
        var toSrch = new RegExp('([&]' + paramName + '=)(([^&#]*)?)')
        uri = uri.replace(toSrch,toRepl)
        if (uri.indexOf(paramName + '=') === -1 && toRepl != '' ) {
           var ampersandMayBe = uri.endsWith('&') ? '' : '&'
           uri = uri + ampersandMayBe + paramName + "=" + String(paramValue)
        }
        uri = ( fragment.length == 0 ) ? uri : (uri+"#"+fragment) //may-be re-add the fragment
        return uri
     }

     var assert = require('assert');
     describe('replacing url param value', function () {

        // scheme://authority/path[?p1=v1&p2=v2#fragment
        // a clean url
        it('http://org.com/path -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with num value
        it('http://org.com/path?prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=57'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? but string value
        it('http://org.com/path?prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=boo-bar'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=boo-bar-baz'
           var uriActual = uri.setUriParam("bid","boo-bar-baz")
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& but string value
        it('http://org.com/path?&prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with other param
        it('http://org.com/path?prm=src_v&other_p=other_v -> http://org.com/path?&prm=tgt_v&other_p=other_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p=other_v'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& with other param
        it('http://org.com/path?&prm=src_v&other_p=other_v -> http://org.com/path?&prm=tgt_v&other_p=other_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p&other_v'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p&other_v'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with other param with fragment
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& with other param with fragment
        it('http://org.com/path?&prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p&other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p&other_v#f'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // remove the param-name , param-value pair
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",null)
           assert.equal(uriActual, uriExpected);
        });

        // remove the param-name , param-value pair
        it('http://org.com/path?&prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",null)
           assert.equal(uriActual, uriExpected);
        });

        // add a new param name , param value pair
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v&bid=foo-bar#f'
           var uriActual = uri.setUriParam("bid","foo-bar")
           assert.equal(uriActual, uriExpected);
        });

     });
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.