HTML Parser

A lightweight HTML parsing utility package that provides tools for extracting and manipulating HTML content, with special focus on headings and table of contents generation.

Features

• 🔍 Extract Headings - Parse and extract heading elements from HTML content
• 🆔 Add Heading IDs - Automatically generate and add IDs to headings
• 📋 Table of Contents - React component for generating interactive TOCs
• ⚡ Lightweight - Pure functions with minimal dependencies
• 🎯 TypeScript Support - Full TypeScript definitions included

Installation

npm install @guetechteam/html-parser

Usage

Core Functions

import { extractHeadings, addHeadingIds } from '@guetechteam/html-parser'

// Extract headings from HTML content
const headings = extractHeadings('<h1>Title</h1><h2>Subtitle</h2>')
console.log(headings)
// Output: [{ level: 1, text: 'Title' }, { level: 2, text: 'Subtitle' }]

// Add IDs to headings
const htmlWithIds = addHeadingIds('<h1>My Title</h1>')
console.log(htmlWithIds)
// Output: '<h1 id="my-title">My Title</h1>'

React Component

import { TableOfContents } from '@guetechteam/html-parser'

function App() {
  const htmlContent = `
    <h1>Introduction</h1>
    <h2>Getting Started</h2>
    <h3>Installation</h3>
    <h2>Advanced Usage</h2>
  `

  return (
    <div>
      <TableOfContents htmlContent={htmlContent} />
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </div>
  )
}

API Reference

extractHeadings(html)

Extracts heading elements from HTML content.

Parameters:

• html (string) - HTML content to parse

Returns:

• Array of heading objects with level and text properties

addHeadingIds(html)

Adds unique IDs to heading elements in HTML content.

Parameters:

• html (string) - HTML content to process

Returns:

• String with HTML content including generated IDs

<TableOfContents />

React component that generates a navigable table of contents.

Props:

• htmlContent (string) - HTML content to generate TOC from
• className? (string) - Optional CSS class name
• maxLevel? (number) - Maximum heading level to include (default: 6)

Development

# Install dependencies
npm install

# Run tests
npm test

# Build package
npm run build-tsup

# Development mode
npm run dev

License

ISC