Question

我在这里有这个网址：

http://localhost.com/?color=Red,Blue,Green

URL也可以具有以下格式：

http://localhost.com/?color=Red,Green,Blue

我现在尝试从包含Green的URL中删除值,（如果它用作分隔符）。我在这里尝试过此RegExp：

var name = 'Green';
var re = new RegExp('(' + name + ',|' + name + ')');
var newUrl = window.location.search.replace(re, '');
window.history.pushState(null, null, newUrl);

所以我想说的是，删除Green,或Green，以便如果找不到Green,，将使用第二个检查。但是当我运行它时，URL看起来像这样：

http://localhost.com/?olor=Red,Green,Blue

它从完全奇怪的颜色中删除了c。我已经在工具中在线测试了RegExp，并且选择了文本，但此处不起作用。我又在做什么错了？

更新

这是尝试布鲁诺斯答案的方法，但是您有时会发现它不起作用：

function replaceColor(search, name) {
  var reS = new RegExp(`=${name}(,|$)`);
  var reM = new RegExp(`,${name},`);
  var reE = new RegExp(`\b${name}$`);
  return search
    .replace(reS, '=')
    .replace(reM, ',')
    .replace(reE, '')
    .replace(/,$/, '')
}

alert(replaceColor('?size=K,M,S&color=Green,Red,Black', 'Red')) //Works

alert(replaceColor('?size=K,M,S&color=Green,Red,Black', 'Green')) //Works

alert(replaceColor('?size=K,M,S&color=Green,Red,Black', 'Black')) //Don't works

我该如何解决？

Answer 1

您的示例为什么不起作用：

您的正则表达式查找green或green,，但是在第一个示例中，URL包含,green。由于只替换了其中的green部分，结果是结尾的逗号：red,blue,。

它从完全奇怪的颜色中删除了c。

我在您的示例中没有看到任何可以证明此行为的信息。我认为这与您提供的代码无关。

var name = 'Green';
var re = new RegExp('(' + name + ',|' + name + ')');
var newUrl = "http://localhost.com/?color=Red,Blue,Green".replace(re, '');
console.log(newUrl);

似乎Bruno has already covered the Regex solution，我将为您提供其他选择。

使用URLSearchParams

您可以使用URLSearchParams，将split()的值放入数组，filter()取出green，然后join()一起获取参数。

const urlParams = new URLSearchParams(window.location.search);
const colors = urlParams.get('color');

let result = colors.split(",").filter(n => n != "green").join(",");

如果需要支持Internet Explorer ，则可以引用this answer，该方法包括以下用于检索URL参数的方法-result部分可以保持不变：< / p>

function getParameterByName(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var colors = gerParameterByName("color"); 
var result = colors.split(",").filter(n => n != "green").join(",");

Answer 2

这终于做到了：

var reA = new RegExp('Value you want to remove');
var reB = new RegExp('(,&)');
var reC = new RegExp('(,,)');
var reD = new RegExp('(=,)');
var reE = new RegExp('(,$)');
window.history.pushState(null, null, decodeURIComponent(window.location.search).replace(reA, '').replace(reB, '&').replace(reC, ',').replace(reD, '=').replace(reE, ''));

只需输入要删除的值，或在此处输入带有该值的变量。应该管用。对我来说确实如此。

Answer 3

只需稍微更改代码即可完成操作，但是您可能应该使用Tyler的策略将其作为数组进行操作

function replaceColor(search, name) {
  var reS = new RegExp(`=${name}(,|$)`);
  var reM = new RegExp(`,${name},`);
  var reE = new RegExp(`[=,]${name}$`);
  return search
    .replace(reS, '=')
    .replace(reM, ',')
    .replace(reE, '')
    .replace(/,$/, '')
}

var name = 'Green';
var newUrl = replaceColor(window.location.search, name);
window.history.pushState(null, null, newUrl);

示例：

function replaceColor(search, name) {
  var reS = new RegExp(`=${name}(,|$)`);
  var reM = new RegExp(`,${name},`);
  var reE = new RegExp(`[=,]${name}$`);
  return search
    .replace(reS, '=')
    .replace(reM, ',')
    .replace(reE, '')
    .replace(/,$/, '')
}

console.log(replaceColor('?color=Red,Green,Blue', 'Red'))
console.log(replaceColor('?color=Red,Green,Blue', 'Green'))
console.log(replaceColor('?color=Red,Green,Blue', 'Blue'))

console.log(replaceColor('?color=Red,DarkGreen,Blue', 'Green'))
console.log(replaceColor('?color=DarkGreen', 'Green'))
console.log(replaceColor('?color=Green', 'Green'))

Answer 4

在您的正则表达式中添加更多条件

var re = new RegExp('(' + name + ',|' + name + '|,' + name + ')');

JavaScript：从网址搜索参数中删除值

4 个答案: