Beim letzten Auftreten des Zeichens trennen und dann verbinden

Lesezeit: 4 Minuten

Benutzer-Avatar
justinw

Ich möchte ein splitten attribute beim letzten Vorkommen eines Zeichens, fügen Sie dann eine Zeichenfolge hinzu und fügen Sie das Array wieder zusammen. Hier ist eine vereinfachte Demo.

In der Demo würde ich das gerne splitten src Attribut beim letzten Vorkommen des . und dann hinzufügen -fx zum src Weg.

Original src Attribute

src="https://stackoverflow.com/questions/34648186/extension.jpg"
src="https://stackoverflow.com/questions/34648186/ext.ension.jpg"

was ich erhoffe zu bekommen

src="https://stackoverflow.com/questions/34648186/extension-fx.jpg"
src="https://stackoverflow.com/questions/34648186/ext.ension-fx.jpg"

Genauer gesagt geht es um die Frage, ob ich split('.') und der Pfad hat mehrere . Probleme entstehen (-fx nicht richtig hinzugefügt).

$('img').each(function(){
	var a = $(this).attr('src');
    var b = a.split('.')
    var c = b[0] + '-fx' + '.' + b[1];
    console.log(c);
    $(this).attr('src', c);    
});
img {
    height: 100px;
    width: 100px;
    background: red;
}

img[src*="-fx.jpg"] {
    background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="https://stackoverflow.com/questions/34648186/extension.jpg">
<img src="https://stackoverflow.com/questions/34648186/ext.ension.jpg">

  • Können Sie ein Beispiel für die Eingabezeichenfolge und die erwartete Ausgabe hinzufügen

    – Tuschar

    7. Januar 2016 um 5:52 Uhr

  • @Tushar in der Demo gibt es ein Beispiel dafür, aber ich werde es auch hier zum Beitrag hinzufügen

    – justinw

    7. Januar 2016 um 5:53 Uhr

  • Warum nicht einfach teilen .jpg dann fügen Sie es wieder mit hinzu -fx?

    – l’l’l

    7. Januar 2016 um 6:04 Uhr

  • @l’L’l Da kann die Erweiterung des Bildes sein .png oder .gif oder .jpeg.

    – Tuschar

    7. Januar 2016 um 6:06 Uhr

  • @Tushar: Trotzdem könnte eine einfache Regex damit umgehen … lastIndexOf könnte aber die bessere lösung sein.

    – l’l’l

    7. Januar 2016 um 6:07 Uhr


Benutzer-Avatar
Tushar

Sie können verwenden .attr( attributeName, function ) mit Callback-Funktion, um den Attributwert des jeweiligen Elements zu aktualisieren. Um die Zeichenfolge hinzuzufügen -fx im src-Attribut, String#lastIndexOf und String#substring kann verwendet werden.

// Get the src attribute value of image one by one
$('img').attr('src', function(i, src) {
  // Get the index of the last .
  var lastIndex = src.lastIndexOf('.');

  // Add the string before the last .
  // Return updated string, this will update the src attribute value
  return src.substr(0, lastIndex) + '-fx' + src.substr(lastIndex);
});
img {
  height: 100px;
  width: 100px;
  background: red;
}
img[src$="-fx.jpg"] {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="https://stackoverflow.com/questions/34648186/extension.jpg" />
<img src="https://stackoverflow.com/questions/34648186/ext.ension.jpg" />

Notiz: Der verwendete Selektor img[src*="-fx.jpg"] wählt alle Bilder aus, deren src Attributwert enthält die angegebene Zeichenfolge an beliebiger Stelle. So wählen Sie Bilder aus, deren src Wert endet mit gegebenem String, use $= Wähler.

img[src$="-fx.jpg"]
       ^

Wenn Sie Regex verwenden möchten, kann der folgende Regex verwendet werden.

(\.(?:jpe?g|png|gif))$/

Demo

// Get the src attribute value of image one by one
$('img').attr('src', function(i, src) {
  return src.replace(/(\.(?:jpe?g|png|gif))$/, "-fx$1");
});
img {
  height: 100px;
  width: 100px;
  background: red;
}
img[src$="-fx.jpg"] {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="https://stackoverflow.com/questions/34648186/extension.jpg" />
<img src="https://stackoverflow.com/questions/34648186/ext.ension.jpg" />

Benutzer-Avatar
Abhinav

So können Sie es tun, indem Sie verwenden lastIndexOf und ‘substring’-Funktionen in Javascript. Ich habe gerade Ihre Geige aktualisiert. Schau es dir an

lastIndexOf -> erhält die Position des Zeichens . und dann können Sie mit der Substring-Funktion verbinden, um das gewünschte Ergebnis zu erhalten

$('img').each(function(){
    var a = $(this).attr('src');
    var pos = a.lastIndexOf('.');
    var newchar = a.substring(0,pos)+'-fx';
    var replacingchar = newchar+a.substr(pos);
    console.log(replacingchar);

});

JS GEIGE

Sie können beim letzten Vorkommen von trennen. mit:

split = str.match(/(.*)\.(.*)/)

Wenn es überhaupt mindestens einen gibt . (in der RegExp angegeben als \.), ist das Ergebnis ein Array, dessen Element 2 alles vor dem letzten ist . und Element 3 ist alles danach.

Sie können es gerne versuchen

var k="ext.abc.jpg";
var l= k.substring(0, k.lastIndexOf("."))+"-fx"+k.substring(k.lastIndexOf(".") , k.length);;
console.log(l);

Hier teile ich die Zeichenfolge in zwei Teile, zuerst ist ein Teil, der vor .jpg steht, und füge dann “-fx” hinzu und füge dann den letzten Teil hinzu, einschließlich “.”;

1121760cookie-checkBeim letzten Auftreten des Zeichens trennen und dann verbinden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy