点击按钮替换div中已渲染模板字段Nickname为Coolname的方法

问题原因 #

页面加载时，后端模板会把${Groups[0].Names[0].Nickname}这类表达式直接渲染成实际的昵称值（比如小明），此时p标签的文本内容已经没有Nickname字符串了，所以你之前的替换代码找不到匹配项，自然无法生效。

无需jQuery的解决办法 #

核心思路是保留原始模板表达式，这样点击按钮时就能基于原始表达式做替换。

步骤1：修改HTML，存储原始表达式

给每个p标签添加data-original属性，把模板表达式存进去：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<div class="div">
  <div class="subdiv">
    <p data-original="${Groups[0].Names[0].Nickname}">${Groups[0].Names[0].Nickname}</p>
  </div>
</div>
<div class="div">
  <div class="subdiv">
    <p data-original="${Groups[0].Names[1].Nickname}">${Groups[0].Names[1].Nickname}</p>
  </div>
</div>
<!-- 新增触发按钮 -->
<button>替换为Coolname</button>
</html>

步骤2：原生JS实现替换逻辑

给按钮绑定点击事件，读取data-original里的原始表达式，替换后更新文本：

document.querySelector('button').addEventListener('click', () => {
  // 选中所有目标p标签
  const targetPs = document.querySelectorAll('.subdiv p[data-original]');
  
  targetPs.forEach(p => {
    // 获取原始表达式
    const originalStr = p.dataset.original;
    // 替换Nickname为Coolname
    const newStr = originalStr.replace('Nickname', 'Coolname');
    // 更新显示文本
    p.textContent = newStr;
  });
});

补充说明 #

如果无法修改后端模板输出，还有一个临时方案（可靠性较低）：假设渲染后的昵称对应Groups[0].Names[x].Nickname的固定结构，你可以手动构造表达式，但这种方法依赖固定的数据结构，一旦后端结构变化就会失效，所以优先推荐第一种方案。

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