Question

假设我有以下代码作为变量的值（我可以使用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="和"之间的任何内容）并将其转换为小写，那就没问题了（I＆＃39 ;我对我添加的任何未来元素的src值感到满意。

Answer 1

使用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();

Answer 2

如果您只需要在路径地下室（文件名）上应用小写，则可以使用DOM和正则表达式：

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

Live demo

Answer 3

尝试以下代码

$('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>

修改其他两个字符串中的通配符字符串

3 个答案: