Split at last occurrence of character then join

Question

I would like to split an attribute at the last occurrence of a character, then add a string and join the array back together. Here is a simplified demo .

In the demo I would like to split the src attribute at the last occurrence of the . and then add -fx to the src path.

original src attributes

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

what I am hoping to get

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

To be more specific, the issue is that if I split('.') and the path has multiple . problems arise ( -fx not added properly).

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

Answer 1

You can use .attr( attributeName, function ) with callback function to update the attribute value of respective element. To add the string -fx in the src attribute, String#lastIndexOf and String#substring can be used.

 // 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" /> 

Note: The selector used img[src*="-fx.jpg"] will select all the images whose src attribute value contains the given string anywhere. To select images whose src value ends with given string, use $= selector.

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

---

If you want to use regex, following regex can be used.

(\.(?: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" /> 

Answer 2

This is how you can do it by using lastIndexOf and 'substring' functions in javascript. I have just updated your fiddle. take a look at it

lastIndexOf -> will get the position of the character . and then using substring function you can join to get your desired result

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

Answer 3

You can split at the last occurrence of . with:

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

If there is in fact at least one . (indicated in the RegExp as \\. ), the result will be an array of which element 2 is everything before the last . and element 3 is everything after it.

Answer 4

You Can try like

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

Here i am dividing string into two parts first is a portion which is before .jpg and then adding "-fx" into that then adding last part including ".";