Javascript Удалить пробелы object.hash

Question

В моем 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)
  })
})

Мой console.log Выходные данные

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

Текущее сообщение об ошибке для моего окна. Документ ':' # Census% 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)
  })
})

Answer 1

Несколько проблем:

1. link.hash будут иметь пробелы, закодированные как "% 20", поэтому вы не найдете их с \s в регулярном выражении.

2. decodeURIComponent - это действительно то, что вы можете использовать для замены этих "% 20" (и других экранированных символов), но это не метод в прототипе String, а глобальная функция.

Вот как можно заменить пробелы тире:

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

Демонстрация:

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("load", event => { // Changed event to "load" for this snippet only
  let fromTop = window.scrollY;
  mainNavLinks.forEach(link => {
    let section = document.querySelector(decodeURIComponent(link.hash).replace(/ /g, "-"));
    console.log(section);
  })
});

<nav>
    <ul>
        <li><a class="section-link" href="test#Introduction">Introduction</a></li>
        <li><a class="section-link" href="test#Census snapshot">Census snapshot</a></li>
        <li><a class="section-link" href="test#Proportion of women over time">Proportion of women over time</a></li>
        <li><a class="section-link" href="test#Recently trained workers">Recently trained workers</a></li>
    </ul>
</nav>

<div id="Introduction">Introduction</div>
<div id="Census-snapshot">Census snapshot</div>
<div id="Proportion-of-women-over-time">Proportion of women over time</div>
<div id="Recently-trained-workers">Recently trained workers</div>