在另外两个字符串中修改通配符字符串 - Modify a wildcard string within two other strings

Modify a wildcard string within two other strings

假设我有以下代码作为变量的值(我可以使用JS或PHP):

<div class="container">
   <h1>The Page Title</h1>
   <img src="MyImage.JPG" class="graphic" />
   <p>Some body copy...</p>
   <img class="graphic" src="misc/SecondImage.JPG" />
</div>

是否有一种方法，我可以将图像文件名转换为小写，同时保留其他一切的情况下，然后重写所有的新代码到变量?

如果解决方案涉及找到src="*"的所有实例(或，字符串src="和"之间的任何内容)并将它们转换为小写，那就好了(我很高兴我添加的任何未来元素的src值也被转换)。

使用PHP，其中$html是您的html内容:

$dom = new DOMDocument;
$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$imgNodeList = $dom->getElementsByTagName('img');
foreach ($imgNodeList as $imgNode) {
    $imgNode->setAttribute('src', strtolower($imgNode->getAttribute('src')));
}
echo $dom->saveHTML();

如果您只需要在路径基础(文件名)上应用小写字母，您可以使用DOM和regex:

$html = <<< STR
<div class="container">
   <h1>The Page Title</h1>
   <img src="MyImage.JPG" class="graphic" />
   <p>Some body copy...</p>
   <img class="graphic" src="misc/SecondImage.JPG" />
</div>
STR;

$dom = new DOMDocument;
$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
// Get all images
$images = $dom->getElementsByTagName('img');
foreach ($images as $img) {
    $newSrc = preg_replace_callback('~[^/]+$~', function($match) {
        // Convert file names to lowercase
        return strtolower($match[0]);
    }, $img->getAttribute('src'));
    // Set new attribute value
    $img->setAttribute('src', $newSrc);
}
// Save to original variable
$html = $dom->saveHTML();

echo $html;输出

<div class="container">
   <h1>The Page Title</h1>
   <img src="myimage.jpg" class="graphic">
   <p>Some body copy...</p>
   <img class="graphic" src="misc/secondimage.jpg">
</div>

现场演示

试试下面的代码

$('img').each(function(){
  $(this).attr('src',  $(this).attr('src').toLowerCase())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
   <h1>The Page Title</h1>
   <img src="MyImage.JPG" class="graphic" />
   <p>Some body copy...</p>
   <img class="graphic" src="misc/SecondImage.JPG" />
</div>