Возможно ли сделать скрипт автоматического сбора заголовков со страницы и формирования оглавления?

Question

[khodos_dmitry]

На странице есть текст с заголовками нужно из него как-то автоматически вытянуть заголовки h2 сформировать оглавление.

Answer 1

[Yumeiro]

Конечно можно, в чем проблема?
Заюзал jQuery в коде, если что.
Пример.

<h2>Заголовок 1</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum consequat maximus. Pellentesque feugiat, nisl eget ornare lobortis, sem nisi maximus nisl, ultricies dapibus turpis odio id magna.
<h2>Заголовок 2</h2> Donec condimentum mauris nunc. Integer non mi at nunc imperdiet bibendum ac et sapien. Donec porta rhoncus nibh, eget egestas dui.
<h2>Заголовок 3</h2> Praesent dui nisl, molestie quis tellus sit amet, ullamcorper consectetur odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

#nav {
  border: 1px solid black;
  padding: 15px;
  box-sizing: border-box;
}

$(() => {
  //код внутри такого блока выполняется только после загрузки страницы
  $('body').prepend('<div id="nav"></div>');
  //создаем блок-обертку для содержания
  for (let i = 0, j = $('h2').length; i < j; i++) 
    //создаем цикл, i - счетчик, j - кол-во заголовков на странице
    $('#nav').append(`${$('h2').eq(i).html()}<br>`);
    //добавить пункт навигации: НАЗВАНИЕ + ПЕРЕНОС СТРОКИ
})

Результат вот тут можно увидеть: https://jsfiddle.net/c6dhdf4m/4/

Comments

[khodos_dmitry]

Спасибо. А как еще сделать, чтобы подставлялись id в ссылках оглавления. Те <li><a href="#usloviya">Условия</a></li>.
А заголовок тогда будет <h2 id="usloviya">Условия</h2>

[Yumeiro]

khodos_dmitry: Типа из заголовка бралось айди и подставлялось в ссылку? Да сделать-то не проблема, наверное хотите сделать навигацию с переходом к нужному заголовку. Через якори это делается так:

$(() => {
  $('body').prepend('<div id="nav"><ul></ul></div>');
  for (let i = 0, j = $('h2').length; i < j; i++) {
    $('h2').eq(i).wrap(`<a name="a${i}"></a>`);
    $('#nav ul').append(`<li><a href="#a${i}">${$('h2').eq(i).html()}</a></li>`);
  }
})

Или можно сделать немножко иначе с помощью scrollTop

function scrollto(e) {
  $(document).scrollTop($('h2').eq($(e).attr('n')).offset().top);
}
$(() => {
  $('body').prepend('<div id="nav"><ul></ul></div>');
  for (let i = 0, j = $('h2').length; i < j; i++) {
    $('#nav ul').append(`<li>${$('h2').eq(i).html()}</li>`);
    $('#nav li').eq(i).attr('n', i).attr('onclick', 'scrollto(this)');
  }
})

Способ 1:
https://jsfiddle.net/z12qkagg/4/
Способ 2:
https://jsfiddle.net/c6dhdf4m/18/
Должно помочь

[Alex-Broudy]

Yumeiro, отличное решение, но почему-то не работает на статичных страницах wordpress. В чем может быть проблема?

Для постов я воспользовался решением от wp-kama, а вот со статичными страницами возникла проблема и при использовании вашего решения - также ничего не выводится.