JSの正規表現で文字列からマイナス記号を含んだ数値を取り出したいが、ハイフンが入った文字列は区別したい

Question

left:-10.55555px; font-size:30px; top:40px;

JSの正規表現で上記の文字列に対して以下のことをしたいです。

• マイナス（-）と小数点を含んだ数値のブロックをすべて取り出す
• マイナスと小数点を含んだ数値でなく、文字列にハイフンを0個以上含んでいる箇所にすべてマッチさせる

2点目は要するに「font-size」をハイフンを含んだひとまとまりとしたいということです。

ためしに作った正規表現では文字列内のハイフンで分割されてしまいうまくいきませんでした。
/[^(-*\d).]+/gi

アイディアある方いればお願いいたします。

Comments

[naomi3]

文字列にハイフンを0個以上含んでいる箇所とは、あらゆる文字、空文字列もその対象になりますが、そういうことですか？

[yambejp]

結果として何を得たいのでしょうか？

[gouf]

対象としている文字列は、CSS のスタイル設定値に見えますが、状況としては、HTML のインライン要素として埋め込まれていたりするのでしょうか

Answer 1

正規表現へこだわりがなければ、「;」で分割した後「:」で再分割して
値の部分だけチェックすればよいような気がしますけどね

sample

var str="left:-10.55555px; font-size:30px; top:40px; right:-40px; margin-right:1.5px; ";
var a=str.replace(/^\s+|;?\s*$/,'').split(/\s*;\s*/);
b=a.filter(function(i,j){
  return !i.split(":")[1].match(/-\d|\d\.\d/);
});
console.log(b.join("; "));

Comments

[merry]

ありがとうございました。

詳しいコードまでありがとうございます。
無理に正規表現にこだわらないという意見が参考になりました。

Answer 2

簡易版コード

質問文にある文字列ならば下記正規表現で可能ですが、簡易コード故に複数の数値が指定された場合に対応できません。

var string = 'left:-10.55555px; font-size:30px; top:40px; margin: -10em -1em 3em 2em;';
var lengthList = string.match(/-(?:\d+|\d*\.\d+)[a-z]+(?=\s*(?:;|$))/g);

console.log(lengthList);  // ["-10.55555px"]

正攻法なコード

既に指摘されている通り、CSSのプロパティ名/プロパティ値でパースしてから、プロパティ値から負の数値を複数抽出可能です。

下記コードは CSS 2.2 の Syntax (構文) を元に書いたコードです。
全てのSyntaxを考慮していない簡易版ですが、先の簡易コードよりはマシです。
より洗練されたコードにする為には仕様書にある構文を読んで修正して下さい。

• 構文と基本データ型 - Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification 日本語訳

function parseDeclarationList (declarationListString) {
  var reg = /(-?[_a-z][_a-z\d]*(?:-[_a-z][_a-z\d]*)*)\s*:\s*([^;]+)/g,
      declarationList = [],
      declaration;

  while (declaration = reg.exec(declarationListString)) {
    declarationList.push([declaration[1], declaration[2]])
  }

  return declarationList;
}

function findMinusValues (declarationListString) {
  var valueList = [];

  for (var i = 0, declarationList = parseDeclarationList(declarationListString), len = declarationList.length, reg = /-(?:\d+|\d*\.\d+)[a-z]+/g, value; i < len; ++i) {

    if (value = reg.exec(declarationList[i][1])){
      valueList.push(value[0]);
    }
  }

  return valueList;
}

var string = 'left:-10.55555px; font-size:30px; top:40px; margin: -10em -1em 3em 2em;';
console.log(findMinusValues(string));  // ["-10.55555px", "-10em"]

Re: merry さん

Comments

[merry]

短時間で複雑なコード例をありがとうございます。

自分の質問方法がわかりづらかったせいで
若干意図と違いましたがループとexecの使用方法が参考になりました！

Answer 3

• マイナス（-）と小数点を含んだ数値のブロックをすべて取り出す

正規表現:-?\d+\.?\d*
-? マイナスがついたりつかなかったり
\d+ 数値が１つ以上
.? ピリオドがあったりなかったり
\d* 数値が0つ以上

そこそこ精度が高いです。

• マイナスと小数点を含んだ数値でなく、文字列にハイフンを0個以上含んでいる箇所にすべてマッチさせる

正規表現:[^(\-*\d)\.]+こちらは、
( 始めカッコ記号
) 終わりカッコ記号
- ハイフン
\d 数値
. ピリオド
以外(^)の1つ以上連続した文字列という意味です。
ハイフンを除いているので、ハイフンが含まれないわけです。

そこまで短縮しようと難しく考えず、単純な実装で構いません。
正規表現:[-a-zA-Z]+
こちらは質問者さんの考えに近いと思いますが、-にもマッチしてしまいます。
正規表現:[a-zA-Z]+(-[a-zA-Z]+)*
こちらはAAAやAA-Aにマッチしますが、AAA-にはマッチしません。

Comments

[merry]

詳しくありがとうございます。

>>>マイナスと小数点を含んだ数値でなく、文字列にハイフンを0個以上含んでいる箇所にすべてマッチさせる

手こずっていたこの課題もいただいた正規表現を若干調整させていただいて解決しました。
[a-zA-Z]+(-[a-zA-Z]+)*
↓
[a-zA-Z\s\;\:]+(-[a-zA-Z\s\;\:]+)*

数値部分の取得も完璧でした。

[intelf___]

コメントをしようとして2回投稿しちゃってました
うまく動作したようで何よりです。
sublime textやサクラエディタのようにctrl+fで正規表現検索ができると試行がしやすいですよ

[merry]

あれからCSSテキストにtranslate3dなどプロパティに数字が入ってしまうものがあることに気づきましたのでそれに対応するようにさらに手を加えました。

正規表現は使えるとできることが増えますね。
ありがとうございました。

Answer 4

上のものは
-?\d+(.\d)?\d*
こちらで数値がピリオドで終わるのを除外できます。