我一直在寻找一种有效的方法来做到这一点,但一直无法找到它,基本上我需要的是给定这个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更改为另一个值,这可能吗?
提前致谢。
这不是一个更好的解决方案吗?
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
代表()
(即&
)内的第二部分,因此这表明你将改变src
和&
之间的值。更清楚,它应该是这样的:
src='changed value'& // this is to be replaced with your original url
ADD-ON用于替换所有出现的事件:
如果你有几个具有相同名称的参数,你可以附加到正则表达式全局标志,就像这个text.replace(/(src=).*?(&)/g,'$1' + newSrc + '$2');
一样,它将替换那些具有相同名称的参数的所有值。
这样的事情怎么样:
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;
试试这个
<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>
我用这个方法:
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);
};
以下解决方案结合了其他答案并处理了一些特殊情况:
?
字符结尾\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;
}
已知限制:
Javascript现在提供了一个非常有用的功能来处理url参数:qazxsw poi
URLSearchParams
现在可以使用本机JS
var searchParams = new URLSearchParams(window.location.search);
searchParams.set('src','newSrc')
var newParams = searchParams.toString()
这里修改了stenix的代码,它并不完美,但它处理的情况是url中有一个包含提供参数的参数,例如:
var href = new URL('https://google.com?q=cats');
href.searchParams.set('q', 'dogs');
console.log(href.toString()); // https://google.com/?q=dogs
在这种情况下,searchquery参数值被更改。
码:
/search?searchquery=text and 'query' is provided.
更新:让它成为一个很好的功能: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
}
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;
}
如果你仔细观察,你会看到两个关于URL的令人惊讶的事情:(1)它们看起来很简单,但细节和极端情况实际上很难,(2)令人惊讶的是JavaScript并没有提供完整的API来让它们更容易使用。我认为一个成熟的图书馆是为了避免人们自己重新发明轮子或复制一些随机的家伙聪明,但可能是错误的正则表达式代码片段。也许试试URI.js(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);
)
我已经获得了替换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;
}
除了@stenix之外,这对我来说也很完美
http://example.com/property/?min=50000&max=60000&room=3&property_type=House
这里不需要保存“url”变量,只需在当前url中替换即可