Question

尝试用某些php服务器端魔术替换this jquery code：

$(document).ready(function() {
    $('#text img').each(function(){ 
        source = $(this).attr('src');
        $(this).wrap($('<div class="caption '+ $(this).attr('class') + '"></div>')).removeAttr('class').removeAttr('height').removeAttr('width');
        $(this).after('<p>' + $(this).attr('alt') + '</p>');
        $(this).attr('src', '/system/tools/phpthumb/phpThumb.php?src=' + source + '&wl=200&hp=200&q=85&f=jpg');
    });
});

所有这一切都是这样的：

<img class="right" src="blah.jpg" alt="My caption" width="100" height="200" />

并替换为：

<div class="caption right">
    <img src="/system/tools/phpthumb/phpThumb.php?src=blah.jpg&wl=200&hp=200&q=85&f=jpg" alt="My caption" />
    <p>My caption</p>
</div>

图像分散在<p>之间的一组纺织格式html中。像这样：

<p>My paragraph text</p>
<img src="image.jpg" />
<p>Another paragraph text <img src="another_image.jpg" /> with more text</p>
<p>And so on</p>

它使用户能够向左，向右或中心浮动图像，并使用phpthumb自动创建缩略图。我假设我需要使用正则表达式。我是php的新手，只知道前端编码。你会怎么攻击这个？

Answer 1

我建议您使用DOMDocument之类的解析器。此外，使用DOMXPath，您可以逐个翻译jQuery代码：

$documentSource = '<div id="text"><img class="right" src="blah.jpg" alt="My caption" width="100" height="200" /></div>';
$doc = new DOMDocument();
$doc->loadHTML($documentSource);
$xpath = new DOMXPath($doc);
foreach ($xpath->query('//html/body/*[@id="text"]/img') as $node) {
    // source = $(this).attr('src');
    $source = $node->getAttribute('src');

    // $(this).after('<p>' + $(this).attr('alt') + '</p>');
    $pElem = $doc->createElement('p', $node->getAttribute('alt'));

    // $('<div class="caption '+ $(this).attr('class') + '"></div>')
    $divElem = $doc->createElement('div');
    $divElem->setAttribute('class', 'caption '.$node->getAttribute('class'));

    // $(this).wrap( … );
    $divElem->appendChild($node->cloneNode(true));
    $divElem->appendChild($pElem);
    $node->parentNode->replaceChild($divElem, $node);

    // $(this).removeAttr('class').removeAttr('height').removeAttr('width');
    $node->removeAttribute('class');
    $node->removeAttribute('height');
    $node->removeAttribute('width');

    // $(this).attr('src', '/system/tools/phpthumb/phpThumb.php?src=' + source + '&wl=200&hp=200&q=85&f=jpg');
    $node->setAttribute('src', '/system/tools/phpthumb/phpThumb.php?src=' . $source . '&wl=200&hp=200&q=85&f=jpg');
}
echo $doc->saveXML();

Answer 2

一些完全未经测试的代码：

preg_match('|<img class="([a-z\ ]+)" src="([a-z\ ]+)" alt="([a-z\ ]+)" />|i', 'PUT THE EXISTING HTML HERE', $matches);

echo <<<EOT
<span class="{$matches[0]}">
  <img src="{$matches[1]}" />
<p>{$matches[2]}</p>
</span>
EOT; #this should be at the start of line

感兴趣，为什么你不能在第一时间输出正确的HTML？加载正则表达式引擎并非没有开销！

Answer 3

我想您可能对使用其DOM扩展在PHP内部模仿jQuerys功能的PHP库感兴趣。

该项目名为PHPQuery - http://code.google.com/p/phpquery/

可以通过PEAR轻松安装，使用方法类似于jQuery语法

Answer 4

结束使用：

<?php
$string = '{body}';
$documentSource = mb_substr($string,3,-4);

$doc = new DOMDocument();
$doc->loadHTML($documentSource);
$xpath = new DOMXPath($doc);
foreach ($xpath->query('//html/body/img') as $node) {
    $node->removeAttribute('height');
    $node->removeAttribute('width');
    $source = $node->getAttribute('src');

    $node->setAttribute('src', '/system/tools/phpthumb/phpThumb.php?src=' . $source . '&wl=200&hp=200&q=85&f=jpg');

    $pElem = $doc->createElement('p', $node->getAttribute('alt'));

    $divElem = $doc->createElement('div');
    $divElem->setAttribute('class', 'caption '.$node->getAttribute('class'));
    $node->removeAttribute('class');

    $divElem->appendChild($node->cloneNode(true));
    $divElem->appendChild($pElem);
    $node->parentNode->replaceChild($divElem, $node);

}
?>

在<div>中包装所有<img/>，取alt属性并将其添加到<p>里面</p> </div>

4 个答案: