将所有 <img> 包裹在 <div> 中，取 alt 属性并将其添加到 <p>里面 [英] Wrap all <img>'s in <div>, take the alt attribute and add it into a <p> inside

问题描述

尝试用一些 php 服务器端魔法替换 这个 jquery 代码:

$(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"/>

并将其替换为:

<img src="/system/tools/phpthumb/phpThumb.php?src=blah.jpg&wl=200&hp=200&q=85&f=jpg" alt="我的标题"/><p>我的标题</p>

图像散布在

之间的纺织格式 html 块中.像这样:

我的段落文本
<img src="image.jpg"/><p>另一段文字 <img src="another_image.jpg"/>带有更多文字
<p>等等</p>

它使用户可以向左、向右或居中浮动图像，并且使用 phpthumb 自动创建缩略图.我假设我需要使用正则表达式.我是 php 新手，只知道前端编码.你会如何攻击它?

解决方案

最终使用了这个:

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);}?>

Trying to replace this jquery code with some php server side magic:

$(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');
    });
});

All it does is take this:

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

And replaces it with:

<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>

The images are scattered throughout a block of textile formated html between <p>'s. Something like this:

<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>

It enables users to float images left, right or center and thumbnails are automatically created using phpthumb. I'm assuming I'd need to use regular expressions. I'm new to php and only know frontend coding. How would you attack this?

解决方案

Ended up using this:

<?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);

}
?>

这篇关于将所有 <img> 包裹在 <div> 中，取 alt 属性并将其添加到 <p>里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！