仅预替换 H1 图像答案

【问题标题】：Preg-replace only H1 image仅预替换 H1 图像
【发布时间】：2012-03-20 02:42:03
【问题描述】：

如何只替换 H1 背景图片？这是我的 CSS：

h1 a {
margin: 0 auto;
display: block;
background: url('http://mywebsite.com/img/old-logo.png') no-repeat;
}

这是我的 preg_replace 代码：

$document = preg_replace('/background[-image]*:[\s]*url\(\'?([^\'\)]+)\'?\)/', "background: url('http://mywebsite.com/img/new-logo.png')", $document);

但现在它会替换所有背景图片。

如何解决这个问题？

【问题讨论】：

不管插入哪个css规则，用“new-logo”简单地替换“old-logo”不是更合乎逻辑吗？
为什么不简单：str_replace("old-logo.png", "new-logo.png", $cssstr); 或 str_replace("/img/old-logo.png", "/img/new-logo.png", $cssstr);
徽标的目录在不断变化，所以这不是一个选项。

标签： php html css regex preg-replace

【解决方案1】：

无论您在网页中的何处使用了 h1，都使用 id="h1" 并像这样声明您的 css；

#h1 a {margin: 0 auto;display: block;background: url('http://mywebsite.com/img/old-logo.png') no-repeat;}

然后调用这个javascript代码来替换h1背景。请 #h1 与 h1 不同。

document.getElementById("h1").style.backgroundImage = url("img/new-logo.png");

或

document.getElementById("h1").style.backgroundImage.src = "img/new-logo.png";<br>

好吧，如果没有工作，那么创建另一个 css id 标签调用它

#h2 a {margin: 0 auto;display: block;background: url('http://mywebsite.com/img/new-logo.png') no-repeat;}

然后，使用下面的javascript代码从h1切换到h2；

document.getElementById("h1").id = "h2";

【讨论】：

【解决方案2】：

$document = preg_replace(
    '/((?:^|\s|,)h1(?:[^}]+))background[-image]*:[\s]*url\(\'?([^\'\)]+)\'?\)/m',
    "$1background: url('http://mywebsite.com/img/new-logo.png')",
    $document
);

【讨论】：

@TonHoekstra 我很高兴它有帮助 - 如果你接受答案，我也会很高兴；）谢谢！
我只有 1 个问题，该模式还改变了 div#footer 和其他 div 的背景图像。如何解决这个问题？
这些规则是否有选择器，例如 div#footer { ... } 或者选择器是否也包含 h1？
它们不包含H1，这里是一个例子：div#footer{background: url('URLHERE') repeat-y;高度：180px；宽度：790px；颜色：#333}
@TonHoekstra 我正在测试，正则表达式对我来说似乎工作正常。你认为我们能看到你的样式表吗？

【解决方案3】：

不妨试试这个模式：

'/h1.*\{.*background[-image]*:[\s]*url\(\'?([^\'\)]+)\'?\).*\}/m'

【讨论】：