Instanzen von String Ersetzen in URL

Question

ich zur Zeit dieses

var currentImage = $('#compImg').attr('src'); 

tue Das gibt mir eine von zwei URLs, die die folgenden

http://localhost:8000/images/folder1/Yearly/somename_Yearly_something.png 
http://localhost:8000/images/folder1/Monthly/somename_Monthly_something.png 

Der einzige Unterschied sind, ist die Worte Monats- und Jahres . Auf der Seite, die das Bild anzeigt, habe ich ein Auswahlfeld mit den Werten Monatlich und Jährlich. Wenn sie etwas auswählen und es gerade nicht angezeigt wird, muss ich das Bild wechseln. Sagen wir, ich lande auf der Seite und es wird der monatliche Bildpfad angezeigt. Wenn ich Monatlich aus dem Auswahlfeld wähle, sollte nichts passieren. Wenn ich Yearly auswähle, sollte die URL durch die jährliche URL ersetzt werden. Ich denke, der beste Weg, dies zu tun, ist nur das Auftreten von Monthly in der URL zu Yearly ersetzen, weil der Rest der gleiche ist.

Im Moment habe ich dies:

$("#yearMonth").change(function() { 

    var currentImage = $('#compImg').attr('src'); 

    if($(this).val() == 'Yearly') { 
     var newImage1 = currentImage.replace("Monthly", "Yearly"); 
     $('#dashboardImage').attr('src', newImage1 + '.png'); 
    } 

    if($(this).val() == 'Monthly') { 
     var newImage2 = currentImage.replace("Yearly", "Monthly"); 
     $('#dashboardImage').attr('src', newImage2 + '.png'); 
    } 
}); 

Im Moment nichts zu passieren scheint. Wie kann ich das Wort bei Bedarf ersetzen?

Answer 1

Die Funktion .replace in jQuery ersetzt nur die erste Instanz der gesuchten Zeichenfolge.

Sie könnten stattdessen str.split(search).join(replacement) verwenden, die alle Instanzen ersetzt. (Wie in this thread vorgeschlagen)

Sie sollten auch die + .png entfernen, weil die URL bereits mit .png endet.

Dann sollte der Code arbeiten und so etwas wie folgt aussehen:

$("#yearMonth").change(function() { 
    var currentImage = $('#compImg').attr('src'); 

    if($(this).val() == 'Yearly') { 
     var newImage1 = currentImage.split("Monthly").join("Yearly"); 

     $('#dashboardImage').attr('src', newImage1); 
    } 

    if($(this).val() == 'Monthly') { 
     var newImage2 = currentImage.split("Yearly").join("Monthly"); 

     $('#dashboardImage').attr('src', newImage2); 
    } 
}); 

Answer 2

Verwenden .replace(/old/g, "new") - der /g Teil wird sowohl Vorkommen, nicht nur die erste.

Zweitens nicht erneut hinzufügen am Ende .png

Code Aktualisieren (ohne andere wichtige Änderungen) ergibt:

$("#yearMonth").change(function() { 

    var currentImage = $('#compImg').attr('src'); 

    if ($(this).val() == 'Yearly') { 
     var newImage1 = currentImage.replace(/Monthly/g, "Yearly"); 
     // add here: alert(newImage1) to see what it's doing 
     $('#dashboardImage').attr('src', newImage1); 
    } 

    if ($(this).val() == 'Monthly') { 
     var newImage2 = currentImage.replace(/Yearly/g, "Monthly"); 
     $('#dashboardImage').attr('src', newImage2); 
    } 
}); 

---

einfach zu erweitern auf die ‚ohne andere größere Änderungen '- Sie können den Code mit einem Regex reduzieren:

$('#yearMonth').change(function() { 
    var currentImage = $('#compImg').attr('src'); 
    var newImage = currentImage.replace(/(Monthly|Yearly)/g, $(this).val()); 
    $('#dashboardImage').attr('src', newImage); 
}); 

Sie könnten auch erweitern, um die Werte f zu erhalten von der Auswahl selbst, wodurch der Code wartungsfrei ist.