Генерація змісту на основі заголовків тексту

Інше 2 хвилин 7 секунд 29 бер. 2022
Генерація змісту на основі заголовків тексту

Іноді корисно показати зміст великої статті або тексту з можливістю швидкого переходу до певного розділу. 

Простий варіант підійде для не великих текстів: Просто виведе.

Працює все доволі просто.
Проходимось по всьому тексті та знаходимо там заголовки, генеруємо їм посилання для того, щоб потім по них була навігація. Заголовки збираємо в окремий блок і в кінці вставляємо його в блок що указаний в налаштуваннях. 

const hlist = [];
let hNavigator = `<ul>`; // 
const listheadings = 'h1,h2,h3,h4,h5';
const selectorInsert = '.nav-text'; // селектор куда будем вставляти наш зміст
document.querySelectorAll(listheadings ).forEach((el, index) => {
            el.id = `it${index}`
            hNavigator += `<li><a class="${el.tagName}" href="#it${index}">${el.textContent}</a></li>`;
        })
hNavigator += `</ul>`
document.querySelector(selectorInsert).insertAdjacentHTML('beforeend', hNavigator)

Інший варіант, уже зі структурою вкладень, можна стилізувати як вам зручно 

function ListTOC(selectInsert){
  let hlist = [];
const listheadings = ['h1','h2','h3','h4','h5'];
const selectorInsert = selectInsert; // селектор куда будем вставляти наш зміст
let list = document.querySelectorAll(listheadings.join());

list.forEach((el, index) => {  
  const tagname = el.localName;
   hlist.push({
     'tagname':tagname,
     'index': index,
     'el':el
   });
}) 

let groups = hlist.reduce(function (r, a) {
        r[a.tagname] = r[a.tagname] || [];
        r[a.tagname].push(a);
        return r;
    }, Object.create(null));


let hNavigator = `<ul class="list-toc">`; 


for (el in groups){
   hNavigator += render(groups[el])
}

hNavigator += `</ul>`

document.querySelector(selectorInsert).insertAdjacentHTML('afterbegin', hNavigator)
/**
*/
function renderTocEl(el,index){
  return `<li class="${el.localName}"><a  href="#it${index}">${el.textContent}</a></li>`
}

function render(data){
let hNavigator = `<ul>`; 
  data.map(el=>{
    el.el.id = `it${el.index}` 
    hNavigator += renderTocEl(el.el,el.index);  
   })
   hNavigator += `</ul>`  
  return hNavigator;  
}
}

ListTOC('.main')

Демо

Telegram чат