regex JavaScript替换字符串中的变量

wbrvyc0a  于 2023-08-08  发布在  Java
关注(0)|答案(5)|浏览(125)

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

function replaceUrl(url, data) {}

字符串
呼叫者可能是:

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


我认为使用RegEx可能很容易实现这一点,但我不是很熟悉它。
有人能提供一个简单的方法吗?

pes8fvy9

pes8fvy91#

一个简单的解决方案是根本不使用RegEx。使用Template literals

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;

goucqfw6

goucqfw62#

你可以在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/

knsnq2tg

knsnq2tg3#

您可以使用String.prototype.replace的形式,将函数作为参数。
使用您的示例,它可能看起来像:

var str = '/task/:module?taskId=:taskId#:hash&:missing';
var obj = {
    module: 'm1',
    taskId: 't1',
    hash: 'h1'
};

function replaceUrl(url, data) {
    var regex = /:(\w+)/g;
    return url.replace(regex, function(match, p1) {
        return data[p1] || ':' + p1;
    });
}

replaceUrl(str, obj); // /task/m1?taskId=t1#h1&:missing

字符串
此方法将处理您传入的所有参数值,并忽略丢失的参数。

1dkrff03

1dkrff034#

我写了一个简单的JavaScript函数stringInject来解决这个问题。它将允许您执行以下操作。找到下面代码的链接。

var str = "This is a {0} string for {1}"
var newStr = stringInject(str, ["test", "stringInject"]);

// This is a test string for stringInject

字符串

NPM / GitHub链接:

https://www.npmjs.com/package/stringinject
https://github.com/tjcafferkey/stringinject

函数

function stringInject(str, arr) {
    if (typeof str !== 'string' || !(arr instanceof Array)) {
        return false;
    }

    return str.replace(/({\d})/g, function(i) {
        return arr[i.replace(/{/, '').replace(/}/, '')];
    });
}

pgx2nnw8

pgx2nnw85#

您可以使用以下函数

function replaceStringVariable(text, data) {
  // Create regex using the keys of the replacement object.
  const regex = new RegExp('\\${(' + Object.keys(data).join('|') + ')}', 'g')
  
  // Replace the string by the value in object
  return text.replace(regex, (m, p1) => data[p1] || m)
}

const newText = replaceStringVariable('hello ${name} and ${nameTwo}', {
  name: "Pedro",
  nameTwo: "Juan"
})

console.log('newText', newText)

字符串

相关问题