2

文字列がある場合、文字rgba(111,222,333,0.5)列から個々の色を抽出するにはどうすればよいですか？

red => 111
green => 222
blue => 333
opacity => 0.5

これにはきちんとしたクリーンなソリューションを使用できるようにしたいので、正規表現が最適だと思いますか？

4

6 に答える 6

10

予測可能な文字列の正規表現は避け、次のことをお勧めします。

// assigning the rgb() colour to a variable:
var colorString = "rgba(111,222,333,0.5)",

    // using String.prototype.substring() to retrieve
    // the substring between the indices of the opening
    // and closing parentheses:
    colorsOnly = colorString.substring(
        // here we find the index of the opening
        // parenthesis, and add 1 to that index
        // so that the substring starts after that
        // parenthesis:
        colorString.indexOf('(') + 1,

        // and terminating the substring at the
        // index of the closing parenthesis:
        colorString.lastIndexOf(')')
      // here we split that substring on occurrence
      // of a comma followed by zero or more white-
      // space characters:
      ).split(/,\s*/),

    // String.prototype.split() returns an Array,
    // here we assign those Array-elements to the
    // various colour-, or opacity-, variables:
    red = colorsOnly[0],
    green = colorsOnly[1],
    blue = colorsOnly[2],
    opacity = colorsOnly[3];

JS フィドルのデモ。

または、オブジェクトを返す必要がある場合:

var colorString = "rgba(111,222,333,0.5)",
  colorsOnly = colorString.substring(colorString.indexOf('(') + 1, colorString.lastIndexOf(')')).split(/,\s*/),
  // here we initialise an empty Object:
  components = {};
// here we assign the Array-elements to the
// named properties of that Object:
components.red = colorsOnly[0];
components.green = colorsOnly[1];
components.blue = colorsOnly[2];
components.opacity = colorsOnly[3];

console.log(colorsOnly, components);

JS フィドルのデモ。

より現代的な JavaScript を使用するように編集:

const colorString = "rgba(111,222,333,0.5)",
  // here we use destructuring assignment to assign the returned Array-elements
  // - in respective order - to the named variables:
  [red, green, blue, opacity] = colorString.substring(colorString.indexOf('(') + 1, colorString.lastIndexOf(')')).split(/,\s*/),
  // passing the variables into the Object Literal; in this instance
  // we're passing in the variables which are the literal name of the
  // properties they define and which also contain the relevant value:
  colorObject = {
    red,
    green,
    blue,
    opacity
  };
console.log(red, green, blue, opacity, colorObject);

参考文献:

于 2012-09-10T16:00:11.157 に答える
3

これの正規表現は次のようになります。

^rgba\(([^,]+),([^,]+),([^,]+),([^,]+)\)$

Javascript コード:

var regex = /^rgba\(([^,]+),([^,]+),([^,]+),([^,]+)\)$/g; 
var input = "rgba(111,222,333,0.5)"; 
if(regex.test(input)) {
  var matches = input.match(regex);
  for(var match in matches) {
    alert(matches[match]);
  } 
} else {
  alert("No matches found!");
}

JavaScript で必要な RGBA 値を取得するために、一致をトリミングしたり、値を数値に変換したりすることが必要な場合があります。

RegexHeroでこれで遊んでください

正規表現自体でパラメータ間のスペースを処理したい場合は、次のように見苦しく見えるかもしれません:

^rgba\(\s*([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^,\s]+)\s*\)$
于 2012-09-10T15:56:26.440 に答える
0

Ahmed Bilal の回答については、修正する必要があります。間違っている場合は、お気軽に修正してください。:)

そのはず：

    var colorsOnly = colorString.split(")");
    var colorsOnly = colorString.split("(");
    var colorsOnly = colorsOnly[1].split(",");

4 番目の文の変更に注目してください。ColosOnly から 3 番目の文は "(" 分割後の結果を表しています。したがって、3 番目の文にある必要があると思いますcolorsOnly[1]。自分で試してみて、証明されました。

繰り返しますが、私が間違っている場合は、お気軽に修正してください! :)

于 2014-11-07T00:16:28.913 に答える
-1

常に rgba 形式の場合、次のようなことができます。

var str = 'rgba(111,222,333,0.5)'

var red = str.substr(5,3);
var green = str.substr(9,3);
var red = str.substr(13,3);
于 2012-09-10T16:00:01.843 に答える