Question

我想用字符串中的图像替换空的alt标签。我有一个字符串，其中包含窗帘页面的所有文本。在文本中也是图像，其中很多都有空标签（旧数据），但大多数时候它们都有标题标签。例如： <img src="assets/img/test.png" alt="" title="I'am a title tag" width="100" height="100" />

我希望拥有的内容： <img src="assets/img/test.png" alt="" title="I'am a title tag" alt="I'am a title tag" width="100" height="100" />

所以：我需要找到我的字符串中的所有图像，循环显示图像，查找标题标签，找到alt标签，并将空的alt标签替换为具有值的标题标签。

这是我试过的：

preg_match_all('/<img[^>]+>/i',$return, $text);
if(isset($text)) {
            foreach( $text as $itemImg ) {
                foreach( $itemImg as $item ) {
                    $array = array();
                    preg_match( '/title="([^"]*)"/i', $item, $array );
                    if(isset($array[1])) {
                        //So $array[1] is a title tag, now what?
                    }
                }

            }
        }

我不知道必须完成代码，我认为必须有一个更容易解决的问题。建议？

Answer 1

也许你可以使用Javascript来进行jquery这类事情像：

> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

module.js:471
throw err;
^

Error: Cannot find module 'lodash._baseclone'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/var/www/html/korsall-clean/node_modules/node-
notifier/node_modules/lodash.clonedeep/index.js:9:17)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development 
node_modules/webpack/bin/webpack.js --progress --hide-modules --
config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely 
additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ubuntu/.npm/_logs/2017-06-07T10_34_11_411Z-
debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely 
additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ubuntu/.npm/_logs/2017-06-07T10_34_11_426Z-
debug.log

希望有所帮助

问候。

Answer 2

你想要的是一个HTML解析器库，它可以操作HTML然后再次保存。通过使用正则表达式来修改HTML标记，您可以为自己设置一团糟。

PHP内置的DOM模块提供此功能：http://php.net/manual/en/book.dom.php

这是一个例子（来自this article）：

$dom = new DOMDocument;
$dom->loadHTML($html);
$images = $dom->getElementsByTagName('img');
foreach ($images as $image) {
        $image->setAttribute('src', 'http://example.com/' . $image->getAttribute('src'));
}
$html = $dom->saveHTML();

Answer 3

使用Regex不是一个好方法，您应该使用DOMDocument来解析HTML。在这里，我们查询那些alt属性为空的元素，这些元素实际上是有问题的。

Try this code snippet here

<?php

ini_set('display_errors', 1);

$string=<<<HTML
<img src="assets/img/test1.png" alt="" title="I'am a title tag" width="100" height="100" />
<img src="assets/img/test2.png" alt="" title="I'am a title tag" width="100" height="100" />
<img src="assets/img/test3.png" alt="" title="I'am a title tag" width="100" height="100" /> 
HTML;

$domDocument = new DOMDocument();
$domDocument->loadHTML($string,LIBXML_HTML_NODEFDTD);

$domXPath = new DOMXPath($domDocument);
$results = $domXPath->query('//img[@alt=""]');
foreach($results as $result)
{
    $title=$result->getAttribute("title");
    $result->setAttribute("alt",$title);
    echo $domDocument->saveHTML($result);
    echo PHP_EOL;
}

Answer 4

您可以使用DOMDocument来满足您的要求。以下是供您参考的示例代码之一：

<?php
$html = '<a href="http://example.com" rel="nofollow external">test</a>';
$dom = new DOMDocument;
$dom->loadHTML($html);
$xpath = new DOMXPath($dom);
$nodes = $xpath->query("//a[contains(concat(' ', normalize-space(@rel), ' '), ' external ')]");
foreach($nodes as $node) {
    $node->setAttribute('href', 'http://example.org');
}

?>

Answer 5

请在下面尝试：

function img_title_in_alt($full_img_tag){

    $doc = new DOMDocument();
    $doc->loadHTML($full_img_tag);
    $imageTags = $doc->getElementsByTagName('img');

    foreach($imageTags as $tag) {

        if($tag->getAttribute('src')!==''){
            return '<img src="'.$tag->getAttribute('src').'" width="'.$tag->getAttribute('width').'" height="'.$tag->getAttribute('height').'" alt="'.$tag->getAttribute('title').'" title="'.$tag->getAttribute('title').'" />';
        }
    }
}

现在使用完整的html标签来调用该函数。参见示例：

$image = '<img src="assets/img/test.png" alt="" title="I\'am a title tag" width="100" height="100" />';

print img_title_in_alt($image);

如果你什么都不懂，请告诉我。

替换<img/>标记上的空alt标记

5 个答案: