web-dev-qa-db-fra.com

Diviser à la dernière apparition du personnage puis rejoindre

J'aimerais scinder une attribute à la dernière occurrence d'un caractère, puis ajouter une chaîne et joindre le tableau. Voici une démo simplifiée.

Dans la démo, j'aimerais scinder l'attribut src lors de la dernière occurrence du ., puis ajouter -fx au chemin src.

attributs src d'origine

src="extension.jpg"src="ext.ension.jpg"

ce que j'espère obtenir

src="extension-fx.jpg"src="ext.ension-fx.jpg"

Pour être plus précis, le problème est que si je split('.') et que le chemin a plusieurs problèmes ., le problème survient (-fx n'est pas ajouté correctement).

$('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="extension.jpg">
<img src="ext.ension.jpg">

javascriptjquerycssregex
8
justinw

Vous pouvez utiliser .attr( attributeName, function ) avec la fonction de rappel pour mettre à jour la valeur d'attribut de l'élément respectif. Pour ajouter la chaîne -fx dans l'attribut src, vous pouvez utiliser String#lastIndexOf et String#substring .

// 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="extension.jpg" />
<img src="ext.ension.jpg" />

Remarque: Le sélecteur utilisé img[src*="-fx.jpg"] sélectionnera toutes les images dont la valeur de l'attribut src contient la chaîne donnée n'importe où. Pour sélectionner des images dont la valeur src se termine par une chaîne donnée, utilisez le sélecteur $=.

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

Si vous voulez utiliser regex, vous pouvez utiliser regex suivant.

(\.(?: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="extension.jpg" />
<img src="ext.ension.jpg" />

11
Tushar

Voici comment vous pouvez le faire en utilisant les fonctions lastIndexOf et 'sous-chaîne' en javascript. Je viens de mettre à jour votre violon. jetez un coup d'oeil

lastIndexOf -> obtiendra la position du caractère . puis utilisera la fonction de sous-chaîne que vous pourrez rejoindre pour obtenir votre résultat

$('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 FIDDLE

6
Abhinav

Vous pouvez diviser à la dernière occurrence de. avec:

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

S'il existe en fait au moins un . (indiqué dans la RegExp par \.), le résultat sera un tableau dont l'élément 2 est tout ce qui précède le dernier . et l'élément 3 est tout ce qui le suit.

1
Adam Leggett

Vous pouvez essayer comme

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

Ici, je suis en train de diviser une chaîne en deux parties, une partie qui est avant .jpg, puis en ajoutant "-fx" à cette dernière, puis en ajoutant la dernière partie, y compris ".";

0
Roli Agrawal