动态示例

Question

我需要使用正则表达式更改我的网址。例如，我的网址看起来像这样：

http://domain.com/blog/?page=2&order=asc&by=date

使用javascript我想动态地将order=asc更改为order=desc。但是这个函数也可以用于任何属性，例如by，因此只有order才能查找。

这是功能：

function replace(url, attribute, value) {
    var pattern = new RegExp('([\?|\&])' + attribute + '=.\w+');
    var replacement = '$1' + attribute + '=' + value;
    return url.replace(pattern, '', url);
}

所以在示例中，使用这些变量调用函数：

url = 'http://domain.com/blog/?page=2&order=asc&by=date'
attribute = 'order'
value = 'desc'

将返回http://domain.com/blog/?page=2&order=desc&by=date。

Answer 1

您可以使用jQuery $.param函数的反转来解析参数。

＆＃13;

(function($) {
  $.unparam = function(value) {
    var params = {};
    var pieces = value.split('&');
    var pair, i, l;
    for (i = 0, l = pieces.length; i < l; i++) {
      pair = pieces[i].split('=', 2);
      params[decodeURIComponent(pair[0])] = (pair.length == 2 ?
        decodeURIComponent(pair[1].replace(/\+/g, ' ')) : true);
    }
    return params;
  };
}(jQuery));

var url = 'http://domain.com/blog/?page=2&order=asc&by=date';

$('<p>').text('Before: ' + url).appendTo('body');

var parts = url.split('?');
var base = parts[0];
var params = parts[1];
var data = $.unparam(params);

data.order = 'desc';

var newUrl = base + '?' + $.param(data);

$('<p>').text('After: ' + newUrl).appendTo('body');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

动态示例

＆＃13;

(function($) {
  $.unparam = function(value) {
    var params = {};
    var pieces = value.split('&');
    for (var i = 0, l = pieces.length; i < l; i++) {
      var pair = pieces[i].split('=', 2);
      params[decodeURIComponent(pair[0])] = (pair.length == 2 ?
        decodeURIComponent(pair[1].replace(/\+/g, ' ')) : true);
    }
    return params;
  };
}(jQuery));

function updateParams(url, data) {
  var parts = url.split('?');
  var base = parts[0];
  var params = parts.length > 0 ? parts[1] : '';
  return base + '?' + $.param($.extend($.unparam(params), data));
}

var oldUrl = 'http://domain.com/blog/?page=2&order=asc&by=date';
var newUrl = updateParams(oldUrl, {
  order: 'desc'
});

$('<p>').text(newUrl).appendTo('body');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 2

I got your example working properly by changing your regex：

new RegExp('([\?|\&])' + attribute + '=.\w+');

到此：

new RegExp('([?&])' + attribute + '=\\w+');

曾经转义的\w+是问题，因为javascript字符串插值实际上是在解释反斜杠本身，并最终将其剥离并传递正则表达式只是一个＆＃34; w＆＃34;。逃避这两次：\\w+

也：

[\?|\&]是一个字符类，并且不需要|替换（您现在实际匹配管道符号）和量词?特殊字符通常在字符类中是不特殊，所以不需要转义它们。

你不需要在.之前\w+，\w+就足够了。

用javascript替换正则表达式中的部分文本

2 个答案:

动态示例