使用 JavaScript 将 HTML 中所有出现的几个字符串替换为提示中的用户输入

Question

上下文： 我是 JavaScript 的新手，我正在学习我为客户服务工作构建的一个小程序。这是一个 HTML 文件，其中包含一些快速的通用消息，许多服务员使用这些消息，每个服务员代表我们公司的一个分支机构。我希望每个服务员都能够自定义他们的名字和他们的分支机构的名称（由字符串“YourName”和“YourBranch”表示）。我觉得我离获得它如此之近，这是在能够与非常需要此解决方案的同行分享之前我需要做的最后一件事。所以我决定寻求帮助。

我正在尝试做什么以及到目前为止我尝试了什么： 我创建了一个按钮，用于打开一个提示，他们可以在其中输入信息。目的是使用他们的输入，以便它在 HTML 文本中被替换。而且我有点设法用很多 google fu 来做到这一点，但是替换操作只在第一次出现时发生。我希望它发生在所有事件中。我尝试了一个循环但失败了。我为循环找到的所有示例都是关于增量或字符串的，并且我正在使用用户输入。所以我决定尝试另一种方法，使用两个 replace() 和全局正则表达式，你可以在我的 JS 代码的最后部分看到。

谁能赐教一下吗？

下面是我的 HTML 文件的一小部分和整个 Javascript 文件。不认为 CSS 相关。

const buttonName = document.querySelector('#buttonEditName')

const nameAttendant = document.querySelector('#attendantName')
const nameBranch = document.querySelector('#branchName')

buttonName.onclick = () => {
  const name = prompt('What is your name?')
  const branch = prompt('What is your branch name?')

  nameAttendant.textContent = `${name}`
  nameBranch.textContent = `${branch}`

  const textAnswer = document.querySelector('.content')
  textAnswer.textContent = textAnswer.textContent.replace(/nameAttendant/g, name)
  textAnswer.textContent = textAnswer.textContent.replace(/nameBranch/g, branch)
}

<div class="content">
  <h1 class="main-title">Quick Messages</h1>

  <div class="container">
    <button id="buttonEditName">Edit attendant and branch info</button>
  </div>

  <h3 id="welcome">Welcome</h3>
  <p>
    Good morning! My name is <span id="attendantName">YourName</span> and I represent <span id="branchName">YourBranch</span>. How can I help you?
  </p>

  <p>
    Good afternoon! My name is <span id="attendantName">YourName</span> and I represent <span id="branchName">YourBranch</span>. How can I help you?
  </p>

Answer 1

您有多个具有相同 ID 的标签，这是一种无效语法，在这种情况下您应该使用 class 而不是 ID
就像你有几个相同的标签 select 或者你应该使用 querySelectorAll 方法来 select 所有这些标签并在每个实例上循环以用正确的值替换 innerText

const buttonName = document.querySelector('#buttonEditName')

buttonName.onclick = () => {
  const name = prompt('What is your name?');
  const branch = prompt('What is your branch name?');

  const textAnswer = document.querySelector('.content');
  [...textAnswer.querySelectorAll('.attendantName')].forEach(oneNamePlace => oneNamePlace.innerText = name);
  [...textAnswer.querySelectorAll('.branchName')].forEach(oneBranchName => oneBranchName.innerText = branch);
}

<div class="content">
  <h1 class="main-title">Quick Messages</h1>

  <div class="container">
    <button id="buttonEditName">Edit attendant and branch info</button>
  </div>

  <h3 id="welcome">Welcome</h3>
  <p>
    Good morning! My name is <span class="attendantName">YourName</span> and I represent <span class="branchName">YourBranch</span>. How can I help you?
  </p>

  <p>
    Good afternoon! My name is <span class="attendantName">YourName</span> and I represent <span class="branchName">YourBranch</span>. How can I help you?
  </p>

使用 JavaScript 将 HTML 中所有出现的几个字符串替换为提示中的用户输入

Using JavaScript do replace all occurrences of a few strings in HTML by the user input from a prompt

javascript

replace

queryselector