WordPress如何用JavaScript仅替换当前页面的城市名称文本

原有代码的核心问题 #

• HTML中重复使用id="cityName"：HTML规范要求页面内id唯一，getElementById仅能匹配到第一个同名id元素，其余位置的城市名无法被替换
• 函数内部无终止条件递归调用replaceText()，会触发无限递归导致页面栈溢出、浏览器卡死
• 未绑定DOM加载完成事件，替换逻辑不会自动执行
• 缺少元素存在性校验，页面无对应占位符时会直接抛出JS错误
• 城市名硬编码逻辑未做适配，无法灵活支持单页独立配置

具体实现步骤 #

1. 调整HTML占位符写法
   把所有需要替换城市名的位置，统一用类名标记，不要重复使用id：

<div class="container">
    <div class="row">
        <h1>Our Mental Health Services in <span class="city-name">Benton</span>, KY</h1>
        <h2>Online Counseling and Psychiatry Services in <span class="city-name">Benton</span>, KY</h2>
        <!-- 正文其余需要替换城市的位置，统一加class="city-name"即可，比如<p>我们在<span class="city-name">Benton</span>提供线下服务</p> -->
    </div>
</div>

2. 替换JS逻辑
   把原有错误的递归脚本替换为以下代码，每个页面发布时只需要修改currentCity的值为当前页对应的城市名即可，替换仅对当前页面生效：

// 等待页面DOM加载完成后执行替换，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
    // 仅需修改此处为当前页面对应的城市名，例如"洛杉矶"、"萨克拉门托"
    const currentCity = "纽约";
    // 选中页面所有城市名占位元素
    const cityHolders = document.querySelectorAll('.city-name');
    // 遍历替换所有占位内容
    cityHolders.forEach(function(ele) {
        ele.textContent = currentCity;
    });
});

可选优化（适配WordPress工作流） #

如果不想每个页面手动修改JS里的城市值，可以在WordPress页面编辑页添加自定义字段，字段名设为current_city，字段值填写当前页对应城市名，再通过PHP把自定义字段值输出到JS中，即可实现一次部署、所有页面只需要填自定义字段就自动完成替换，无需反复修改脚本。

内容的提问来源于stack exchange，提问作者Sanawman