css - 试图从样式中删除某些 CSS 元素

Question

我正在尝试从 html style="" 属性中删除一些元素。

<div style="color: red; background: #000; position: fixed; top:0; left: 0;">Hey</div>

我想剪切这个 HTML，这样它将删除位置元素和背景元素。

例子：

<div style="color: red; top:0; left: 0;">Hey</div>

我怎么能在正则表达式上做到这一点？

Answer 1

一个简单的正则表达式可以是：

/background:.*?;|position:.*?;/

如果您只想检查标签中的样式属性，请尝试以下 PHP 测试代码：

<?php
$str = '<div style="color: red; background: #000; position: fixed; top:0; left: 0;">Hey</div>';
echo preg_replace('/(<.*?style=.*?)background:.*?;|position:.*?;(.*?")/','$1$2',$str);
?>

当属性没有分号（唯一属性，最后一个属性）时，您还要求匹配大小写。为了匹配没有分号的情况，我们应该假设它是唯一的属性或者是最后一个。在这两种情况下，我们都会使用以下正则表达式：

position:[^;]*?("|')
background:[^;]*?("|')

基本上，我要求匹配关键字position:或background:后跟除分号以外的任何字符，重复零次或多次，直到找到引号（单引号或双引号）。

这涵盖了我们称为“没有分号”的情况。

以下代码应该适用于所有情况，它没有经过优化，只是为了清晰和示例。它由一系列调用组成：

$str = preg_replace('/(<.*?style.*?)(position:[^;]*?)("|\')/','$1$3',$str);
$str = preg_replace('/(<.*?style.*?)(background:[^;]*?)("|\')/','$1$3',$str);
$str = preg_replace('/(<.*?style.*?)(position:.*?;)(.*?")/','$1$3',$str);
$str = preg_replace('/(<.*?style.*?)(background:.*?;)(.*?")/','$1$3',$str);
echo $str;

Answer 2

尝试类似的东西（虽然未经测试，所以不太确定表达式是否正确，尽管它应该给你足够的引导来解决剩下的问题）

<?php

$pattern = array();
$replacement = array();

$pattern[0] = '/position: [a-zA-Z]+;/';
$pattern[1] = '/background: #[a-zA-Z0-9]+;/';

$replacement[0] = '';
$replacement[1] = '';

$input_html = '<div style="color: red; background: #000; position: fixed; top:0; left: 0;">Hey</div>';

echo preg_replace($pattern, $replacement, $input_html);

?>

Answer 3

像这样的东西应该工作：

$tag = '<div style="color: red; background: #000; position: fixed; top:0; left: 0;">Hey</div>';

$tag = preg_replace('/background:\s?#[0-9a-zA-Z]{3,6};\s?/', '', $tag);

这仅适用于背景属性，然后您将为颜色属性执行另一个操作。

$tag = preg_replace('/position:\s?[a-zA-Z];\s?/', '', $tag);

Answer 4

将来，您可以尝试使用Chirpy - VS Add In 处理 Js、Css、DotLess 和 T4 文件或类似应用程序，尝试使用谷歌搜索 CSS 组合/压缩，它们会重新组合所有重复的选择器和东西。

我还建议使用链接的 css 文件，这样你可以更好地组织你的课程