Ersetzen von Text Innerhalb von Curley Klammern JavaScript

Ich versuche, JavaScript zu verwenden, um dynamisch Inhalte ersetzen, Inhalte innerhalb von geschweiften Klammern. Hier ein Beispiel von meinem code:

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

Den oben genannten code soll die Ausgabe "Dies ist John' s einfacher string in JavaScript! Ja, ein string!".

Hier ist was passiert:

erhalten wir einen string mit Werten in geschweiften Klammern, die müssen ersetzt
eine Schleife verwendet "replaceArray", um alle Werte in geschweiften Klammern, die müssen ersetzt
diese Werte, zusammen mit den geschweiften Klammern ersetzt werden, die entsprechenden Werte in der "replaceWith" array

Allerdings bin ich nicht mit viel Glück, vor allem, da einen Wert ersetzt werden kann, an mehreren Standorten, und dass ich sich ein dynamischer Wert, der innerhalb des regulären Ausdrucks.

Kann mir jemand helfen dieses Problem zu lösen, mit einem ähnlichen setup wie oben?

Ich bin angemeldet als ein anderer Benutzer in dieser Zeit... @William: habe ich nicht, lassen Sie mich versuchen das! @rsp: ich versuche mit reinem JavaScript auf diese ein, denn es gibt viele andere jQuery um diesen code-block, und ich hoffe, Leistung zu beschleunigen, indem Sie nur JavaScript.
Dank William und Yi Jiang!!! Das funktionierte!!!

InformationsquelleAutor Oliver Spryn | 2011-03-17

15

Zunächst String.replace ist nicht destruktiv - es ändert nicht den string selbst, so müssen Sie myString = myString.replace(...). Zweitens können Sie erstellen RegExp Objekte, die dynamisch mit new RegExp, so das Ergebnis von allem das wäre:
```
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]);
}
```
- Ich bevorzuge diese Methode: myString = myString.split('{' + replaceArray[i] + '}').join(replaceWith[i]); (für die Lesbarkeit und die Leistung Gründen).
- Ist es schneller eine neue RegEx obj oder direkt die regex innerhalb des replace-Anweisung wie: myString.replace('/[{].*[}]/', text)?
- Ersten, dein Beispiel-code es nicht funktionieren würde, da würde die Funktion suchen für die Zeichenkette /[{].*[}]/. Der performance-Unterschied zwischen den beiden sein sollte, die klein genug für fast alle Zwecke, es ist vernachlässigbar, aber es sei denn, Sie erstellen müssen RegExp dynamisch (wie in dem Fall, in der Antwort), das den RegExp direkt sehr viel besser lesbar, da die Schaffung eines RegExp-Objekt erfordert eine Zeichenfolge übergeben werden, die Sie brauchen, um doppelte escape-alle backslashes. Wenn Sie Zweifel haben, benchmark-die beiden code und finden Sie selbst heraus, welche schneller ist
- Es würde nur gut funktionieren, ohne die einfachen Anführungszeichen um den regex. var myString = 'foo/{bar}'; var myNewString = myString.replace(/[{].*[}]/, 'hi'); //"foo/hi"
InformationsquelleAutor Yi Jiang
5

Strings sind unveränderlich

Strings in JavaScript sind unveränderlich. Es bedeutet, dass, das wird nie so funktionieren wie Sie es erwarten:
```
myString.replace(x, y);
alert(myString);
```
Dies ist nicht nur ein problem mit .replace() - nichts mutieren kann ein string in JavaScript. Was können Sie stattdessen tun ist:
```
myString = myString.replace(x, y);
alert(myString);
```
Regex-Literale nicht die Werte interpoliert

Regulären Ausdruck Literale in JavaScript nicht die Werte interpoliert, so wird dies immer noch nicht funktionieren:
```
myString = myString.replace(/\{replaceArray[i]\}/gi, replaceWith[i]);
```
Müssen Sie etwas tun, wie dieses, statt:
```
myString = myString.replace(new RegExp('\{'+replaceArray[i]+'\}', 'gi'), replaceWith[i]);
```
Aber das ist ein bisschen chaotisch, so können Sie erstellen eine Liste von regexes erste:
```
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]);
}
```
Wie Sie sehen können, können Sie auch i < replaceArray.length statt i <= replaceArray.length - 1 zur Vereinfachung der Schleifenbedingung.

Update 2017

Nun können Sie machen es noch einfacher:
```
var regexes = replaceArray.map(string => new RegExp(`\{${string}\}`, 'gi'));
for(var i = 0; i < replaceArray.length; i ++) {
  myString = myString.replace(regexes[i], replaceWith[i]);
}
```
Ohne loop

Statt looping und anwenden .replace() Funktion immer und immer wieder, du kannst es nur einmal so:
```
var mapping = {};
replaceArray.forEach((e,i) => mapping[`{${e}}`] = replaceWith[i]);
myString = myString.replace(/\{\w+\}/ig, n => mapping[n]);
```
Sehen DEMO.

Templating engines

Sind Sie im Grunde erstellen Sie Ihre eigene Template-engine. Wenn Sie möchten, verwenden Sie eine fertige Lösung statt, dann überlegen:
oder sowas.

Ein Beispiel von, was Sie versuchen zu tun, mit Schnurrbart wäre:
```
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);
```
Sehen DEMO.
- Momentan bin ich mit plop Mikro-generator, ist eine sehr nützliche Template-Bibliothek. Siehe @ plopjs.com
InformationsquelleAutor rsp
4

Hier ist eine Funktion, die den string und ein array von Ersetzungen. Es ist flexibel genug, um wieder verwendet werden. Der einzige Haken ist, müssen Sie die Verwendung von zahlen in Strings anstelle des strings. z.B.,
```
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(/}/, '')];
    });
}
```
Demo: http://jsfiddle.net/4cfy7qvn/
- Genau das, was ich suchte. Es kann verbessert werden, durch die Verwendung von Gruppen erfassen und ändern ` {\d}` für {\d+} so können Sie beliebige Länge arrays. Das Ergebnis wird wie folgt Aussehen: const replace = (string, replacementArray) => string.replace(/{(\d+)}/g, (match, captureGroup) => replacementArray[captureGroup]);
InformationsquelleAutor inorganik

Der beste Weg, die ich gefunden habe, um dies zu tun, ist die Verwendung eines in-line-ersetzen-Funktion wie andere erwähnt haben, und von dem ich Sie geliehen. Special shout out an @yannic-hamann für die regex und ein gutes Beispiel. Ich bin nicht besorgt über die Leistung, wie ich bin nur tun dies, um zu konstruieren Pfade.

Fand ich meine Lösung in MDN ist docs.

JS:

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}`)

InformationsquelleAutor aaronwbrown

0

Ich mag rsp Antwort. Vor allem die " Ohne loop' Abschnitt. Dennoch finde ich den code nicht so intuitiv. Ich verstehe, dass diese Frage kommt aus den beiden arrays Szenario und das ist mehr als 7 Jahre alt, aber da diese Frage erscheint als #1 auf google bei der Suche ersetzen Sie eine Zeichenkette mit geschweiften Klammern und der Autor gebeten, für einem ähnlichen setup bin ich versucht, eine andere Lösung.

Dass gesagt wird, eine Kopie und paste-Lösung zu spielen, um mit:
```
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()]);
```
Diese Ressource mir wirklich geholfen, zu bauen und zu verstehen, den oben stehenden code und erfahren Sie mehr über regex mit JavaScript im Allgemeinen.

InformationsquelleAutor Yannic Hamann

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Strings sind unveränderlich

Regex-Literale nicht die Werte interpoliert

Update 2017

Ohne loop

Templating engines