Question

I parse CSS background-image, which support multi Value, which may be none and function (e url(> and linear-gradient(>), with multi comma-separated debate? 我看不出这样做是正确的。测试案例如下:

  linear-gradient(top left, red, rgba(255,0,0,0))
, url(a)
, image(url(b.svg),  b.png  150dpi,  b.gif , rgba(0,0,255,0.5))
, none

Which I d want to convert to the following array:

[
      "linear-gradient(top left, red, rgba(255,0,0,0))"
    , "url(a)"
    , "image(url(b.svg),  b.png  150dpi,  b.gif , rgba(0,0,255,0.5))"
    , "none"
]

Answer 1

function split (string) {
    var token = /((?:[^" ]|".*?"| .*? )*?)([(,)]|$)/g;
    return (function recurse () {
        for (var array = [];;) {
            var result = token.exec(string);
            if (result[2] ==  ( ) {
                array.push(result[1].trim() +  (  + recurse().join( , ) +  ) );
                result = token.exec(string);
            } else array.push(result[1].trim());
            if (result[2] !=  , ) return array
        }
    })()
}

split("linear-gradient(top left, red, rgba(255,0,0,0)), url(a), image(url" +
      "(b.svg),  b.png  150dpi,  b.gif , rgba(0,0,255,0.5)), none").toSource()

["linear-gradient(top left,red,rgba(255,0,0,0))", "url(a)",
 "image(url(b.svg), b.png  150dpi, b.gif ,rgba(0,0,255,0.5))", "none"]

Answer 2

Looking at the current W3C Candidate Recommendation for CSS3 (in particular, see background-image and uri), it is structured as follows:

<background-image> = <bg-image> [ , <bg-image> ]* 
<bg-image> = <image> | none
<image> = <url> | <image-list> | <element-reference> | <image-combination> | <gradient>

...... http://www.w3.org/TR/cs3-images/#image“rel=“nofollow noreferer”>here。

EDIT:

届时,你将需要为配对母体或<代码>none而进行校服,而前者则不可能有校准。这个员额有一套计算法:。灰色带括号。

Answer 3

我知道,这个问题很老,但如果你 over倒,需要另一种解决办法,你可以使用:

let mydiv = document.getElementById( mydiv ),
  result = document.getElementById( result ),
  bgImageArray = getBackgroundImageArray(mydiv);

console.log(bgImageArray);

result.innerHTML = bgImageArray.join( <hr> );

function getBackgroundImageArray(el)
{
    // get backgroundImageStyle
    let bgimg_style = getComputedStyle(el).backgroundImage,
        // count for parenthesis
        parenthesis = -1;

    // split background by characters...
    return bgimg_style.split(  ).reduce((str_to_split, character) => {
        // if opening parenthesis
        if(character ===  ( ) {
            // if first opening parenthesis set parenthesis count to zero
            if(parenthesis === -1) {
                parenthesis = 0;
            }
            // add 1 to parenthesis count
            parenthesis++;
        }
        // for closing parenthesis reduce parenthesis count by 1
        else if(character ===  ) ) {
            parenthesis--;
        }
        else {
            // if current character is a comma and it is not inside a parenthesis, at a "split" character
            if(character ===  , ) {
                if(parenthesis === 0) {
                    str_to_split +=  || ;
                    return str_to_split;
                }
            }
        }
    
        // else keep the character
        str_to_split += character;
    
        return str_to_split;
    },   )
    // split the resulting string by the split characters including whitespaces before and after to generate an array
    .split(/s*||s*/);
}

#mydiv {
  height: 75px;
  background-image:
    /* first bg image */
    linear-gradient(90deg, rgba(28,221,218,1) 0%, rgba(45,109,210,1) 35%, rgba(0,212,255,1) 100%),
    
    /* second bg image */
    -webkit-image-set(url(nothing.jpg) 1x, url(everything.png) 2x),

    /* third bg image */
    url( there/is/an/image.svg );
    
}

<div id="mydiv"></div>

<p>See in console for actual result array, below is the array splitted by &lt;hr&gt;</p>

<div id="result"></div>

友情链接