jquery - 画像名を解析するjQueryとRegEX

Question

幅、高さ、拡張子を含む画像名を解析し、それらの値を変数に割り当てるコードのjQueryスニペットを作成しようとしています。

画像名の形式：DSCN0551-130x130.jpg（name-widthxheight.extension）

幅、高さ、延長を引っ張って変数に割り当てたいと思います。

Answer 1

var str = 'DSCN0551-130x130.jpg';
var matches = str.match(/(.+)-(\d+)x(\d+)\.(\w+)$/);
var name = matches[1];
var width = matches[2];
var height = matches[3];
var extension = matches[4];

最後にアンカーを追加することで、基本的に右から左に正規表現を読み取ることができます。そして、-構造に関連する左端の後に、.+残っているものと一致します（どの文字でも）。

Answer 2

これを使って：

ライブデモ: http://jsfiddle.net/oscarj24/dL89D/1/

var imgName = "DSCN0551-130x130.jpg";
var args = imgName.match(/(.*)-(.*)x(.*)\.(.*)/).slice(1);

alert("name: " + args[0] + //name: DSCN0551
      " width: " + args[1] + //width: 130
      " height: " + args[2] + //height: 130
      " extension: " + args[3]);​ //extension: jpg

Answer 3

var g='DSCN0551-130x130.jpg'.match(/([0-9]+)x([0-9]+)\.([a-z]+)/i)
//g[1] = width
//g[2] = height
//g[3] = ext

以上: 最初に一致したものだけを見つけたい場合は、代わりに regexp.exec(string) を使用することをお勧めします。

var g=/([0-9]+)x([0-9]+)\.([a-z]+)/i.exec('DSCN0551-130x130.jpg')
//g[1] = width
//g[2] = height
//g[3] = ext

Answer 4

var img = "DSCN0-551-130x130.jpg";

var props = img.split(/-(\d+)x(\d+)\./);

var name = props[0];
var width = props[1];
var height = props[2];
var extension = props[3];