在最后一次出现角色时拆分然后加入

时间:2016-01-07 05:50:19

标签: javascript jquery css regex

我想在最后一个字符处分割private var _highlighted: Bool = false var highlighted: Bool { @objc(isHighlighted) get { return _highlighted } @objc(setHighlighted:) set { _highlighted = newValue // Now configure the view based on the new value... } } ,然后添加一个字符串并将数组重新连接在一起。这是一个简化的 demo

在演示中,我想在attribute的最后一次出现时拆分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;
}

4 个答案:

答案 0 :(得分:13)

您可以使用带有回调函数的.attr( attributeName, function )来更新相应元素的属性值。要在src属性中添加字符串-fx,可以使用String#lastIndexOfString#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" />
&#13;
&#13;
&#13;

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

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

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

(\.(?:jpe?g|png|gif))$/

Demo

&#13;
&#13;
// 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");
});
&#13;
img {
  height: 100px;
  width: 100px;
  background: red;
}
img[src$="-fx.jpg"] {
  background: blue;
}
&#13;
<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" />
&#13;
&#13;
&#13;

答案 1 :(得分:6)

您可以使用lastIndexOf和&#39; substring&#39;来实现此目的。 javascript中的函数。我刚刚更新了你的小提琴。看看吧

lastIndexOf - &gt;将获得角色.的位置,然后使用子串函数,您可以加入以获得所需的结果

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

答案 2 :(得分:1)

您可以在最后一次出现时拆分。用:

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

如果实际上至少有一个.(在RegExp中表示为\.),结果将是一个数组,其中元素2是最后一个.之前的所有内容元素3就是它之后的一切。

答案 3 :(得分:0)

您可以尝试

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

这里我将字符串分为两部分,首先是.jpg之前的部分,然后添加&#34; -fx&#34;然后添加最后一部分,包括&#34;。&#34;;