web-dev-qa-db-ja.com

urlパラメータをjavascript / jqueryに置き換える方法は？

私はこれを行うための効率的な方法を探していましたが、それを見つけることができませんでした。基本的に私が必要とするのはこのURLが与えられたものです：

http://localhost/mysite/includes/phpThumb.php?src=http://media2.jupix.co.uk/v3/clients/4/properties/795/IMG_795_1_large.jpg&w=592&aoe=1&q=100

Javascriptまたはjqueryを使用して、srcパラメーターのURLを別の値に変更できるようにしたいのですが、これは可能ですか？

前もって感謝します。

javascriptjqueryurlurl-parameters
50
Javier Villanueva

これはより良い解決策ではないでしょうか？

_var text = 'http://localhost/mysite/includes/phpThumb.php?src=http://media2.jupix.co.uk/v3/clients/4/properties/795/IMG_795_1_large.jpg&w=592&aoe=1&q=100';
var newSrc = 'www.google.com';
var newText = text.replace(/(src=).*?(&)/,'$1' + newSrc + '$2');
_

編集：

コードに明確さを追加し、結果のリンクに「src」を保持

_$1_は_()_内の最初の部分を表します（つまり）_src=_と_$2_は_()_内の2番目の部分を表します（つまり）_&_これは、srcと_&_の間の値を変更することを示しています。より明確に、これは次のようになります。

_src='changed value'& // this is to be replaced with your original url
_

すべての出現を置き換えるためのアドオン：

同じ名前のパラメーターが複数ある場合は、このtext.replace(/(src=).*?(&)/g,'$1' + newSrc + '$2');のようにregexグローバルフラグに追加できます。これにより、同じ名前を共有するパラメーターのすべての値が置き換えられます。

50
ZenMaster

次のソリューションは、他の回答を組み合わせて、いくつかの特別なケースを処理します。

  • パラメータが元のURLに存在しません
  • パラメーターは唯一のパラメーターです
  • パラメーターは最初または最後です
  • 新しいパラメータ値は古いものと同じです
  • URLの末尾は? キャラクター
  • \bは、paramNameで終わる別のパラメーターが一致しないようにします

解決：

function replaceUrlParam(url, paramName, paramValue)
{
    if (paramValue == null) {
        paramValue = '';
    }
    var pattern = new RegExp('\\b('+paramName+'=).*?(&|#|$)');
    if (url.search(pattern)>=0) {
        return url.replace(pattern,'$1' + paramValue + '$2');
    }
    url = url.replace(/[?#]$/,'');
    return url + (url.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue;
}

既知の制限：

  • ParamValueをnullに設定してパラメーターをクリアするのではなく、空の文字列に設定します。パラメーターを削除する場合は、 https://stackoverflow.com/a/25214672 を参照してください。
117
stenix

Javascriptは、URLパラメーターを処理するために非常に便利な機能を提供するようになりました。 RLSearchParams

var searchParams = new URLSearchParams(window.location.search);
searchParams.set('src','newSrc')
var newParams = searchParams.toString()
16
user2752173

ネイティブJSで可能になった今日

var href = new URL('https://google.com?q=cats');
href.searchParams.set('q', 'dogs');
console.log(href.toString()); // https://google.com/?q=dogs
13
Oleg

ここに修正されたstenixのコードがありますが、完璧ではありませんが、提供されたパラメーターを含むparamがurlにある場合を処理します：

/search?searchquery=text and 'query' is provided.

この場合、searchquery param値が変更されます。

コード：

function replaceUrlParam(url, paramName, paramValue){
    var pattern = new RegExp('(\\?|\\&)('+paramName+'=).*?(&|$)')
    var newUrl=url
    if(url.search(pattern)>=0){
        newUrl = url.replace(pattern,'$1$2' + paramValue + '$3');
    }
    else{
        newUrl = newUrl + (newUrl.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue
    }
    return newUrl
}
6
meliniak

UpdatE：素敵な関数にしてください： http://jsfiddle.net/wesbos/KH25r/1/

function swapOutSource(url, newSource) {
    params = url.split('&');
    var src = params[0].split('=');
    params.shift();
    src[1] = newSource;
    var newUrl = ( src.join('=') + params.join('&')); 
    return newUrl; 
}

その後、それに行きます！

var newUrl = swapOutSource("http://localhost/mysite/includes/phpThumb.php?src=http://media2.jupix.co.uk/v3/clients/4/properties/795/IMG_795_1_large.jpg&w=592&aoe=1&q=100","http://link/to/new.jpg");


console.log(newUrl);
1
wesbos

URLパラメーターを置き換える最適なソリューションがあります。

次の関数は、次のURLの部屋の値を3に置き換えます。

http://example.com/property/?min=50000&max=60000&room=1&property_type=House

var newurl = replaceUrlParam('room','3');
history.pushState(null, null, newurl);

function replaceUrlParam(paramName, paramValue){
    var url = window.location.href;

    if (paramValue == null) {
        paramValue = '';
    }

    var pattern = new RegExp('\\b('+paramName+'=).*?(&|#|$)');
    if (url.search(pattern)>=0) {
        return url.replace(pattern,'$1' + paramValue + '$2');
    }

    url = url.replace(/[?#]$/,'');
    return url + (url.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue;
}

出力

http://example.com/property/?min=50000&max=60000&room=3&property_type=House

1
Mayank Dudakiya

よく見ると、URLについて2つの驚くべきことがわかります。（1）シンプルに見えますが、詳細とコーナーケースは実際には難しいです。（2）JavaScriptは、URL 。本格的なライブラリは、人々が車輪を再発明したり、ランダムな男の巧妙であるがバグの多い正規表現コードスニペットをコピーしたりするのを避けるためだと思います。たぶんURI.jsを試してください（ http://medialize.github.io/URI.js/ ）

1
Ryan

私はこの方法を使用します：

  • 履歴内のURLを置き換えます

  • 削除されたパラメーターの値を返します

    function getUrlParameterAndRemoveParameter(paramName) {
    var url = window.location.Origin + window.location.pathname;
    var s = window.location.search.substring(1);
    var pArray = (s == "" ? [] : s.split('&'));

    var paramValue = null;
    var pArrayNew = [];
    for (var i = 0; i < pArray.length; i++) {
        var pName = pArray[i].split('=');
        if (pName[0] === paramName) {
            paramValue = pName[1] === undefined ? true : decodeURIComponent(pName[1]);
        }
        else {
            pArrayNew.Push(pArray[i]);
        }
    }

    url += (pArrayNew.length == 0 ? "" : "?" + pArrayNew.join('&'));
    window.history.replaceState(window.history.state, document.title, url);

    return paramValue;
}
0
Laurent

このようなものはどうですか：

<script>
function changeQueryVariable(keyString, replaceString) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    var replaced = false;
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == keyString) {
            vars[i] = pair[0] + "="+ replaceString;
            replaced = true;
        }
    }
    if (!replaced) vars.Push(keyString + "=" + replaceString);
    return vars.join("&");
}
</script>
0
Robert Martin

@stenixに加えて、これは私にとって完璧に機能しました

 url =  window.location.href;
    paramName = 'myparam';
        paramValue = $(this).val();
        var pattern = new RegExp('('+paramName+'=).*?(&|$)') 
        var newUrl = url.replace(pattern,'$1' + paramValue + '$2');
        var n=url.indexOf(paramName);
        alert(n)
        if(n == -1){
            newUrl = newUrl + (newUrl.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue 
        }
        window.location.href = newUrl;

ここでは、「url」変数を保存する必要はなく、現在のURLに置き換えるだけです

0
kasim badami

これを試して

var updateQueryStringParam = function (key, value) {

    var baseUrl = [location.protocol, '//', location.Host, location.pathname].join(''),
        urlQueryString = document.location.search,
        newParam = key + '=' + value,
        params = '?' + newParam;

    // If the "search" string exists, then build params from it
    if (urlQueryString) {
        var updateRegex = new RegExp('([\?&])' + key + '[^&]*');
        var removeRegex = new RegExp('([\?&])' + key + '=[^&;]+[&;]?');

        if( typeof value == 'undefined' || value == null || value == '' ) { // Remove param if value is empty
            params = urlQueryString.replace(removeRegex, "$1");
            params = params.replace( /[&;]$/, "" );

        } else if (urlQueryString.match(updateRegex) !== null) { // If param exists already, update it
            params = urlQueryString.replace(updateRegex, "$1" + newParam);

        } else { // Otherwise, add it to end of query string
            params = urlQueryString + '&' + newParam;
        }
    }

    // no parameter was set so we don't need the question mark
    params = params == '?' ? '' : params;

    window.history.replaceState({}, "", baseUrl + params);
};
0
Alper Ebicoglu