javascript - zerlegen - jquery string replace




Eine JavaScript-Zeichenfolge mit Platzhaltern und einem Objekt der Ersetzung formatieren? (7)

Als schnelles Beispiel:

var name = 'jack';
var age = 40;
console.log('%s is %d yrs old',name,age);

Die Ausgabe ist:

Jack ist 40 Jahre alt

Ich habe eine Zeichenfolge mit sagen: My Name is %NAME% and my age is %AGE%.

%XXX% sind Platzhalter. Dort müssen wir Werte aus einem Objekt ersetzen.

Das Objekt sieht folgendermaßen aus: {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"}

Ich muss das Objekt analysieren und die Zeichenfolge durch entsprechende Werte ersetzen. Die endgültige Ausgabe ist also:

Mein Name ist Mike und ich bin 26 Jahre alt.

Das Ganze muss entweder mit reinem Javascript oder mit Jquery erledigt werden.


Die Anforderungen der ursprünglichen Frage konnten eindeutig nicht von der String-Interpolation profitieren, da es sich scheinbar um eine Laufzeitverarbeitung beliebiger Ersatzschlüssel handelt.

Wenn Sie jedoch nur eine String-Interpolation durchführen mussten, können Sie Folgendes verwenden:

const str = `My name is ${replacements.name} and my age is ${replacements.age}.`

Beachten Sie die Backticks, die die Zeichenfolge begrenzen. Sie sind erforderlich.

Für eine Antwort, die den Anforderungen des jeweiligen OPs entspricht, können Sie String.prototype.replace() für die Ersetzungen verwenden.

Mit dem folgenden Code werden alle Übereinstimmungen behandelt und keine Übereinstimmungen ohne Ersetzung (sofern Ihre Ersetzungswerte alle Zeichenfolgen sind, wenn nicht, siehe unten).

var replacements = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"},
    str = 'My Name is %NAME% and my age is %AGE%.';

str = str.replace(/%\w+%/g, function(all) {
   return replacements[all] || all;
});

jsFiddle .

Wenn einige Ihrer Ersetzungen keine Zeichenfolgen sind, stellen Sie sicher, dass sie zuerst im Objekt vorhanden sind. Wenn Sie ein Format wie das Beispiel haben, dh in Prozentzeichen eingeschlossen, können Sie den Operator in verwenden, um dies zu erreichen.

jsFiddle .

Wenn Ihr Format jedoch kein spezielles Format hat, dh keine Zeichenfolge, und Ihr Ersetzungsobjekt keinen Object.prototype.hasOwnProperty() , verwenden Sie Object.prototype.hasOwnProperty() , sofern Sie nicht garantieren können, dass keine Ihrer potenziell ersetzten Teilzeichenfolgen verwendet wird Konflikt mit Eigenschaftsnamen auf dem Prototyp.

jsFiddle .

Wenn Ihre Ersatzzeichenfolge 'hasOwnProperty' , erhalten Sie andernfalls eine 'hasOwnProperty' Zeichenfolge.

jsFiddle .

Als Randnotiz sollten Sie als replacements eines Object , nicht eines Array .


Sie können JQuery (jquery.validate.js) verwenden, damit es problemlos funktioniert.

$.validator.format("My name is {0}, I'm {1} years old",["Bob","23"]);

Oder wenn Sie nur diese Funktion verwenden möchten, können Sie diese Funktion definieren und einfach verwenden

function format(source, params) {
    $.each(params,function (i, n) {
        source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
    })
    return source;
}
alert(format("{0} is a {1}", ["Michael", "Guy"]));

Gutschrift an das jquery.validate.js-Team


Sie können eine benutzerdefinierte Ersetzungsfunktion wie folgt verwenden:

var str = "My Name is %NAME% and my age is %AGE%.";
var replaceData = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};

function substitute(str, data) {
    var output = str.replace(/%[^%]+%/g, function(match) {
        if (match in data) {
            return(data[match]);
        } else {
            return("");
        }
    });
    return(output);
}

var output = substitute(str, replaceData);

Sie können es hier sehen: http://jsfiddle.net/jfriend00/DyCwk/ .


Verwenden Sie einfach .replace()

var values = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};
var substitutedString = "My Name is %NAME% and my age is %AGE%.".replace("%NAME%", $values["%NAME%"]).replace("%AGE%", $values["%AGE%"]);

Wenn Sie etwas näher an console.log arbeiten möchten, ersetzen Sie% s Platzhalter wie in

>console.log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright")
>Hello Loreto how are you today is everything allright?

Ich habe das geschrieben

function log() {
  var args = Array.prototype.slice.call(arguments);
  var rep= args.slice(1, args.length);
  var i=0;
  var output = args[0].replace(/%s/g, function(match,idx) {
    var subst=rep.slice(i, ++i);
    return( subst );
  });
   return(output);
}
res=log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright");
document.getElementById("console").innerHTML=res;
<span id="console"/>

Sie erhalten

>log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright")
>"Hello Loreto how are you today is everything allright?"

AKTUALISIEREN

Ich habe eine einfache Variante als String.prototype , die beim Umgang mit String-Transformationen nützlich ist. Hier ist es:

String.prototype.log = function() {
    var args = Array.prototype.slice.call(arguments);
    var rep= args.slice(0, args.length);
    var i=0;
    var output = this.replace(/%s|%d|%f|%@/g, function(match,idx) {
      var subst=rep.slice(i, ++i);
      return( subst );
    });
    return output;
   }

In diesem Fall wirst du tun

"Hello %s how are you %s is everything %s?".log("Loreto", "today", "allright")
"Hello Loreto how are you today is everything allright?"

Versuchen Sie diese Version here


Wie wäre es mit ES6-Vorlagen-Literalen?

var a = "cat";
var b = "fat";
console.log(`my ${a} is ${b}`); //notice back-ticked string

Mehr über Vorlagenliterale ...





string-formatting