JavaScript替换字符串中的变量

Question

我想编写一个函数来用实际值替换字符串中的变量,例如:

function replaceUrl(url, data) {}

来电者可能是:

replaceUrl('/task/:module?taskId=:taskId#:hash', {
    module: 'm1',
    taskId: 't1',
    hash: 'h1'
});

我认为使用RegEx可能很容易实现这一点,但我对它不是很熟悉.

任何人都可以提供一个简单的方法吗？

Answer 1

一个简单的解决方案是根本不使用RegEx.使用模板文字

var module = 'm1',
    taskId = 't1',
    hash   = 'h1';

var url = `/task/${module}?taskId=${taskId}#${hash}`;

var module = 'm1',
    taskId = 't1',
    hash = 'h1';

var url = `/task/${module}?taskId=${taskId}#${hash}`;

document.body.innerHTML = url;

使用RegEx:

function replaceUrl(url, data) {
    // Create regex using the keys of the replacement object.
    var regex = new RegExp(':(' + Object.keys(data).join('|') + ')', 'g');

    // Replace the string by the value in object
    return url.replace(regex, (m, $1) => data[$1] || m);
}

function replaceUrl(url, data) {
    var regex = new RegExp(':(' + Object.keys(data).join('|') + ')', 'g');

    return url.replace(regex, (m, $1) => data[$1] || m);
}


var updatedUrl = replaceUrl('/task/:module?taskId=:taskId#:hash', {
    module: 'm1',
    taskId: 't1',
    hash: 'h1'
});

console.log(updatedUrl);
document.body.innerHTML = updatedUrl;

Answer 2

您可以编写一个非常简单的模板函数来在 ES5 中实现此目的：

function template(string, obj){
  var s = string;
  for(var prop in obj) {
    s = s.replace(new RegExp('{'+ prop +'}','g'), obj[prop]);
  }
  return s;
}

template('/task/{module}?taskId={taskId}#{hash}', {
  module: 'foo', 
  taskId: 2, 
  hash: 'bar'
});

小提琴： https: //jsfiddle.net/j5hp2cfv/