preg_replace <img src=""> 通过它的 id="" 如果出现超过 5 次

Question

如何使用图像 ID 只允许出现 5 次？假设我有几张图片。他们都共享相同的 ID id="my_image"。我想显示 5 张图片并删除所有其他具有相同 ID 的图片。

<img id="my_image" src="image_10.gif" alt="12" />
<img id="my_image" src="image_21.gif" alt="12" /> 
<img id="my_image" src="image_33.gif" alt="12" />
<img id="my_image" src="image_4.gif" alt="12" />
<img id="my_image" src="image_56.gif" alt="12" />
<img id="my_image" src="image_60.gif" alt="12" />
<img id="my_image" src="image_19.gif" alt="12" />
...etc.

希望它有意义。

Answer 1

使用 preg_match_all() 进行匹配，array_slice() 只捕获前五个。

$images = '<img id="my_image" src="image_10.gif" alt="12" />
<img id="my_image" src="image_21.gif" alt="12" /> 
<img id="my_image" src="image_33.gif" alt="12" />
<img id="my_image" src="image_4.gif" alt="12" />
<img id="my_image" src="image_56.gif" alt="12" />
<img id="my_image" src="image_60.gif" alt="12" />
<img id="my_image" src="image_19.gif" alt="12" />';

preg_match_all('~<img.*\>~', $images, $match);
$match = array_slice($match[0], 0, 5);

print '<pre>';
print_r($match);

Demo

注意：请记住元素ID应该是唯一的。如果这样做，W3C 验证将失败。此外，如果您使用该 ID 编写 JS，则只有最后一个可能有效。这就是为什么我建议您使用 class 而不是 ID.

备选方案：

使用class和JS隐藏在第五张图片之后：

Array.from(document.getElementsByClassName('my_image')).map((img, key) => key > 4 && (img.style.display = 'none'))

<img class="my_image" src="image_10.gif" alt="12" />
<img class="my_image" src="image_21.gif" alt="12" />
<img class="my_image" src="image_33.gif" alt="12" />
<img class="my_image" src="image_4.gif" alt="12" />
<img class="my_image" src="image_56.gif" alt="12" />
<img class="my_image" src="image_60.gif" alt="12" />
<img class="my_image" src="image_19.gif" alt="12" />

Answer 2

创建相同的 ID 是不好的做法。您应该使用属性 class 而不是 id 来标记某些元素。

你的代码应该像

<img class="my_image" src="image_10.gif" alt="12" />
<img class="my_image" src="image_21.gif" alt="12" /> 
<img class="my_image" src="image_33.gif" alt="12" />
<img class="my_image" src="image_4.gif" alt="12" />

之后你可以通过querySelectorAll js函数轻松隐藏一些元素。

var elements = document.querySelectorAll('.my_image');

  for (var i = 4; i < elements.length; i++) {
    elements[i].style.display = 'none'
  }

P.S 当然，你可以用 id 来做，但它很糟糕。

preg_replace <img src=""> 通过它的 id="" 如果出现超过 5 次

preg_replace <img src=""> by its id="" if it occurs more than 5 times

php

preg-replace