20

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);

上記のコードは、「これは John の JavaScript の単純な文字列です! はい、文字列です!」と出力する必要があります。

何が起こるかは次のとおりです。

  1. 置換が必要な中括弧内の値を持つ文字列が与えられます
  2. ループは「replaceArray」を使用して、置換が必要な中括弧内のすべての値を見つけます
  3. これらの値は、中括弧とともに、「replaceWith」配列内の対応する値に置き換えられます

ただし、特に1つの値が複数の場所で置き換えられる可能性があり、正規表現内で動的な値を扱っているため、運がありません。

上記と同様の設定を使用して、これを修正するのを手伝ってくれる人はいますか?

4

5 に答える 5

19

まず、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]);
}
于 2011-03-17T03:00:51.960 に答える
6

文字列は不変です

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]);

デモを参照してください。

テンプレート エンジン

基本的に、独自のテンプレート エンジンを作成しています。代わりに既製のソリューションを使用する場合は、次の使用を検討してください。

またはそのようなもの。

Mustache を使用して何をしようとしているかの例は次のとおりです。

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);

デモを参照してください。

于 2011-03-17T02:59:14.440 に答える
4

文字列と置換の配列を取る関数を次に示します。再利用できるほど柔軟です。唯一の問題は、文字列の代わりに文字列に数字を使用する必要があることです。例えば、

var str = "{0} membership will start on {1} and expire on {2}.";

var arr = ["Jamie's", '11/27/14', '11/27/15'];

function personalizeString(string, replacementArray) {
  return string.replace(/{(\d+)}/g, function(match, g1) {
    return replacementArray[g1];
  });
}

console.log(
  personalizeString(str, arr)
)

デモ: https://jsfiddle.net/4cfy7qvn/

于 2014-11-27T00:33:36.230 に答える