74

これを行う効率的な方法を探していましたが、見つけることができませんでした。基本的に必要なのは、たとえば次の 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

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

前もって感謝します。

4

20 に答える 20

155

次の解決策は、他の回答を組み合わせて、いくつかの特殊なケースを処理します。

  • パラメータが元の URL に存在しません
  • パラメータは唯一のパラメータです
  • パラメータは最初または最後です
  • 新しいパラメータ値は古いものと同じです
  • URL が?文字で終わる
  • \bparamName で終わる別のパラメータが一致しないことを保証します

解決：

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を参照してください。
于 2013-12-06T09:32:31.270 に答える
56

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

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()は(ie)内の最初の部分src=を表し、 (ie )$2内の 2 番目の部分を表すので、これは と の間で値を変更しようとしていることを示しています。より明確に、次のようになります。()&src&

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

すべてのオカレンスを置き換えるためのアドオン:

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

于 2011-08-24T06:28:15.307 に答える
7

これは変更された stenix のコードです。完全ではありませんが、次のように、提供されたパラメータを含む URL にパラメータがある場合を処理します。

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

この場合、searchquery パラメータ値が変更されます。

コード：

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
}
于 2015-01-06T02:34:32.443 に答える
1

更新: 便利な関数にしてください: 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);
于 2011-08-24T06:17:26.810 に答える
1

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

于 2015-01-26T14:15:55.630 に答える
0

@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 に置き換えるだけです。

于 2014-04-14T08:35:26.490 に答える
0

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

<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>
于 2011-08-24T06:06:04.187 に答える
0

正規表現を使用しないソリューションで、少し見やすく、私が探していたもの

これは、ポート、ハッシュ パラメータなどをサポートします。

browsers 属性要素をパーサーとして使用します。

function setUrlParameters(url, parameters) {
    var parser = document.createElement('a');
    parser.href = url;

    url = "";

    if (parser.protocol) {
        url += parser.protocol + "//";
    }

    if (parser.host) {
        url += parser.host;
    }

    if (parser.pathname) {
        url += parser.pathname;
    }

    var queryParts = {};

    if (parser.search) {
        var search = parser.search.substring(1);

        var searchParts = search.split("&");
        for (var i = 0; i < searchParts.length; i++) {
            var searchPart = searchParts[i];

            var whitespaceIndex = searchPart.indexOf("=");

            if (whitespaceIndex !== -1) {
                var key = searchPart.substring(0, whitespaceIndex);
                var value = searchPart.substring(whitespaceIndex + 1);

                queryParts[key] = value;
            } else {
                queryParts[searchPart] = false;
            }
        }
    }

    var parameterKeys = Object.keys(parameters);

    for (var i = 0; i < parameterKeys.length; i++) {
        var parameterKey = parameterKeys[i];

        queryParts[parameterKey] = parameters[parameterKey];
    }


    var queryPartKeys = Object.keys(queryParts);

    var query = "";

    for (var i = 0; i < queryPartKeys.length; i++) {
        if (query.length === 0) {
            query += "?";
        }
        if (query.length > 1) {
            query += "&";
        }

        var queryPartKey = queryPartKeys[i];

        query += queryPartKey;

        if (queryParts[queryPartKey]) {
            query += "=";

            query += queryParts[queryPartKey];
        }
    }

    url += query;

    if (parser.hash) {
        url += parser.hash;
    }

    return url;
}
于 2019-11-30T10:48:40.330 に答える