# html-segment

> Wrap headings and their contents in semantic section containers

Latest version **1.1.1** (published 2016-11-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install html-segment
pnpm add html-segment
yarn add html-segment
bun add html-segment
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2016-11-10 |
| First published | 2016-09-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Evan Yamanishi |
| Maintainers | sh0ji |

## Links

- npm: https://www.npmjs.com/package/html-segment
- Repository: https://github.com/sh0ji/segment
- Homepage: https://github.com/sh0ji/segment#readme
- Issues: https://github.com/sh0ji/segment/issues
- npm.io page: https://npm.io/package/html-segment

## Recent versions

- 1.1.1 (latest) — 2016-11-10
- 2.0.1 (next) — 2020-03-31
- 2.0.0 — 2018-10-30
- 1.1.0 — 2016-10-20
- 1.0.5 — 2016-10-07
- 1.0.4 — 2016-10-07
- 1.0.3 — 2016-10-07
- 1.0.2 — 2016-10-06
- 1.0.1 — 2016-10-06
- 1.0.0 — 2016-09-29

## README

# (html-)segment

Wrap headings and their contents in semantic section containers.

## Usage

Segment can either be used in the browser (`segment.browser.js`), as a module or preprocessing tool (`segment.module.js`).

### Browser

Simply add `segment.browser.js` as a script in the page you want to segment.

```html
<body>
    ...page contents...
    <script src="segment.browser.js" type="text/javascript"></script>
</body>
```

The browser version attaches the segment class to the window object as `htmlSegment`, allowing you to initialize it with `new htmlSegment(document[, config])`. Pass it the document object and an optional configuration object.

```javascript
// e.g. main.js
let segment = new htmlSegment(document)
```

By default, this will automatically wrap all headings and their contents in `<section>` containers.

### Module

Install with [yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/).

```sh
$ yarn add html-segment --dev
```

Include it in your module:

```javascript
// ES6
import segment from 'html-segment'

// ES5
var segment = require('html-segment')
```

This will import the `dist/segment.module.js` version.

## Options


## Preprocessing

Segment can also be used to alter static documents in a backend environment like node.js. Initialization works differently in this scenario since there isn't a window or document object to use.

### jsdom Example

This example creates a document object using [jsdom](https://github.com/tmpvar/jsdom), processes it with html-segment, and then saves the result as a new html file.

```javascript
// ES6 & Node.js
import fs from 'fs'
import path from 'path'
import jsdom from 'jsdom'

// equivalent to `const htmlSegment = require('html-segment')`
import htmlSegment from 'html-segment'

const dirs = {
    input: './documents/input',
    output: './documents/output'
}

const filename = 'myFile.html'

// read the file
fs.readFile(path.join(dirs.input, filename), 'utf8', (err, data) => {

    // pass to jsdom
    jsdom.env(data, (jsdomErr, window) => {
        if (jsdomErr) throw jsdomErr

        // run segment
        let segment = new htmlSegment(window.document)

        // an example of something you can do with the segment object
        // this will output all of the section ids that segment creates
        segment.sections.map((section) => console.log(section.getAttribute('id')))

        // write the result to a new output file
        fs.writeFile(path.join(dirs.output, filename), window.document.documentElement.outerHTML, (writeErr) => {
            if (writeErr) throw writeErr
        })
    })
})
```

---
_Source: https://npm.io/package/html-segment · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._