0

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

  1. 如果它包含 float:left 或 float:right 则不做任何更改
  2. 否则，添加显示：块。
  3. 另外，修改边距 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 代码中进行。

4

4 回答 4

2

尝试使用此模式进行匹配<img/>，而其中不包含任何float内容：

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

解释

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

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

于 2012-11-21T14:20:09.057 回答
1

编辑：

在我考虑了一秒钟之后，使用一大块示例 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";

?>
于 2012-11-21T14:35:24.703 回答
0

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

于 2012-11-21T14:28:37.967 回答
0

根据您的定义，快速而肮脏的功能：

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;
}
于 2012-11-21T14:29:41.630 回答