在最后一次出现字符时拆分然后加入答案

【问题标题】：Split at last occurrence of character then join在最后一次出现字符时拆分然后加入
【发布时间】：2016-04-11 10:22:36
【问题描述】：

我想在最后一次出现字符时拆分attribute，然后添加一个字符串并将数组重新连接在一起。这是一个简化的demo。

在演示中，我想在. 的最后一次出现处拆分src 属性，然后将-fx 添加到src 路径中。

原src属性

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

我希望得到什么

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

更具体地说，问题是如果我split('.') 和路径有多个. 出现问题（-fx 未正确添加）。

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

【问题讨论】：

你能添加一个输入字符串和预期输出的例子
@Tushar 在演示中有一个例子，但我也会在这里添加到帖子中
为什么不直接用.jpg分割，然后用-fx加回来？
@l'L'l 因为，图片的扩展名可以是.png或.gif或.jpeg。
@Tushar：即便如此，一个简单的正则表达式也可以处理...lastIndexOf 可能是一个更好的解决方案。

标签： javascript jquery css regex

【解决方案1】：

您可以在 .与：

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

如果事实上至少有一个.（在正则表达式中表示为\.），则结果将是一个数组，其中元素 2 是最后一个 . 之前的所有内容，而元素 3 是它之后的所有内容.

【讨论】：

【解决方案2】：

您可以使用.attr( attributeName, function ) 和回调函数来更新各个元素的属性值。要在src属性中添加字符串-fx，可以使用String#lastIndexOf和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" />

注意： 使用img[src*="-fx.jpg"] 的选择器将在任意位置选择src 属性值包含给定字符串的所有图像。要选择src 值以给定字符串结尾的图像，请使用$= 选择器。

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

如果要使用正则表达式，可以使用以下正则表达式。

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

【讨论】：

【解决方案3】：

你可以试试

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

这里我将字符串分成两部分，首先是 .jpg 之前的部分，然后在其中添加“-fx”，然后添加最后一部分，包括“.”；

【讨论】：

【解决方案4】：

这是您可以通过在 javascript 中使用 lastIndexOf 和“子字符串”函数来实现的方法。我刚刚更新了你的小提琴。看看吧

lastIndexOf -> 将获取字符. 的位置，然后使用子字符串函数可以加入以获得所需的结果

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

【讨论】：