Question

我有一小段代码试图替换。有两个数据对象。一个是包含{variable}的URL列表，另一个是这些变量的替换值的对象。

我已经创建了一些代码来尝试使其正常运行，但是我认为可能存在一种更有效的处理方式。

// Content we will look through and replace variables in
let urls = [
    'http://www.example.com/{var1}/{var2}',
    'http://www.example.com/{var1}/{var4}',
];

// Data used for the replacement
let variables = [{
    variable: 'var1',
    value: '123'
},
{
    variable: 'var2',
    value: '456'
},
{
    variable: 'var4',
    value: '789'
}]

// Will hold the final URLs
let finalURLs = [];

// Loop over all URLS
for (let index = 0; index < urls.length; ++index) {

    // Loop over all variables
    for (let d = 0; d < data.length; ++d) {

        // Set the replaced URL
        let u = urls[index].replace('{' + data[d].variable + '}', data[d].value);
        finalURLs.push(u);

    }

}

// Desired output
finalURLs = [
    'http://www.example.com/123/456',
    'http://www.example.com/123/789'
]

我确定我还没有做到这一点，但是正在寻找有关该做什么的指针。

Answer 1

您可以使用一个对象作为替换字符串并替换所有找到的值。

var urls = ['http://www.example.com/{var1}/{var2}', 'http://www.example.com/{var1}/{var4}'],
    vars = { var1: '123', var2: '456', var4: '789' },
    result = urls.map(s => s.replace(/\{([^}]*?)\}/g, (_, v) => v in vars ? vars[v] : v));

console.log(result);

Answer 2

您可以使用Array.prototype.map()，Array.prototype.forEach()和String.prototype.replace()。使用正则表达式在全局范围内应用替换。

const urls = [
  'http://www.example.com/{var1}/{var2}',
  'http://www.example.com/{var1}/{var4}',
];

const variables = [
  { variable: 'var1', value: '123' },
  { variable: 'var2', value: '456' },
  { variable: 'var4', value: '789' }
];

const result = urls.map(url => {
  variables.forEach(({ variable, value }) => {
    url = url.replace(new RegExp(`{${variable}}`, 'g'), value);
  });
  return url;
});

console.log(result);

Answer 3

您继续替换urls[index]的原始值，而不是先前替换后的值。

for (let index = 0; index < urls.length; ++index) {
    let cur_url = urls[index];
    // Loop over all variables
    for (let d = 0; d < data.length; ++d) {
        // Set the replaced URL
        cur_url = cur_url.replace('{' + data[d].variable + '}', data[d].value);   
    }
    finalURLs.push(cur_url);
}

Answer 4

一种选择是使用正则表达式匹配每个用括号括起来的variable，然后在由variable索引的对象中查找替换项，该对象的值是替换项：

// Content we will look through and replace variables in
let urls = [
    'http://www.example.com/{var1}/{var2}',
    'http://www.example.com/{var1}/{var4}',
];

// Data used for the replacement
let variables = [{
    variable: 'var1',
    value: '123'
},
{
    variable: 'var2',
    value: '456'
},
{
    variable: 'var4',
    value: '789'
}];
const replacements = variables.reduce((a, { variable, value }) => {
  a[variable] = value;
  return a;
}, {});

const pattern = new RegExp(
  Object.keys(replacements).map(needle => `{${needle}}`).join('|'),
  'g' // global match; replace all
);
const newUrls = urls.map(url => (
  url.replace(pattern, (needleWithBrackets) => {
    // Trim out the leading and trailing brackets:
    const needle = needleWithBrackets.slice(1, needleWithBrackets.length - 1);
    return replacements[needle];
  })
));
console.log(newUrls);

当然，如果可以提前声明replacements，那就更好了：

// Content we will look through and replace variables in
let urls = [
    'http://www.example.com/{var1}/{var2}',
    'http://www.example.com/{var1}/{var4}',
];
const replacements = {
  var1: 123,
  var2: 456,
  var4: 789
};

const pattern = new RegExp(
  Object.keys(replacements).map(needle => `{${needle}}`).join('|'),
  'g' // global match; replace all
);
const newUrls = urls.map(url => (
  url.replace(pattern, needleWithBrackets => replacements[needleWithBrackets.slice(1, needleWithBrackets.length - 1)])
));
console.log(newUrls);

Answer 5

似乎可以用template string来解决。

const variables = { var1: '123', var2: '323', var4:'254'}

const finalUrls = [
   `http://www.example.com/${variables.var1}/{variables.var2}`,
   `http://www.example.com/${variables.var1}/{variables.var4}`
]

希望我能理解您的确切情况。

另一个说明，如果变量可以包含特殊字符，则应使用encodeURI

Javascript循环替换字符串中的数据

5 个答案: