Combat d'expressions régulières PHP : correspondance des styles CSS

Dans le développement Web, les feuilles de style CSS font partie intégrante, qui peuvent facilement styliser les éléments HTML. Cependant, nous devons parfois extraire des styles spécifiques d'un gros fichier CSS, nous pouvons alors utiliser la fonction d'expression régulière de PHP pour la correspondance. Cet article explique comment utiliser les expressions régulières PHP pour faire correspondre les styles CSS dans la pratique.

Jetons d'abord un coup d'œil à la structure de base des styles CSS :

selector {
    property: value;
    property: value;
}

Un style CSS de base se compose d'un sélecteur et d'un ensemble de paires attribut-valeur. Le sélecteur spécifie l'élément HTML auquel le style doit être appliqué, et la paire attribut-valeur correspond au paramètre de style spécifique. En CSS, les attributs et les valeurs sont séparés par un deux-points ":", et chaque paire attribut-valeur est séparée par un point-virgule ";".

Ensuite, nous utilisons un exemple pour illustrer comment utiliser les expressions régulières PHP pour faire correspondre les styles CSS.

Supposons que nous ayons un fichier CSS (style.css) qui contient les styles suivants :

h1 {
    font-size: 24px;
    font-family: Arial, sans-serif;
    color: #333;
}

p {
    font-size: 16px;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.4;
    color: #666;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #f00;
    color: #fff;
}

Maintenant, nous devons extraire tous les styles de catégorie ".btn" de ce fichier. Vous pouvez utiliser la fonction file_get_contents de PHP pour lire l'intégralité du contenu du fichier, puis utiliser la fonction preg_match_all pour faire correspondre.

// 读取样式文件内容
$css = file_get_contents('style.css');

// 匹配样式
$pattern = '/.btns*{([^}]+)}/';
preg_match_all($pattern, $css, $matches);

// 输出匹配结果
print_r($matches[0]);

Dans le code ci-dessus, utilisez d'abord la fonction file_get_contents pour lire le contenu du fichier de style et enregistrez le contenu dans la variable $css. Ensuite, utilisez la fonction preg_match_all pour faire correspondre le style, et l'expression régulière construite est ".btns*{(¹+)}":

• .btn" correspond au sélecteur de la catégorie ".btn".
• "s*" correspond à 0 ou plusieurs caractères d'espacement ;
• "{(¹+)}" correspond à un ensemble de paires attribut-valeur entre accolades, où "¹+" signifie Faites correspondre n'importe quel caractère à l'exception de l'accolade droite "}" et ajoutez le crochet "()" pour enregistrer le résultat correspondant dans le tableau $matches.

Enfin, affichez les résultats correspondants.

Exécutez le code ci-dessus et les résultats sont les suivants :

Array
(
    [0] => .btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #f00;
    color: #fff;
}
)

Comme le montrent les résultats, l'expression régulière a réussi à correspondre au style de la catégorie ".btn" et a renvoyé l'intégralité du bloc de style.

Bien sûr, nous pouvons également extraire davantage les paires attribut-valeur.

// 读取样式文件内容
$css = file_get_contents('style.css');

// 匹配样式
$pattern = '/.btns*{([^}]+)}/';
preg_match_all($pattern, $css, $matches);

// 提取属性-值对
$pattern = '/([a-z-]+)s*:s*([^;]+);/';
foreach ($matches[1] as $block) {
    preg_match_all($pattern, $block, $props);
    print_r($props);
}

Dans le code ci-dessus, nous utilisons une autre expression régulière "([a-z-]+)s:s(²+);" pour faire correspondre les paires attribut-valeur :

• "( [a-z -]+)" correspond au nom de l'attribut, où "[a-z-]+" signifie correspondre à une chaîne composée de lettres minuscules et d'un tiret "-", et l'ajout de crochets "()" signifie enregistrer le résultat correspondant dans le tableau $props Dans le premier élément ;
• "s:s" correspond aux deux points : : entre le nom de l'attribut et la valeur de l'attribut, qui peut contenir 0 ou plusieurs caractères vides 
•  (² +) ; correspond à la valeur de l'attribut, où "²+" signifie correspondre à n'importe quel caractère à l'exception du point-virgule ";", et ajouter des crochets "()" signifie enregistrer le résultat correspondant dans le second de l'élément de tableau $props ;
• Le dernier point-virgule ";" est utilisé pour ignorer l'accolade fermante "}" à la fin du bloc de style.

Ici, nous utilisons une boucle foreach pour parcourir tous les blocs de style, extraire les paires attribut-valeur de chaque bloc de style et afficher les résultats.

Exécutez le code ci-dessus, les résultats sont les suivants :

Array
(
    [0] => Array
        (
            [0] => display: inline-block;
            [1] => padding: 10px 20px;
            [2] => border: none;
            [3] => border-radius: 4px;
            [4] => font-size: 16px;
            [5] => font-weight: bold;
            [6] => text-transform: uppercase;
            [7] => background-color: #f00;
            [8] => color: #fff;
        )

    [1] => Array
        (
            [0] => display
            [1] => padding
            [2] => border
            [3] => border-radius
            [4] => font-size
            [5] => font-weight
            [6] => text-transform
            [7] => background-color
            [8] => color
        )

    [2] => Array
        (
            [0] => inline-block
            [1] => 10px 20px
            [2] => none
            [3] => 4px
            [4] => 16px
            [5] => bold
            [6] => uppercase
            [7] => #f00
            [8] => #fff
        )

)

Comme le montrent les résultats, nous avons réussi à extraire les paires attribut-valeur dans le style de la catégorie ".btn", et à enregistrer les résultats en $ selon au nom de l'attribut et à la valeur de l'attribut dans les premier et deuxième éléments du tableau props.

Grâce aux exemples ci-dessus, nous avons appris à utiliser les expressions régulières PHP pour faire correspondre les styles CSS. Je pense que tout le monde maîtrise les compétences de base pour construire des expressions régulières et effectuer une correspondance de style et une extraction d'attributs. Dans le développement réel, nous pouvons également effectuer des opérations de correspondance et d'extraction plus complexes selon les besoins pour répondre aux besoins de traitement de différents styles.

1. } ↩
2. ↩

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!