如何用jQuery仅替换HTML中第一个‘-’为空格？页面代码失效求助

• 先解决页面中代码失效的问题：
  代码在控制台生效但页面里失效，核心原因是代码执行时机不对——DOM还没渲染完成时，jQuery找不到h1元素。把代码放在jQuery的DOM就绪回调里，确保元素加载完成后再执行：

  $(function() {
    const $h1 = $('h1');
    $h1.html($h1.html().replace('-', ' '));
  });
  

• 再解决只替换第一个'-'为空格的问题：
  你当前的replace('-','')本身默认只替换第一个匹配字符，如果你遇到了全量替换的情况，大概率是不小心用了全局匹配正则（比如/-/g）。只要用不带全局修饰符的替换逻辑，就能精准替换第一个'-'为空格：

  // 字符串直接替换（默认只匹配第一个）
  str.replace('-', ' ');
  
  // 或者用正则明确关闭全局匹配
  str.replace(/-/, ' ');
  

• 额外适配场景：如果h1是动态加载的（比如通过AJAX、前端框架异步渲染），DOM就绪回调也会失效。这种情况可以在动态内容加载完成后执行替换，或者用MutationObserver监听元素变化：

  const target = document.querySelector('h1');
  const observer = new MutationObserver(() => {
    target.innerHTML = target.innerHTML.replace('-', ' ');
    observer.disconnect(); // 完成一次替换后停止监听
  });
  observer.observe(target, { childList: true, subtree: true });
  

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