Javascript删除空格object.hash

My object.hash中有空格，我想删除它们

我的代码如下

let mainNavLinks = document.querySelectorAll("nav ul li a.section-link")


console.log("Navbar hash", mainNavLinks[0].hash) 
console.log("Navbar hash", mainNavLinks[1].hash)
console.log("Navbar hash", mainNavLinks[2].hash)
console.log("Navbar hash", mainNavLinks[3].hash)


window.addEventListener("scroll", event => {
  let fromTop = window.scrollY;
  mainNavLinks.forEach(link => {
    let section = document.querySelector(link.hash).decodeURIComponent(window.location.hash).replace(/\s/g, '-');
    console.log(section)
  })
})

My console.log输出

Navbar hash #Introduction
Navbar hash #Census%20snapshot
Navbar hash #Proportion%20of%20women%20over%20time
Navbar hash #Recently%20trained%20workers

my window.addEventListener的当前错误消息：

Uncaught TypeError: document.querySelector(...).decodeURIComponent is not a function

编辑：最新更改

 window.addEventListener("scroll", event => {
  let fromTop = window.scrollY;
  mainNavLinks.forEach(link => {
    let section = document.querySelector(link.hash).toString().replace(/\s+/g, "-");;

    console.log(section)
  })
})

输出：未捕获的DomeException:未能对“文档”执行“查询选择器”：“普查%20snapshot”不是有效的选择器。

使用HTML进行最新编辑

<div class="sidebar"> 
    <nav>
      <ul>
        {% for block in page.article_content %}
        <li><a class="section-link" id="{{ block.value.header }}"
          href="#{{ block.value.header }}">{{ block.value.header }}</a></li>
        {% endfor %}
      </ul>
    </nav>
  </div>

<div class="container">
    {% for block in page.article_content %}
    <main>
      <section id="{{ block.value.header }}">
        <h1 class="headline-text section-header" >{{ block.value.header}}</h1>
        <div class="header-bar"></div>
        <div class="case-study-body-container" >
          {{ block.value.description|richtext }}
        </div>
      </section>
    </main>
    {% endfor %}


window.addEventListener("scroll", event => {
  let fromTop = window.scrollY;
  mainNavLinks.forEach(link => {
    // let section = document.querySelector(link.hash).toString().replace(/\s+/g, "-");
    let section = document.querySelector(decodeURIComponent(link.hash).replace(/ /g, "-"));
    let testLink = document.querySelector(decodeURIComponent(link.id).replace(/ /g, "-"));
    console.log('section', section)
    console.log('id', testLink)
    console.log('Link', link.hash)
  })
})

{page.article_content%中的块的%

{%endfor%}

{page.article_content%中的块的%
{{block.value.header}
{{block.value.description}richtext}
{%endfor%}
addEventListener（“滚动”，事件=>{
让fromTop=window.scrollY；
mainNavLinks.forEach（link=>{
//让section=document.querySelector（link.hash.toString（）.replace（/\s+/g，“-”）；
让section=document.querySelector（decodeURIComponent（link.hash）.replace（//g，“-”）；
让testLink=document.querySelector（decodeURIComponent（link.id）.replace（//g，“-”）；
console.log（'section'，section）
console.log（'id'，testLink）
console.log（'Link'，Link.hash）
})
})

几个问题：

link.hash

将空格编码为“%20”，因此在正则表达式中找不到带有

\s

的空格

decodeURIComponent

确实可以用来替换那些“%20”（和其他转义字符），但它不是字符串原型上的方法，而是一个全局函数

下面是用破折号替换空格的方法：

let section = document.querySelector(decodeURIComponent(link.hash).replace(/ /g, "-"));

演示：

let mainNavLinks=document.queryselectoral（“nav ul li a.section-link”）；
log（“Navbar hash”，mainNavLinks[0].hash）；
log（“Navbar hash”，mainNavLinks[1].hash）；
log（“Navbar hash”，mainNavLinks[2].hash）；
log（“Navbar hash”，mainNavLinks[3].hash）；
addEventListener（“加载”，事件=>{//仅将此代码段的事件更改为“加载”
让fromTop=window.scrollY；
mainNavLinks.forEach（link=>{
让section=document.querySelector（decodeURIComponent（link.hash）.replace（//g，“-”）；
控制台日志（部分）；
})
});







介绍
普查快照
长期以来妇女的比例
最近接受过培训的工人
Welll…错误消息正确-
decodeURIComponent
不是
querySelector
返回的节点上的方法
decodeURIComponent
是一个全局函数。谢谢，您的输入非常有用。根据HTML标准，
id
属性不应包含空格。在整个HTML文档中删除它们，以及它们在
散列
属性中引用的位置。@trincot my id属性是通过CMS生成的，因此我尝试使用JavaScript删除这些空格。感谢您的解释，现在就有意义了。但是，我的控制台仍然输出这个…#百分比%20%20女性%20超过%20时间你能确认哪个
console.log
输出这个吗？当然，行
console.log（“Navbar hash”，mainNavLinks[0].hash）
会输出它，但该行没有进行任何转换。您的问题是关于
forEach
循环中的错误。该循环中的
console.log
不可能输出，因为
document.querySelector
将返回DOM元素（如果存在匹配项），而不是字符串。我在我的答案中添加了一个片段，其中包含一些虚构的HTML。我可以确认是forEach循环输出的。我已经发布了一个带有控制台日志的屏幕截图，还用HTML更新了我的帖子，让您了解其结构。非常感谢您的帮助。输出
%20
的部分是
console.log（'Link'，Link.hash）
，它只输出
Link.hash
值，而不进行任何转换（就像我在前面的评论中所说的那样）。其他输出显然是
null
，这表明未找到相应的DOM元素。您应该进行调试以查看decodeURIComponent（link.hash）的值。替换（//g，“-”）

的值，然后检查您是否确实有与该选择器匹配的元素。由于您发布了HTML，该HTML仍需要由一些模板API解析（解析

{}

），我无法判断预期的

id

值应该是什么。如果您不能使用我前面的评论解决这个问题，那么请在发布HTML时不要使用那些

{{}

，而是使用在这些位置注入的实际值（您需要检查DOM才能看到）。