analyse des mesures css

Question

Lorsque j'écris un plugin jQuery j'aime spécifier les options pour les espacements de la manière CSS. J'ai écrit une fonction qui renvoie une chaîne CSS en tant que valeurs dans un objet.

5px 10px rendements top: 5px, droite: 10px, en bas: 5px, à gauche: 10px

Maintenant j'utilise souvent les valeurs renvoyées pour faire des calculs et ce ne est pas très agréable d'avoir à extraire l'unité de mesure tous les temps ...

I suck par écrit des expressions régulières quelqu'un pourrait me aider à terminer cette fonction:

this.cssMeasure = function(cssString, separateUnits){ 

    if (cssString){ 
     var values = {} 
    }else{ 
     return errorMsg 
    } 

    var spacing = cssString.split(' ') 
    var errorMsg = 'please format your css values correctly dude' 

    if(spacing[4]) { 
     return errorMsg 
    } else if (spacing[3]) { 
     values = {top: spacing[0], right:spacing[1], bottom:spacing[2], left:spacing[3]} 
    } else if (spacing[2]) { 
     values = {top: spacing[0], right:spacing[1], bottom:spacing[2], left:spacing[1]} 
    } else if (spacing[1]) { 
     values = {top: spacing[0], right:spacing[1], bottom:spacing[0], left:spacing[1]} 
    } else { 
     values = {top: spacing[0], right:spacing[0], bottom:spacing[0], left:spacing[0]} 
    } 

    if (separateUnits) { 
     $.each(values, function(i, value){ 
      /* 
      at this place i need to extract the measuring unit of each value and return them separately 
      something like top: {value: 10, unit: 'px'}, right: {bla} and so on 
      */ 
     }) 
    } 

    return values 

} 

si vous avez une idée pour améliorer cette fonction, je suis ouvert à vos commentaires.

Answer 1

Selon http://www.w3.org/TR/css3-values/#ltnumbergt « Un certain nombre peut être un nombre entier, ou il peut être suivie de zéro ou plusieurs chiffres par un point (.) Suivi d'un ou plusieurs chiffres », en langage regexp

\d+|\d*\.\d+ 

Ajoutons un signe facultatif, et rendre le groupe « non-capture » pour rendre l'analyse plus simple

([+-]?(?:\d+|\d*\.\d+)) 

Énumérer toutes les unités possibles est fastidieuse, donc laissez l'appareil une suite quelconque des lettres minuscules (y compris aucun) ou un pour cent signe

([a-z]*|%) 

Mettre tous ensemble,

propRe = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/ 

Lorsque vous appliquez cela à une valeur

parts = "+12.34em".match(propRe) 

la valeur numérique sera parties [1] et l'unité dans les parties [2]

Answer 2

switch (spacing.length) { 
case 1: 
    values = {top: spacing[0], right:spacing[0], bottom:spacing[0], left:spacing[0]}; 
    break; 
case 2: 
    values = {top: spacing[0], right:spacing[1], bottom:spacing[0], left:spacing[1]}; 
    break; 
case 3: 
    values = {top: spacing[0], right:spacing[1], bottom:spacing[2], left:spacing[1]}; 
    break; 
case 4: 
    values = {top: spacing[0], right:spacing[1], bottom:spacing[2], left:spacing[3]}; 
    break; 
default: 
    return errorMsg; 
} 

if (separateUnits) { 
    values = $.map(values, function(i, value){ 
     matches = value.match(/([-+]?[\d.]*)(.*)/); 
     return {value: matches[1]+0, 
       unit: matches[2] ? matches[2] : 'px'}; 
    }) 
}