Question

我想根据以下标准修改img标签的内联CSS：

如果它包含float：left或float：right
否则，添加display：block。
此外，修改边距CSS属性。将水平边距更改为自动并保留垂直边距。

例如，如果代码如下：

<img src="ex1.jpg" style="margin:5px 5px;float:left;" />

然后不做任何改变。但如果代码如下：

<img src="ex2.jpg" style="margin:5px 175px;" />

然后它应该被修改为：

<img src="ex2.jpg" style="display:block;margin:5px auto;" />

或类似的东西：

<img src="ex3.jpg" style="margin-top:5px; margin-left:5px;" />

然后它应该被修改为：

<img src="ex3.jpg" style="display:block;margin-top:5px margin-left:auto;" />

修改 img标签的修改必须在我的CMS获得的HTML代码中进行。

Answer 1

尝试使用此模式匹配<img/>，而不存在任何float：

<img(?![^<>]+?\bfloat\s*:\s*(?:left|right))[^<>]+>

<强>解释

<img(?![^<>]+?\bfloat\s*:\s*(?:left|right))[^<>]+>

字面匹配字符<img <img。断言从这个位置（负向前瞻）(?![^<>]+?\bfloat\s*:\s*(?:left|right))开始，不可能匹配下面的正则表达式。匹配列表<> [^<>]+?中不存在的单个字符。在一次和无限次之间，尽可能少地根据需要进行扩展（懒惰）+? 在单词边界\b处断言位置。字面float字面float匹配。匹配单个字符whitespace character（空格，制表符和换行符）\s*。在零和无限次之间，尽可能多次，根据需要回馈（贪婪）*。从字面上:匹配字符:。匹配单个字符whitespace character（空格，制表符和换行符）\s*。在零和无限次之间，尽可能多次，根据需要回馈（贪婪）*。匹配(?:left|right)下面的正则表达式。匹配下面的正则表达式（仅当此失败时尝试下一个备选方案）left。字面left字面left匹配。或者匹配下面的正则表达式2（如果这个匹配不匹配则整个组失败）right。字面right字面right匹配。匹配列表<> [^<>]+中不存在的单个字符。在一次和无限次之间，尽可能多次，根据需要回馈（贪婪）+。从字面上>匹配字符>。然后准备自定义函数来处理其余部分。

Answer 2

编辑：

在我想了一下之后，看一个使用大量样本html而不是一个很好的img标签列表的例子会更有帮助。请参阅下面的更新代码和输出。

规则非常简单，可以在需要时使用preg_replace轻松运行，并且可以使用strpos进行检查以保存正则表达式引擎调用。如果您有任何问题，请告诉我。

输出：

<html>
  <head></head>
  <body>
    <p> LOLOLOLOLOLOLOL </p>
    <img src="ex1.jpg" style="margin:5px 5px;float:left;" />
    <p> LOLOLOLOLOLOLOL </p>
    <img src="ex2.jpg" style="display:block;margin:5px auto;" />
    <p> LOLOLOLOLOLOLOL </p>
    <img src="ex3.jpg" style="display:block;margin-top:5px; margin-left:auto;" />
    <p> LOLOLOLOLOLOLOL </p>
  </body>
<html>

代码：

<?php

// sample html blob
$sample_html = '
  <html>
    <head></head>
    <body>
      <p> LOLOLOLOLOLOLOL </p>
      <img src="ex1.jpg" style="margin:5px 5px;float:left;" />
      <p> LOLOLOLOLOLOLOL </p>
      <img src="ex2.jpg" style="margin:5px 175px;" />
      <p> LOLOLOLOLOLOLOL </p>
      <img src="ex3.jpg" style="margin-top:5px; margin-left:5px;" />
      <p> LOLOLOLOLOLOLOL </p>
    </body>
  <html>';

// grab all the matches for img tags and exit if there aren't any
if(!preg_match_all('/<img.*\/>/i', $sample_html, $matches))
  exit("Found no img tags that need fixing\n");

// check out all the image tags we found (stored in index 0)
print_r($matches);

// iterate through the results and run replaces where needed
foreach($matches[0] as $string){
  // keep this for later so that we can replace the original with the fixed one
  $original_string = $string;

  // no need to invoke the regex engine if we can just do a quick search. so here
  // we do nothing if it contains a float.
  if(false !=- strpos($string, 'float:')){
    continue;
  } 

  // inject the display:block if it doesn't already exist
  if(false === strpos($string, 'display:block;')){
    $string = preg_replace('/(<img.*style=")(.* \/>)/i', '$1display:block;$2', $string);
  }

  // preg_replace only replaces stuff when it matches a pattern so it's safe to
  // just run even if it wont do anything.

  // replace margin left if in margin:vert horiz; form
  $string = preg_replace('/(margin:[\s0-9]+px)\s[0-9]+px;/', "$1 auto;", $string);

  // replace margin-left value to auto
  $string = preg_replace('/(margin-left:).*;/', "$1auto;", $string);

  // now replace the original occurence in the html with the fix
  $sample_html = str_replace($original_string, $string, $sample_html);
}

// bam done
echo "{$sample_html}\n";

?>

Answer 3

考虑使用preg_match();
这是php.net的快速链接：http://php.net/manual/en/function.preg-match.php。你可以看到那里的例子。

Answer 4

您定义的快速和脏功能：

function modify_img_css($html) {
    if (strpos($html, 'float:left') !== false || strpos($html, 'float:right') !== false) {
        return $html;
    }
    $html = str_replace('style="', 'style="display:block;', $html);
    if (strpos($html, 'margin-left:') !== false) {
        $html = preg_replace('/margin\-left:[^;]+;/', 'margin-left:auto;', $html);
    }
    if (strpos($html, 'margin:') !== false) {
        $html = preg_replace('/(margin:\s*\S+\s+)\S+;/', '\1auto;', $html);
    }
    return $html;
}

使用PHP修改img标签的内联CSS

4 个答案: