Split at last occurrence of character then joins

Question

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

In the demo, I would like to split the src attribute in the last entry . and then add -fx to the src path.

original src attributes

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

what i hope to get

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

To be more specific, the problem is that if I split('.') And the path has several problems . ( -fx not appended 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 a callback function to update the attribute value of the corresponding element. To add the -fx string to the src attribute, String#lastIndexOf and 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" /> 

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

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

---

If you want to use regex, you can use regex.

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

Here's how you can do it using the lastIndexOf and 'substring' functions in javascript. I just updated my violin. take a look at this

lastIndexOf → will get the character position . and then using the substring function you can join to get the 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 try

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

Here, I split the line into two parts, first the part that comes before the .jpg, and then adding the "-fx" to it, and then adding the last part, including the ".";

Answer 4

You can smash at the last entrance. with:

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

If in fact there is at least one . (specified in RegExp as \. ), the result will be an array from which element 2 is all to the last . , and element 3 - everything after it.