Замена текста внутри фигурных скобок JavaScript

Question

Я пытаюсь использовать JavaScript для динамической замены содержимого внутри фигурных скобок.Вот пример моего кода:

var myString = "This is {name}'s {adjective} {type} in JavaScript! Yes, a {type}!";
var replaceArray = ['name', 'adjective', 'type'];
var replaceWith = ['John', 'simple', 'string'];

for(var i = 0; i <= replaceArray.length - 1; i ++) {
  myString.replace(/\{replaceArray[i]\}/gi, replaceWith[i]);
}

alert(myString);

Приведенный выше код должен вывести «Это простая строка Джона в JavaScript! Да, строка!».

Вот что происходит:

1. нам дана строка со значениями в фигурных скобках, которые нужно заменить
2. цикл использует "replaceArray", чтобы найти все значения в фигурных скобках, которые нужно заменить
3. эти значения вместе с фигурными скобками будут заменены соответствующими значениями в массиве replaceWith

Однако мне не повезло, тем более что одно значениеможет быть заменен в нескольких местах , и что я имею дело с динамическим значением внутри регулярного выражения.

Может кто-нибудь помочь мне исправить это, используя настройки, аналогичные приведенным выше?

Answer 1

Во-первых, String.replace не является деструктивным - он не меняет саму строку, поэтому вам придется установить myString = myString.replace(...). Во-вторых, вы можете динамически создавать RegExp объекты с помощью new RegExp, поэтому результатом всего этого будет:

var myString = "This is {name}'s {adjective} {type} in JavaScript! Yes, a {type}!",
    replaceArray = ['name', 'adjective', 'type'],
    replaceWith = ['John', 'simple', 'string'];

for(var i = 0; i < replaceArray.length; i++) {
    myString = myString.replace(new RegExp('{' + replaceArray[i] + '}', 'gi'), replaceWith[i]);
}

Answer 2

Строки являются неизменяемыми

Строки в JavaScript являются неизменяемыми.Это означает, что это никогда не будет работать так, как вы ожидаете:

myString.replace(x, y);
alert(myString);

Это не просто проблема с .replace() - ничто не может изменить строку в JavaScript.Вместо этого вы можете сделать следующее:

myString = myString.replace(x, y);
alert(myString);

Литералы регулярных выражений не интерполируют значения

Литералы регулярных выражений в JavaScript не интерполируют значения, поэтому это все равно не будет работать:

myString = myString.replace(/\{replaceArray[i]\}/gi, replaceWith[i]);

Вместо этого вы должны сделать что-то вроде этого:

myString = myString.replace(new RegExp('\{'+replaceArray[i]+'\}', 'gi'), replaceWith[i]);

Но это немного запутанно, поэтому вы можете сначала создать список регулярных выражений:

var regexes = replaceArray.map(function (string) {
    return new RegExp('\{' + string + '\}', 'gi');
});
for(var i = 0; i < replaceArray.length; i ++) {
  myString = myString.replace(regexes[i], replaceWith[i]);
}

Как видите, вы также можете использовать i < replaceArray.length вместо i <= replaceArray.length - 1, чтобы упростить условие цикла.

Обновление 2017

Теперь вы можете сделать его еще проще:

var regexes = replaceArray.map(string => new RegExp(`\{${string}\}`, 'gi'));
for(var i = 0; i < replaceArray.length; i ++) {
  myString = myString.replace(regexes[i], replaceWith[i]);
}

Без цикла

Вместо того, чтобы повторять и применять .replace() функцию снова и снова, вы можете сделать это только один раз, например:

var mapping = {};
replaceArray.forEach((e,i) => mapping[`{${e}}`] = replaceWith[i]);
myString = myString.replace(/\{\w+\}/ig, n => mapping[n]);

См. DEMO .

Шаблонные движки

В основном вы создаете свой собственный шаблонизатор.Если вы хотите использовать вместо этого готовое решение, рассмотрите возможность использования:

• Микротемплатинг Джона Ресига
• Усы
• jQuery Templates
• Руль
• doT.js

или что-то ещевот так.

Примером того, что вы пытаетесь сделать с помощью усов, будет:

var myString = "This is {{name}}'s {{adjective}} {{type}} in JavaScript! Yes, a {{type}}!";

var myData = {name: 'John', adjective: 'simple', type: 'string'};

myString = Mustache.to_html(myString, myData);

alert(myString);

См. DEMO .

Answer 3

Вот функция, которая принимает строку и массив замен. Он достаточно гибкий, чтобы его можно было использовать повторно. Единственный улов: вам нужно использовать числа в вашей строке вместо строк. например,

var myString = "This is {0}'s {1} {2} in JavaScript! Yes, a {2}!";



function personalizeString(string, replacementArray) {

    return string.replace(/({\d})/g, function(j) { 
        return replacementArray[j.replace(/{/, '').replace(/}/, '')];
    });
}

Демо: http://jsfiddle.net/4cfy7qvn/

Answer 4

Лучший способ сделать это - использовать встроенную функцию замены, как уже упоминали другие, и у кого я позаимствовал.Особый крик @ yannic-hamann за регулярное выражение и наглядный пример.Я не беспокоюсь о производительности, так как я делаю это только для построения путей.

Я нашел свое решение в Документах MDN .

const interpolateUrl = (string, values) => string.replace(/{(.*?)}/g, (match, offset) => values[offset]);

const path = 'theresalways/{what}/inthe/{fruit}-stand/{who}';
const paths = {
  what: 'money',
  fruit: 'banana',
  who: 'michael',
};

const expected = 'theresalways/money/inthe/banana-stand/michael';

const url = interpolateUrl(path, paths);

console.log(`Is Equal: ${expected === url}`);
console.log(`URL: ${url}`)

Answer 5

Мне очень нравится ответ rsp.Особенно раздел « без петли ».Тем не менее, я нахожу код не настолько интуитивно понятным.Я понимаю, что этот вопрос возник из сценария с двумя массивами, и ему уже более 7 лет, но поскольку этот вопрос отображается в Google как № 1 при поиске замены строки фигурными скобками, и автор запросил аналогичную настройку Я испытываю желание предложить другое решение.

При этом решение для копирования и вставки, с которым можно поиграться:

var myString = "This is {name}'s {adjective} {TYPE} in JavaScript! Yes, a { type }!";

var regex = /{(.*?)}/g;
myString.replace(regex, (m, c) => ({
    "name": "John",
    "adjective": "simple",
    "type": "string"
})[c.trim().toLowerCase()]);

Этот ресурс действительно помогмне построить и понять приведенный выше код и узнать больше о регулярных выражениях с JavaScript в целом.