用于替换HTML代码中CSS类的正则表达式

Question

I am looking for a regular expression for preg_replace in php which replaces class-names in html files with minified classnames. I do this in a css-minifying process. I got an associative array with the class-names as keys and the replacements as values. Ie:

$myReplacements = array('fonts' => 'f', 'label' => 'l', 'tiny' => 't')

These replacements should only be done on exact match, but not on a class like 'fonts-small-size'. My regular expression for that is:

/"((.*[^"]?)?(\} | |\}))?fonts(( \{| |\{)(.*[^"])?)?"/

with the replaceregex:

"$2$3f$5$6"

--

I got a second associative array with replacements which should be done also for classes only starting with it:

$forcedReplacements = array('ui-icon-' => 'ui-')

This replacements should be done on classes like 'ui-icon-thumbs-up' and should be replaced with 'ui-thumbs-up'. My regular expression for that is:

/"(.*)ui-icon-(.*)"/

with the replaceregex:

"$1ui-$2"

The HTML file i want to replace this class names in has the following content:

{if !$isSmallFontCheckDisabled}
    <span class="{if $smallFontFromCharacters}fonts tiny{/if}{if $hasStandardLabel} fonts label{/if}">
{/if}

This is a small simple snippet of one of my template files. As you can see i use smarty as template engine. So, also the smarty syntax has to be considered in my regular expression.

In most cases the replacements work pretty good. I have a problem if i got a template file with the class attribute containing the same class twice (This may happen if i got a if/else-smarty-block). Then only one of the two is replaced.

The template snippet above is replaced to:

{if !$isSmallFontCheckDisabled}
    <span class="{if $smallFontFromCharacters}fonts t{/if}{if $hasStandardLabel} f l{/if}">
{/if}

May anyone help me with my regular expression for replacing all occurences of the templates?

Answer 1

You don't want to use preg_replace, you want to use preg_replace_callback(). Pull the class attribute out of the tag, split on whitespace, process each element of the resulting array and then paste it back together. Something like this...

$line = preg_replace_callback(
    '/(<[^<] class=\")([^"]*)(\")/',
    function ($matches) {
        $classes = explode(' ', $matches[2])
            /*
                Do your class name replacements here
            */
        return $matches[1].(implode(' ', $classes)).$matches[3];
    },
    $line
);

Answer 2

Hope this helps...

My use case:

Append an additional (css) class to the class attribute for an html tag

Demo: https://regex101.com/r/YZ1Nre/2

Regex:

/(?<opening_tag><input)(?<attributes_before_class>.*)(?<class_attribute_start>class=\')(?<class_value>.*?)(?<class_attribute_end>\')(?<attributes_after_class>.*)(?<closing_tag>\/>)/

Substitution:

${opening_tag}${attributes_before_class}${class_attribute_start}${class_value} uk-width-1-1 ${class_attribute_end}${attributes_after_class}${closing_tag}

Test String:

  <input name='input_4' id='input_2_4' type='text' value='' class='large'  tabindex='1'   aria-required="true" aria-invalid="true" />

Result:

 <input name='input_4' id='input_2_4' type='text' value='' class='large uk-width-1-1'  tabindex='1'   aria-required="true" aria-invalid="true" />

PHP Code:

$re = '/(?<opening_tag><input)(?<attributes_before_class>.*)(?<class_attribute_start>class=\')(?<class_value>.*?)(?<class_attribute_end>\')(?<attributes_after_class>.*)(?<closing_tag>\/>)/';
$str = 'Your test string here';
$new_css_class = 'uk-width-1-1';

$subst = '${opening_tag}${attributes_before_class}${class_attribute_start}${class_value} '.$new_css_class.' ${class_attribute_end}${attributes_after_class}${closing_tag}';

// if the named group replacing doesnt work, just use the indices as references
//$subst = '${1}${2}${3}${4} uk-width-1-1 ${5}${6}${7}';

$result = preg_replace($re, $subst, $str);

echo "The result of the substitution is ".$result;