如何在HTML页面及代码中仅输入一次房产ID即可实现多次复用？

核心逻辑：仅需修改1行代码定义房产ID，页面所有文本位置、图片路径自动填充，无需手动修改多处。

以下是可直接复用的模板代码：

<html>
<body>
<p>You are viewing Property #<span class="propID"></span></p>
<!-- 图片仅需标注序号，无需写路径前缀 -->
<img data-img-num="1">
<img data-img-num="2">
<img data-img-num="3">
<img data-img-num="4">
<p>Would you like more information regarding Property #<span class="propID"></span>?</p>

<script>
// ****************** 每次生成新页面仅需修改这里的ID即可 ******************
const propertyId = '123456';
// *********************************************************************

// 自动填充所有文本位置的房产ID
document.querySelectorAll('.propID').forEach(el => {
  el.textContent = propertyId;
});

// 自动生成所有图片的资源路径
document.querySelectorAll('img[data-img-num]').forEach(img => {
  const num = img.getAttribute('data-img-num');
  img.src = `${propertyId}/${num}.jpg`;
});
</script>
</body>
</html>

方案优势 #

• 无额外依赖，纯静态HTML即可运行
• 仅需修改1行代码配置房产ID，所有位置自动同步，不会出现漏改、错改问题
• 使用data-img-num自定义属性存储图片序号，避免页面加载初期请求错误路径产生404报错
• 扩展性强：后续新增文本显示位置只要加class="propID"的空span即可，新增图片只要加对应data-img-num属性即可，无需修改JS逻辑

兼容你设想的占位符方案（不推荐，会有初始404报错） #

如果你一定要保留******作为src占位符的写法，可以用以下代码实现：

<html>
<body>
<p>You are viewing Property #<span class="propID"></span></p>
<img src="******/1.jpg">
<img src="******/2.jpg">
<img src="******/3.jpg">
<img src="******/4.jpg">
<p>Would you like more information regarding Property #<span class="propID"></span>?</p>

<script>
const propertyId = '123456';
// 填充文本ID
document.querySelectorAll('.propID').forEach(el => el.textContent = propertyId);
// 替换所有img src里的占位符
document.querySelectorAll('img').forEach(img => {
  img.src = img.src.replace('******', propertyId);
});
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Chris G.