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