使用JavaScript自动生成HTML标题时异常，求排查解决

错误点分析 #

1. ID参数未加引号：document.getElementById(titulo)中，titulo是目标元素的字符串ID，必须用引号包裹为'titulo'，否则会被当作未定义变量触发控制台报错。
2. 逻辑判断完全颠倒：需求是「不存在h1#titulo时生成新标签」，原代码却写成「存在该标签时才生成」，完全违背需求逻辑。
3. 下划线替换不彻底：replace('_', ' ')仅替换第一个下划线，若URL文档名包含多个下划线，无法全部替换为空格，需用全局正则/_/g实现全量替换。
4. 变量命名冲突：原代码内部重新声明var titulo，会导致后续获取元素时出现歧义，需调整变量名避免冲突。

修正后的代码 #

HTML代码（保持原结构即可）

<h1 id="titulo">kauã</h1>

JS代码

// 写入返回链接
document.write('<a href="rpg.html"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/U%2B2190.svg/25px-U%2B2190.svg.png"></a><br>');

// 检查是否存在h1#titulo
const existingTitulo = document.getElementById('titulo');
if (!existingTitulo) {
  // 提取URL中的文档名
  const docName = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
  // 替换所有下划线为空格，并移除.html后缀
  const formattedTitle = docName.replace(/_/g, ' ').replace('.html', '');
  // 生成h1标签
  document.write(`<h1 id="titulo">${formattedTitle}</h1>`);
}

// 获取最终的h1文本，设置为页面title
const finalTitulo = document.getElementById('titulo');
document.title = `PVP - ${finalTitulo.innerText}`;

说明 #

• 先通过existingTitulo存储元素引用，避免重复调用getElementById提升性能。
• 用模板字符串替代字符串拼接，让代码更易读。
• 全局正则/_/g确保所有下划线都被替换为空格，满足多下划线场景的需求。

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