我可以动态替换呈现的 HTML 页面中的占位符文本吗？

Question

我希望我能想出一个更好的方式来表达我的问题，但基本上这就是我想要做的：在一个 HTML 文件中，我想用特定的字符串多次填充正文。例如：

<div>
    This is some content. XXX
</div>
<div>
    This is some more content. XXX
</div>
<div>
    This is even more content. XXX
</div>

然后，我想要一些脚本通过页面，并用递增的数字替换字符串的每个实例（在本例中为 XXX，但它可以是任何值），所以，例如：

<div>
    This is some content. 001
</div>
<div>
    This is some more content. 002
</div>
<div>
    This is even more content. 003
</div>

这当然是一个简单的示例，您可能认为这很愚蠢，只需输入数字即可。但是显然这比我打算做的要简单，而且现在我正在构建的所有内容的顺序还没有决定，所以事情可以在页面上的位置上下移动，但是我希望所有数字按照它们在页面上出现的顺序排列。

所以，最后的想法：我非常确定有一种比我想象的更好的方法来做到这一点，方法明智（即，制作一个 XML 表或其他东西）。我绝对愿意接受任何关于如何做到这一点的建议，但我有点白痴，所以如果你的答案是“pff 这在 Ruby 中非常容易，只需使用 Ruby”，那并不会真正让我到达我需要的地方.此外，如果这个问题已经得到解答，那么很难想到如何措辞来搜索以前的答案，所以如果我在搜索时没有找到预先存在的答案，我提前道歉。

Answer 1

您可以使用 CSS 计数器轻松做到这一点，sample here：

CSS

ul {
    counter-reset:list;
}
li:after {
    counter-increment:list;
    content: " (" counter(list) ")";
}

如需更多高级示例，请访问MDN documentation page。

Answer 2

您可以使用 PHP 来实现这一点。如果您没有使用它的经验，它确实很容易与 HTML 集成。基本上你像往常一样编写你的 html，但是你将文件命名为 .php 而不是 .html。然后你插入php脚本如下，例如：<p>I can count to <?php nextNumber(); ?></p>.

您应该在页面顶部插入更多带有计数器功能的脚本：

<?php
$i = 1;
$places = 4;
function nextNumber() {
   GLOBAL $i, $places;
   print str_pad($i++,$places,'0',STR_PAD_LEFT);
}
?>

这可能比 CSS 更好。它不依赖于浏览器。

将 $places 更改为您想要的位数（用于前导零）