如何用JavaScript替换段落内容？现有代码失效求解决

原代码的核心问题： #

• DOM元素不能直接调用字符串replace方法：document.getElementById("paragraph")获取的是DOM节点，不是文本内容，必须先获取其文本/HTML内容，替换后再赋值回去。
• 带src的<script>标签不能写内联代码：<script src="script.js">标签内部的代码会被浏览器忽略，必须单独写一个不带src的内联<script>块来执行替换逻辑。
• 占位符匹配错误：原代码里替换的是"first"字符串，但HTML里的占位符是<first>，需要匹配正确的占位符格式；同时原代码把变量名（比如"firstName"）作为替换值，而不是变量对应的实际内容（比如firstName变量的值"Max"）。
• HTML标签未正确闭合：原HTML里的<p>和<body>标签都没有正确闭合，可能导致DOM解析异常。

修正后的完整代码： #

HTML文件：

<body>
  <p id="paragraph"> 
    My name is <first> <last>. I have been at ... for <years> and plan to <goals> after completing my courses. 
  </p>

  <script src="script.js"></script>
  <script>
    // 获取段落元素
    const paragraph = document.getElementById("paragraph");
    // 获取当前HTML内容
    let content = paragraph.innerHTML;
    
    // 替换所有占位符为对应变量值
    content = content.replace("<first>", firstName)
                     .replace("<last>", lastName)
                     .replace("<years>", yearsOfStudy)
                     .replace("<goals>", goal);
    
    // 将替换后的内容赋值回段落
    paragraph.innerHTML = content;
  </script>
</body>

JS文件（无需修改）：

let firstName = "Max";
let lastName = "Jones";
let yearsOfStudy = "about a year";
let goal = "getting a job as a software developer";

补充优化方案： #

如果想让占位符更通用（比如改成{first}格式），可以用正则批量替换，适合多占位符场景：

const replacements = {
  "{first}": firstName,
  "{last}": lastName,
  "{years}": yearsOfStudy,
  "{goals}": goal
};

// 批量匹配替换所有{xxx}格式的占位符
content = content.replace(/\{(\w+)\}/g, (match) => replacements[match] || match);

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